Web Accessibility For Techies

Web Accessibility For Technicians
July 29, 2015

With recent changes to Google’s page ranking algorithm (AKA ‘Mobilegeddon’), websites that are mobile-friendly and easy to access are being prioritized in search results. You may have read how web accessibility can be achieved in the eyes of designers, business planners, and SEO experts. It’s time we get technical and learn what Google actually expects from a website to qualify for a page rank increase, or at least, maintain it.

You can always check your site with an accessibility tool like WAVE, but it will save a lot of time and effort if a site is created proactively with these pointers in mind rather than having to fix issues retrospectively.

A11yMeme-Fumble. jpg

Here are some helpful tips to easily bypass web accessibility standards!
1. Follow the successive header sequence

Always, always, start with the <h1> tag and work your way down without skipping the sequence. For example, if you want to use the <h7> heading, you must already have <h1> through <h6> in your document.

1. Avoid contiguous link redundancy

Each contiguous <a> tag, regardless of whether there is another HTML tag between them, cannot have the same href value.

Still not with me, ok look at this example.

1. <a href=’index.html’>Copyright ABC789 Australia 2015</a>

2. <div class=’quick-link-header’>Quick Links</div>

3. <a href=’index.html’>Home</a>

4. <a href=’termsandc.html’>Terms and Conditions</a>

Lines 1 and 3 violate link redundancy rules and fail the accessibility test.

1. Alt and title text for images.

Not only does it help with accessibility standards, it helps users browsing using screen readers as well.

The alt and title attributes cannot be the same.
Not too short, not too long.
Keep it short and sweet.
4. Avoid common words in anchor text.

Link text with phrases such as “Read more”, “More Information” and “Click Here” should be avoided and should contain information that makes sense out of context.

1. <a href=”eye_care_centre.html”>Read more</a>

2. <a href=”eye_care_centre.html”>Eye care clinic in Melbourne</a>

Line 1 contains text that is too general and can’t be understood by people browsing with a screen reader. Be descriptive as shown in line 2.

1. Include a skip link

Skip link provides a ‘hidden’ link that provides a way to jump to the main content for users using screen readers. It must be the first link on the website.

1. The input form must have a label

Form input is usually accompanied by some introductory text. You might as well use a <label> tag to surround it.

1. Use ARIA Markers

This is a relatively new concept that hasn’t been exposed to much in the mainstream web development field yet. Simply put, ARIA landmarks provide a way to assign different roles (be it banners, navigation, headers, and footers) so that screen readers can interpret the exact purpose of each region. Please refer to the footer to learn more about it.

1. Only use tables for data presentation, not layout

This has been a point universally agreed upon since the advent of CSS. The use of tables is highly discouraged considering how less responsive they are in smaller dimensions such as mobile phones.

1. Ensure keyboard accessibility and screen legibility

The essence of making the website accessible is to ensure that every user can access thewebsite and benefit fully from the information regardless of any physical disabilities. There are no apps yet in the industry to test keyboard navigation automatically. But it’s easy to test the functionality using the TAB and RETURN keys.

For screen readability, there are many Applications available such as NVDA (most commonly used for Windows), VoiceOver for Mac, and JAWS.

1. Attach videos with care

I’m not implying that attaching videos is bad. This is one result of advances in information technology. However, considering the web’s accessibility, be sure to describe the video as text so that people with disabilities can understand the contents of the video thanks to a screen reader.