Accessibility is integral to providing equal access to all individuals using your website regardless of ability or device. Here are a few ways to make a website more accessible. I chose these five based on their impact on accessibility and usability for all users, as well as their impact on other factors such as SEO.

1. Color Contrast

Appropriate color contrast between the text and background can, when properly implemented, help readability. When color contrast is insufficient, there is a risk of rendering text completely illegible especially when you consider that one in 12 men (8%) and one in 200 women suffer from some form of color blindness (Colour Bind Awareness).

Let's look at some examples.

Normal Vision

Image of a green box with 'This is hard to read.' written in red inside the box

 

Individuals suffering from color blindness view the same text as:

 

Red-Blind (Protanopia)

 Same image as above with colors adjusted to simulated Protanopia.

 

Green-Blind (Deuteronopia)

Same image as above with colors adjusted to simulated Deuteronopia.

 

Blue-Blind (Tritanopia)

Same image as above with colors adjusted to simulated Tritanopia.

 

Monochromacy (Achromatopsia)

 Same image as above with colors adjusted to simulated Monochromacy.

 

From the above examples it becomes evident that since I used a combination of green and red, with very low luminosity contrast between the two, legibility is drastically reduced for blue blind or red blind individuals.

To mitigate diminishing readability from contrast, issues guidelines have been set to guide designers. These ratios consider color blindness issues but also diminished visual acuity. WCAG 2.0 AA standards require a contrast ratio of 4.5:1.

"The contrast ratio of 4.5:1 was chosen for level AA because it compensated for the loss in contrast sensitivity usually experienced by users with vision loss equivalent to approximately 20/40 vision. (20/40 calculates to approximately 4.5:1.) 20/40 is commonly reported as typical visual acuity of elders at roughly age 80." (W3C)

Helpful Tools

A number of tools exist to check luminosity contrast. A list of some available tools can be found on the w3.org website.

I use the WCAG Contrast Checker Firefox extension, which you see in the images above.

Good luminance contrast will not only prevent users with diminished vision from being unable to read the content, but also make content more readable for all users.

2. Content Structure and Hierarchy

To increase accessibility of the page, make sure the content has a hierarchy. Heading levels should be properly nested. In HTML <h1> will usually be the page title and followed by another <h1> or an <h2>. <h2> should be followed by another <h2> or an <h3> and so on. Skipping headers should be avoided (W3C, 2015).

<h1>Marine Animals</h1>
    <h2>Fish</h2>
        <h3>Clown Fish</h3>
    <h2>Mammals</h2>
        <h3>Dolphin</h3>
    <h2>Crustaceans</h2>
        <h3>Crabs</h3>
        <h3>Shrimp</h3>
<h1>Birds</h1>

Screen readers will use the header information to allow users to skip from one header to another. Furthermore, keyboard navigation and SEO will be improved, and individuals using distraction-free reading plugins will have a better user experience.

3. Keyboard Navigation

Not all devices and users use a mouse; therefore, websites should be accessible via keyboard only. One easy step to ensure this is possible is by tabbing through the links to make sure you can get to all of them and that the links are being tabbed through in the correct order. In HTML, the tab-index can be used to reorder the tab if a different sequence is preferred.

In CSS, the a:focus should also be styled so that, when you are tabbing through, you know what you currently have selected.

a:hover { background-color: gray; }

Should be coded

a:hover,
a:active,
a:focus {
    background-color: gray;
}

So that whether using the mouse or the keyboard, the user experience remains the same and one can clearly see where they are on the page.

4. Skip Navigation Link

Adding a link before the navigation that allows the user to go directly to the content of the page is also recommended. This prevents a user that is using an assistive device, or navigating via keyboard to have to go through the entire navigation every time they hit a new page.

<a href="#myContent">Skip Navigation</a>
<nav>...</nav>
<div id="myContent">
    my content
</div>

5. Image Alternative Text

To allow users utilizing assistive technologies such as screen readers to know what images on a website represent, alternative text must be provided.

Photo of a clown fish swimming through a pink anemone. Consider the picture to the left of a clown fish. A possible alternative text for this image might be:

"Photo of a clown fish swimming through a pink anemone."

In HTML the code would look like this:

<img src="clownfish.png" alt="Photo of a clown fish swimming through a pink anemone.">

If the image does not add any additional information to the page, or is a purely decorative image, the alt text should be left blank.

<img src="border.png" alt="">

ARIA can instead be used to alert the screen reader of the image's irrelevance to the content.

<img src="border.png" role="presentation" >

Although role="presentation" is not as widely supported as using a null alt attribute (W3C, 2015).

Another perk to proper use of alternative text on images is improved SEO.

Conclusion

Accessibility is not just a buzzword. It can make the difference in whether a user can or cannot get to the information on your website. By applying the five sections listed above to your website, you will be one step closer to have a site that is accessible and usable by all users.

Happy Coding.

 

Works Cited

Colour Bind Awareness. (n.d.). Colour Blindness. Retrieved 10 24, 2015, from Colour Blind Awareness: http://www.colourblindawareness.org/colour-blindness/

W3C. (n.d.). Contrast (Minimum): Understanding SC 1.4.3 . Retrieved 10 25, 2015, from Understanding WCAG 2.0: http://www.w3.org/TR/UNDERSTANDING-WCAG20/visual-audio-contrast-contrast.html

W3C. (2015, 03 02). Decorative Images. (E. Eggert, & S. Abou-Zahra, Editors) Retrieved 10 25, 2015, from Web Accessiblility Tutorials: http://www.w3.org/WAI/tutorials/images/decorative/

W3C. (2015, 02 27). Headings. (E. Eggert, & S. Abou-Zahra, Editors) Retrieved 10 25, 2015, from Web Accessibility Tutorials: http://www.w3.org/WAI/tutorials/page-structure/headings/