Leandra, Front End Developer
December 12, 2018
Skip introduction and navigate straight to the top ten list here.
I’ve always thought of the creation of accessible sites as a collaborated dance: a dance between designers, user experience specialists, web developers, content editors, and web accessibility auditors. At the end of it, the result is a collection of accessible templates and pages, ready to be filled out with images and information by content developers.
But, why bother?
Accessibility isn’t just a trend; it’s necessary for the web to move towards being a more inclusive place to all users. And as developers, we need to keep this in mind: One of the main purposes of a website is to deliver content. Therefore, we need to make sure that the information provided is perceivable, operable, and understandable to as many users as possible. These are actually three of the four concepts fundamental to web accessibility, in which WCAG 2.0 develops its technical standards and guidelines from. It’s referred to as ‘POUR’, see below:
Everyone needs to be able to digest the content of the site. This is done by having content available to at least one of the user’s senses. For example, if you are blind, the screen reader will need to work well with the content available. Or if you are deaf and there is audio present, then there should be an alternative text representation of the same content.
Everyone needs to be able to operate the interface. Only a portion of people use a mouse, some people use screenreaders or keyboards to navigate sites.
Everyone needs to be able to understand the content, even if you are successfully receiving it. For example, people have a range of cognitive abilities. Using clear language and making sure interfaces are consistent and predictable can really be helpful to many users.
The site must be built in such a way that it works across many combinations of different assistive technologies, older browsers, and devices. This principle is mostly only a concern for the web developers.
It’s easy to get carried away and excited when handed a brand new website by filling it with legacy content — without any further considerations — and months’ worth of hard work can be shared. But, keep this in mind: it is extremely important that a website’s accessibility integrity is maintained once it enters the content entry stage. The maintenance of a site’s long-term accessibility is reliant on its new content also being accessible. For instance, an accessible template is useless without accessible content and vise versa.
Sam Chandrashekar (@sambhavi), an accessibility program manager and professor at the OCAD’s Master of Inclusive Design Program, put it into good words at the #a11yTO Conference this past October of 2018,
“It is the responsibility of every organization to sustain the accessibility that it’s designers, developers, and others work hard to attain.”
— Sam Chandrashekar
When developing or migrating content into a website, accessibility should be thought about from the start and continued well into the future. Refurnishing a site’s content later on to become more accessible will burn much more hours than the initial commitment of considering accessibility from the start of the content development process.
In terms of web accessibility, for instance, no one wants to fix hundreds of links or images on hundreds of pages. So, if content creators create content with the four principles in mind (POUR), it can increase the durability, usability, and overall accessibility of their website.
That said, here’s a top ten list for anyone creating or editing content with accessibility in mind: [i]
1. Use descriptive link text
Stay away from the “Click Here” or “Learn More” links. Link texts should be written so they make sense out of context and accurately describe its purpose. Screen readers have options to list all the links on the web page, and these are provided out of context.
Below is an example, from voiceover, of a webpage with descriptive link text. A list of twelve “Learn More” links, would be useless to a screen reader user as it’s provides no information about the destination and purpose of the links.
A screenshot of the web voiceover rotor, listing out links on a webpage.
If you would like to test this out for yourself with voiceover, here is a guide for more information about navigating with voiceover using the rotor.
See success criterion: 2.4.4 Link Purpose (In Context) (Level A)
2. Use unique link text for links with different destinations
Users might not know the difference between links with the same link text. Make sure links that go to different destinations have differentiating link text.
3. Fix broken links and broken anchor links
Ensure links are not broken and anchor links have destinations on the page that actually exist. Broken links will confuse users and negatively influence other areas of your site, like SEO. And when using local links, they must refer to an existing element on the page.
See success criterion: 1.3.1 Info and Relationships (Level A)
4. Use alt tags correctly
If you are reading this article now, this is probably not the first time hearing about adding alt tags to your non-text content. Ensure alt tags are used, but also make sure to use them correctly. Every user should receive the same information that the non-text content is portraying.
Ask yourself, what is the net new information your image is providing to the end user? For example, pure decorative images should have an empty alt tag, since they provide no information. Make sure the alt tag is empty, otherwise the assistive technology will read out the whole file name. Also, alt text is useful as it is displayed for users that have slower connections and do not want to download images, especially on mobile.
Please refer to https://webaim.org/techniques/alttext/ for alt text basics for images.
See success criterion: 1.1.1 Non-text Context
5. Do not use images with text
Images that contain text within them are simply not accessible. Not all users benefit from alternative text used on images with text. For example, low vision users may have magnification applications that enlarge elements on the page, an enlarged image could possibly become pixelated and unreadable.
To keep it easy, try to steer clear from using images with text. But if there is no way around it, the alt text should include the text in the image.
See success criterions: 1.4.5 Images of text (Level AA) and 4.9 Images of Text (No Exception) — Level AAA
6. Heading structure should be correctly nested
Similar to links, assistive technologies can use headings to provide in-page navigation.
If you remove your styles for your website, and view the pure html of your site, the structure of your headings should be a logical outline. Authors should use headings that are properly nested (e.g., h1 followed by h2, h2 followed by h2 or h3, h3 followed by h3 or h4, etc.). Make sure headings levels are not skipped.
7. Use correct HTML5 markup
When HTML5 is correctly written to spec it allows the content to have programmatically determined relationships. For example, if you have a list, use an ‘ul’ or ‘ol’ tags. Do not use regular paragraphs, as that list relationship would be lost to some users. Another example of programmatically determined relationships are tables and the cells within them. Please refer to this guide for how to write better markup for tables.
Also, the use of ‘bold’ and ‘i’ tags are deprecated, and should be substituted for the use of ‘strong’ or ‘em’ tag respectively. This ensures a separation between presentation and semantics. Beware of misusing ‘strong’ and ‘h’ tags. If the text is a heading, then be sure to use an ‘h’ tag instead.
8. Increase the readability of your page
Users with disabilities that make it difficult to decode words and sentences are likely to have trouble reading and understanding complex text. If the page consists of complex information, consider adding a summary paragraph that states the page’s content in a simpler and concise way. Read more about making content more readable through the success technique, G153: Making the text easier to read.
Here is a resource to test the reading level of a web page, called the Readability Calculator.
See success criterion: 3.1.5 Reading Level (Level AAA)
9. Use descriptive page titles
Page titles are announced by assistive technologies when navigating web pages. This means for users to better understand where they are, without reading through a whole page, page titles should be informative. Descriptive page titles will also help with improved SEO.
See success criterion: 2.4.2 Page Titled (Level A)
10. Use non-automated captions on media
Not everyone can hear audio in every scenario, and users may be missing out on content. You might be viewing a YouTube video on a bus without earphones, or a non-native to the language of the media, or neurodivergent, or even hearing impaired. Either way, anyone can benefit from descriptive captions.
In general, automated captions are not reliable. Automated captions from YouTube are choppy and unreliable. These horrible captions are sometimes referred to as “craptions”. Try to add your own captions by following caption standards or use another service, like Rev.
See success criterion: 1.2 — Time-based Media (Level A)
Other useful resources
A must see video, narrated by AODA Alliance chair David Lepofsky (@DavidLepofsky) auditing Ryseron’s Student Learning Centre for accessibility barriers. He mentions the issue of leaning structural pillars that protrude the path of travel, that could easily cause injury to an individual walking by. This could have been easily addressed in the architectural design phase, but sadly overlooked, and now impossible to resolve as the building may rely on the structural integrity of the pillars.
 For further reference, links to the relevant WCAG 2.0 success criterions are noted when applicable. These items are relatively low effort and when considered consistently throughout the site, it can really improve any website’s usability. Ultimately delivering content to the widest range of users, which is the primary goal of your site.