In Part 1 of our Introduction to Web Accessibility we looked at the different kinds of limitations on some web users due to disability, and why accessibility on the web is so important. We also looked at the different guidelines and principles outlined by the W3C in their Web Content Accessibility Guidelines.
In this second installment, we are delving into the nitty-gritty. How to actually implement these accessibility guidelines by what’s called their success criteria. It does get technical from here with some HTML/CSS examples for clarity. If you don’t have a working knowledge of HTML, this guide will still be useful for you in producing content for content management systems such as wordpress.
Guideline 1.1: Text Alternatives – All images, image buttons and image map hotspots should have appropriate alternative text.
In coding HTML directly or using a content management system like WordPress, there exists the alternative text attribute, or the alt tag that screen readers read aloud in lieu of the image. There should be text within that tag to express what the image represents.
Example: <img title="What will popup when you rest your cursor on the image />
There is an exception to the rule however. Images that express what that is already conveyed in text don’t need explanation. They risk being redundant, as they are not crucial to understanding the content of the page. Other images that do not convey content and are purely decorative should have no alt tag at all, otherwise the screen reader will read aloud information such as ‘orange-icon’ or ‘spacer image’. In this case, leaving these blank so the reader skips them altogether would improve the experience of the site. A null alt text (alt=””) is preferred.
Example: <img title="Pretty Picture that is unessential to the content" src="decorativeimage.jpg alt=" />
If complex images are communicating important information in pixel form, recreate that information in text form so screen readers can read it aloud, and remove the alt tag to your image. If its too long, link to a long form description elsewhere.
In the same vein, when creating fillable forms and buttons there is an attribute called value. This attribute is what is read by screen readers and therefore must never be left empty.
Example:<input name="submit" type="submit" value="Submit" />
These form inputs also have associated text labels. When these labels are given to input types, the option they represent can be toggled on and off by clicking the label itself, creating a much larger click target for those with fine motor skill limitations.
Example: <label for="name">Name:</label> <input id="name" name="textfield" type="text" />
Guideline 1.2: Time-based media: Provide alternatives for time-based media.
Embedded multimedia should be identified via accessible text, be keyboard navigable, have captions and descriptive text transcripts. For a more in depth look, see this guide on making embedded youtube videos accessible.
Guideline 1.3: Create content that can be presented in different ways
What this means is to use semantic markup appropriately, so information can be represented in different formats by assistive technologies depending on someones needs.
Example:<h1> <ul> <ol> <strong> <em> <blockquote> <th> for table headers, etc.
This has the benefit of creating a logical and intuitive site structure for reading and navigation.
Also, instructions should not rely on shape, size, visual location or audio cues to be understood (ie. click the square icon to continue, instructions are in the right-hand column, or a beeping sound indicates you may continue)
Guideline 1.4: Make it easier for users to see and hear content
Elements should be distinguishable and easy for users to see and hear content including separating foreground from background, with color not being the sole method of conveying meaning or distinguishing elements such as links from surrounding text.
Text and images of text must have a contrast ratio of at least 4.5:1. In case you were wondering how to check that, here is a handy contrast ratio checker
Text should be resizable, readable and functional when the text size is doubled.
Guideline 2.1: Make all functionality available from a keyboard
This one is pretty self explanatory. All functionality should be available using only the keyboard and a user should be able to navigate easily to and from all page elements without becoming trapped or locked at one particular element of the page.
Guideline 2.2: Provide users enough time to read and use content.
Users should be able to adjust any time limits imposed on a website, to turn off, adjust or extend that time limit. Automatically moving, blinking or scrolling content that lasts longer than 5 seconds should be able to be paused, stopped or hidden. As well as automatically updating content. Audio controls must be available to stop, pause, mute or adjust volume for audio that automatically plays on a page for more than 3 seconds.
Guideline 2.3: Don’t design content in a way that is known to cause seizures.
No page should flash more than 3 times per second unless that flashing is sufficiently small, low contrast and does not contain very much red. To learn more on what counts as sufficient you can read up on the flash thresholds.
Guideline 2.4: Provide ways to help users navigate, find content, and determine where they are.
Navigating with a keyboard should offer ways to bypass blocks of information that are repeated on every page, such as headers and navigation. That way, impaired users don’t have to listen to the same menu options again, and again, they can skip to the main content in the middle of the page. It can mean the difference between a page that is usable and one that is too frustrating or time consuming to use.
Other examples to ensure navigable sites:
- Use descriptive and informative page titles
- Ensure the order of navigation links and form elements is logical and intuitive
- Navigation links are repeated consistently and do not change order when navigating through the site
- Repeating elements should be named consistently across different pages. (ie. a search box should be labeled the same across all pages)
- Be sure the purpose of each link can be determined from the link text alone, or from the link text and its immediate context
- Have multiple ways of reaching site content, such as a sitemap, site search, or related pages.
- Avoid duplicating headings/labels or creating redundant headings.
Guideline 3.1: Make text content readable and understandable
Make text readable and understandable. Assistive technologies including screen readers might not be able to recognize text properly unless the language of the text has been specified.
In the case of english websites, the language should be identified using the html “lang” attribute
Example: <html lang="en">
When appropriate, other language sections within a page should be designated as such:
Guideline 3.2: Make web pages appear and operate in predictable ways.
When a page element receives focus, it should not result in substantial changes to the page (ie. a popup, change of keyboard focus, or any other change that could confuse or disorient a user). Or, when a user inputs information or interacts with a control, it should not result in a substantial change without informing the user ahead of time.
Guideline 3.3: Help users avoid and correct mistakes.
When filling out forms or other inputs, labels and cues need to be provided, as well as required fields be clearly marked as mandatory. If an error does occur, users should be alerted in an intuitive and accessible manner and be understandable in order to fix and resubmit the form. Also bear in mind error prevention. If the user can change or delete important data, the changes/deletions should be verified or confirmed before hand, or in some cases, reversible.
Guideline 4.1: Maximize compatibility with current and future user agents, including assistive technologies.
Finally, sites should be written to maximize their compatibility with current and future assistive technologies. Taking care to avoid significant HTML errors and using forms, labels and frames appropriately.
If you made it this far, you deserve a pat on the back.
Accessibility can be a complex topic at first, but knowing the basics and understanding some simple steps you can take will greatly improve the user experience for those with impairments and – perhaps unsurprisingly – for the rest of us too. This is not intended to be substitute for reading W3C 2.0 guidelines and guide to understanding, however, this article can serve as a good introductory primer on what to expect and steps you can take today to get on track toward that W3C WCAG Level AA rating.
For the official W3C guidelines & success criteria, see these links for further understanding the success criteria:
Latest posts by Lesley Anderson (see all)
- From Idea to Prototype in 6 Easy Steps - June 13, 2017
- The Future of UI - February 9, 2017