With the recent changes to Google’s page ranking algorithm (AKA 'Mobilegeddon'), mobile friendly, accessible websites are being prioritised in search results.  You may have read how web accessibility can be achieved in the eye of designers, business planners and SEO gurus. It's about time we go technical and explore what exactly Google expects from a website to be eligible for a page ranking bump, or at the very least, retain it.

You could always get your website checked with an accessibility tool such as WAVE, but it would save a lot of time and effort if a website is proactively built with the following pointers in mind rather than having to fix issues retrospectively.

A11yMeme-Fumble.jpg

Here are a few helpful tips to pass web accessibility standards with ease!

1. Follow a sequential header order

Always, always, start with a <h1> tag and work your way down not missing the sequence. For example, if you wish to use a <h7> heading, you should already have <h1> through <h6> in the document.
 

2. Avoid adjacent link redundancy

Any <a> tags that are next to each other, irrespective of whether there are other HTML tags in between should not have the same href value.

Still not with me, ok take a 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 Page</a>

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

The lines 1 and 3 violate the rule of link redundancy and fail the accessibility test.
 

3. Alt and title texts for images.

Not only it helps the accessibility standards, but it also helps users who browse using screen readers as well.

• Alt and title attributes shouldn't be the same.
• Not too short, not too long.
• Keep it short and sweet.
   

4. Avoid generic wording in link texts.

Link texts with phrasings such as "Read more", "More information" and "Click Here" should be avoided and must contain information that should make sense out of context.

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

2. <a href="eye_care_centre.html">Eye care clinics in Melbourne</a>

Line 1 contains text that are too generic and cannot be understood by a person browsing with a screen reader. Be descriptive as shown on line 2.
 

5. Include a skip link

Skip links provide a 'hidden' link that provides a way to jump to the main content for users who use screen readers. It has to be the first link present in the website.
 

6. Form inputs must have labels

Form inputs are usually accompanied by some introductory text. You might as well use <label> tags to surround them.
 

7. Use ARIA Landmarks

This is a relatively new concept which hasn't had a lot of exposure in the mainstream web development field. In simple terms, ARIA landmarks provide a way to assign a different role (be it banners, navigation, headers and footers) so that the screen readers can interpret the exact purpose each region serves. Please refer to the footer to learn more about it.
 

8. Only use tables for data presenting rather than layouts

This has been a universally agreed point since the advent of CSS. Use of tables is highly discouraged considering how poorly responsive it is in smaller dimensions such as mobiles.
 

9.  Ensure keyboard accessibility and screen readability

The whole point of making a website accessible is to make sure every user can access the website and gain full benefit from the information regardless of any physical disability. There are no applications in the industry to automatically test the keyboard navigation as of yet. However it is easy to test the functionality using TAB and RETURN buttons.

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

10.  Attach videos with caution

I’m not implying attaching videos are bad. It is one of the results of the advancements of information technology. However, with web accessilibty in mind, ensure to describe the video as a caption so that people with disabilities can understand what the video is about thanks to screen readers.

References

1. Learn more about ARIA Landmarks [1]
2. How to meet WCAG 2.0 [2]
3. Learn more aboout skip links [3]
4. Image 1 reference [4]