Congratulations! You have a plan for an amazing site! You’ve thought of everything… except accessibility.
It’s not your fault, it’s not top of mind for many business owners unless they’re specifically catering to people with disabilities. As you go through your site you should be aware of some items that – while they look fantastic – they’re either completely inaccessible, or they are hard to understand.
Low Contrast Design.
To the fully sighted it looks absolutely elegant, but to the estimated 8.4 Million who have visual issues in North America, this is hard – if not impossible to read. There are also other reasons to ensure that you have proper colour contrast on your site. To find out more about color contrast, please see my last post on colour contrast.
It’s amazing to me how many large company’s websites don’t function properly using keyboard navigation! Of the estimated 60.5 Million disabled persons in North America, many users depend on only a keyboard to navigate through websites. They navigate using the tab, enter, Page Up / Down, and arrow keys.
EVERY interactive item (links, videos, forms, carousels, etc.) MUST be easily accessible through keyboard only navigation. It’s helpful to have a focus order hidden at the top to allow users to move past the main menu directly into the main content of the website (rather then having to navigate through each menu item on each page).
It’s important to remember that any element that can be selected through keyboard interaction, should be able to be moved away from, using only a keyboard. Users should never get ‘stuck’ in an element.
A practical case of this is when a video is used within a carousel. It might seem like a really great way to feature videos, but this can cause some unexpected results when using keyboard navigation or other assistive technology. It’s a good practice to avoid using a multimedia item within another multimedia item.
Obvious Keyboard Focus.
While using keyboard only navigation, it can be tough to know what item is selected on the screen. Therefore, each element that can be tabbed into MUST have a visible ‘focus’ state that indicates what item is selected on the screen. Some browsers default to a thin grey dotted line, others to a blue solid border.
As the keyboard-only user navigates the site using the tab button, ensure that the tab key moves the user in a logical order. For example, if the user is filling out a form and the tab key jumps to random form fields instead of moving in a left-to-right top-to-bottom format – it will be confusing to the user. This is called ‘focus order’. In the animation below from the Brit + Co website, the tabbed order moves from one side of the screen to the other, then back again, and completely misses the categories menu item and the search option entirely.
Source: Brit + Co
You may think that closed captioning is only for the deaf or hard of hearing. But a study in 2017 found that 77 minutes of YouTube video was consumed at work each day. Many of them watch without the sound on, so this is a great reason to have closed captioning on all your video content.
An even more compelling reason, is that closed captioning increases your video searchability. A study by study in 2017 found that Google indexes closed captions uploaded to YouTube videos, which makes them more likely to rank higher in searches for relevant keywords.
Source: Wine Explorer, Brancott Estate
It can help create extraordinary interactive experiences like the Wine Explorer from Brancott Estate website. While canvas has support in all browsers and will render on the screen, any text rendered inside of canvas becomes an image — meaning it’s inaccessible to screen readers. Some complain that this is the least accessible thing to be put on the web since Flash.
|XML-based vector image format for interactivity||HTML element that draws bitmap graphics on the webpage|
|Flexible and can expand beyond its natural size||Images are not very flexible|
|Supports event handlers||No support for event handlers|
|Not suited for gaming applications||Well suited for gaming applications|
Because canvas applications can be so different from project to project, the accessibility will be different for each project. If the canvas is only reproducing 2D graphics, such as a bar chart, a simple alternative text will do. Whereas a more complicated item may need a significant amount of work – or may not even be possible to be made accessible.
Complex Graphics with large amounts of information
The public has LOVED these large infographics. They help graphically depict large amounts of data in easy to understand format. So what’s the issue? Well natively these graphics are created as .jpg, .png and other solid graphic formats. Which means the only way it can be understood in a non-visual way is by way of the alt tag. In the example below the alt tag was “Infographics – The Benefits of Their Use Online Infographic”. With a limit of 125 characters, alt tags cannot inform the user of this whole graphic. If there is nothing else on the page, to help give understanding of the graphic a visually impared user is left without any idea of what the image was meant to convey.
Complex graphics should either have a full text alternative explanation above, or below or be re-created in some textual format within the main content of the site. Adding this live text is also a great way to increase your SEO and your searchability.
We’re amazing at pushing the boundaries of what is possible on the web. But with this exploration it’s important that we don’t leave out the millions of people that are unable to experience websites in a traditional sense. With planning and testing you’ll end up with a site that not only serves everyone, but also heightens your sites search performance.
Want more information about accessible web design? Contact us
 Number as reported in 2018 from the US National Defense of the Blind and Canadian National Institute for the Blind. Note that these numbers are expected to double by 2050.