Accessibility Techniques

There are a few techniques that should be tried on each webpage to make sure that you meet some of the basic accessibility needs:

• Always use proper syntax for your HTML. Use lists, sections, article, headings and other elements.
• Use relative sizing units for your fonts and containers such as em, or, better yet, rem.
• Zoom in and out two size up and down in a browser to test if the webpage breaks. Use command + & - or control + & - for zooming in and out. You can use command 0 or control 0 to get back to the default size.
• Use the Chrome Web Developer Extension for disabling the images and testing the site.
• Use the Chrome Web Developer Extension to disable all CSS and test the content of the site.
• Use Sim Daltonism or Colorblindly to test for colour blindness related issues.
• Validate your HTML and CSS.
• Check all the pages with a screen reader like VoiceOver.

Focus Styles

Focus is the state of a links when the user is on a link using a keyboard. We can use the tab key to access different links on a webpage. Focus styles are added to web pages for making it easy for users to know which link they are on.

Skip Links

Skip links are on page links are used to allow users to jump to the important parts of the website directly without going thought different parts. Mainly used for navigation and main content. The skip links are added at the top of the web page as the first set of links for easy access.

Styling Skip Links

Skip links are functional but leaving the links at the top of the page does not look good for our design. We can hide the skip links from the page while keeping them accessible.

We are using the following styles to first style and hide the skip links.

.skip-links{
  list-style: none;
  margin: 0;
  padding: 0;
}
.skip-links a{
  position: absolute;
  top: -3em;
  background-color: black;
  color:white;
  padding: .5em 1em;
  font-weight: bold;
}

Next we display the skip link when user is focused on a link

.skip-links a:focus{
  top: 0;
}

Back to top

Another type of skip link commonly used is the back to top button. This allows the users to jump back to the top of the page without having to scroll up.

Forms

Forms are used on the web to gather input, weather it is a contact form, a registration form, an e-commerce checkout page or a social media post. There are a few things to consider when it comes to making our forms accessible.

• Always add a label for an input filed

<label for="yourname">Name</label>
<input type="text" id="yourname" name="yourname">

Name

• Use appropriate input type such as email, text, number, url etc.

<label for="youremail">Email </label>
<input type="email" id="youremail" name="youremail">

Email

• Use placeholder attribute for a hint to the users

<label for="fullname">Name</label>
<input type="text" id="fullname" name="fullname" placeholder="Full Name">

Name