Are you developing/designing websites? Or creating and publishing content on Drupal or WordPress without making it accessible for everyone who uses the internet?
I'm talking about people with impaired hearing, loss of vision and other disabilities that can make using the internet a nightmare if it's not designed with Web Content Accessibility Guidelines (WCAG) in mind.
This post will walk through what exactly WCAG is and what it takes to be compliant at a basic level with an easy checklist to go through.
What is WCAG?
Created through the World Wide Web Consortium (W3C) that sets web standards WCAG stands for Web Content Accessibility Guidelines. It exists to provide uniform web content accessibility technical standards for people with disabilities, and it should also meet the requirements of governments internationally and businesses.
Currently, 2.1 is the most recent guideline as of June 2018 followed by 2.0 (Dec 2008). However, it doesn't render 2.0 out of date, but it is logical to follow 2.1.
Conformance and Principles
There are 3 different levels of success criteria of WCAG conformance A, AA & AAA. Level A is the bare minimum you need to be compliant, which is the checklist we'll be covering shortly! Also, the guidelines of web content accessibility are arranged under the following 4 principles:
-
Perceivable - Recognisable UI elements that users can make sense of.
-
Operable - UI components and navigation must function. correctly
-
Understandable - content and function of the UI must be logical for the user.
-
Robust - As technology evolves content must remain accessible and interpreted reliably.
Level A success criteria conformance
It's time to see exactly what type of criteria must satisfy level A conformance following on from the 4 principles above.
Perceivable
Text alternatives - non-text elements such as images, should include alt text describing what the image is to help visually impaired users. This also extends to other items such as captchas on a web page.
Time-based media - For time-based media in a prerecorded or audio format, provide a text alternative. If a user is unable to see a prerecorded video due to visual impairment, then an audio-only option must be provided. Make transcriptions notes of live audio available as a future link - this is an advisory measure.
Adaptable- produce and structure content correctly so screen readers can quickly identify web page elements. If there is a table element or list, then appropriate markup should be available to reflect this. Which means there is not a reliance on only sensory characteristics such as sound or visual to explore a website.
Distinguishable- using colour cannot be the only method used to incite action, convey information or determine a visual component; it should be available in the text too.
Audio content that starts playing automatically should have a means of turning off sounds for assistive technologies. Also, volume controls should be visible on the web page to stop audio.
Operable
Keyword accessible - All content functionality on a web page is operable from a keyboard interface, without needing set times for individual keystrokes. In addition, the user shouldn't be able to get stuck in content known as a no keyboard trap. Which means content can only be exited by a mouse and not a keyboard.
The creation of character key shortcuts such as content that uses single letters or punctuation should include functionality to remove the shortcut as well.
Enough time - users need to be given adequate time to consume content. If content happens to be expiring, then the option to extend the time limit is available. For example, clicking on the space bar will increase the time limit of the content.
Controlling content - scrolling, blinking or moving of information after 5 seconds and presented with other content must have a stop function implemented. For auto-updating information that is parallel with additional content and starts automatically, the user can pause, stop, hide or control the rate at which the auto-update occurs.
Seizures and physical reactions - content on web pages cannot show anything that flashes 3 times or more in a 1-second time frame.
Navigable - content that is often repeated on many web pages can be bypassed by adding a link at the top of each page that goes to the main content.
All web pages must include a descriptive title using the title element. The focus order in which a web page is structured must be logical, make the DOM match the visual sequence. Also, links in content must have descriptive link text for components on a webpage.
Input Modalities make it simple for users to operate functionality through different inputs beyond the keyboard. Functionality that utilizes multipoint or path-based pointer gestures for operation can be used with a single pointer with no path-based gesture.
Out of the four-pointer cancellations namely: No down-event, Abort or Undo, Essential and Up Reversal, one must be true for a single pointer.
Label in the name- UI components with labels that contain images of text or include text, the name includes the next which is displayed visually.
Mobile actuation - operations that can be used by device motion or user motion can be operated by UI elements in response to the motion can be stopped to prevent actuation by mistake.
Understandable
Readable - the language of a page can be determined programmatically of each web page, including assistive technologies. This is achieved using the lang attribute on HTML elements.
Robust - ensure all HTML tags have start and end tags, elements are nested correctly, and IDs are unique.