In our last post, we covered the basic language and terms of accessible web design and the AODA (Accessibility for Ontarians with Disabilities Act). In this post, we will take a closer look at the four design principles of web accessibility.
To serve as a reminder, the four principles were developed as part of WCAG (Web Content Accessibility Guidelines) to provide the foundation for web and digital accessibility. Each principle addresses universal design considerations in the form of guidelines and success criteria. The principles are meant to guide design, development, and content outputs.
Content and interactive elements on the web must be presented in ways that all users can perceive, regardless of individual impairment or human variation.
1. Alternative text
Brief text (125 characters or less) used to describe images. Text alternatives for images and non-text content should accurately reflect the purpose and intent of the non-text content.
2. Long descriptions
Descriptions that are written for complex figures and tagged via the “long desc” HTML attribute.
4. Audio browsers
Web browsers that provide a text-to-speech capability for blind or visually impaired people.
5. Braille display
Devices that convert screen content to braille by raising bumps through a dot matrix on a flat surface.
6. Luminance Contrast Ratio
A measure of the contrast difference between foreground (e.g. text) and background colours; WCAG 2.0 recommends specific minimum ratios.
Synchronized visual and/or text alternatives for speech and non-speech audio information needed to understand media content such as television programming, web video, or movies.
A text version of the speech in a movie, web video, or television program. They are not provided in real time and are not a recommended substitute for captions.
The website or application must be accessible using any preferred method, including mouse, keyboard, voice recognition, or other peripheral devices. A user should be able to simply, accurately, and quickly manipulate the interface, navigate, or skip components of the page.
9. Accelerator keys
Combinations of keyboard keys (shortcuts) that allow a user to make software commands instead of interacting with menu options or different parts of a user interface.
10. Clickability cue
“A visual indication that a given word or item on a Web page is clickable. Cues that can be used to indicate the clickability of an item include colour, underlining, bullets, and arrows” (usability.gov, accessibility glossary terms).
11. Programmatic focus
Where the computer’s focus is on a Web page. It should be congruent with visual focus (see below) and should provide appropriate cues to the user through any assistive technology being used.
12. Visual focus
Where the user’s focus is on a Web page; generally represented by a dashed box that appears around items on the page and associated with keyboard tabbing. This focus could be customized during the design of the site and override the default browser focus appearance – all it takes is applying the hover style in the CSS to the focus pseudoclass and applying the focus pseudoclass to elements on the page that receive visual focus.
Content, labels, and interactive elements, are as clear as possible so that all people understand the website.
13. Type legibility
The specific traits of a font (shape, scale, style) affecting recognition of letters and words.
14. Type readability
The clarity and speed with which content can be digested over an expanse of text. It can be affected by length of a line of text, text spacing, and alignment on the page.
Designing a system to work in multiple languages and in the cultural contexts of different locales.
Ensure web content can be interpreted reliably by the widest variety of browsers, devices, and assistive technologies.
16. Graceful Degradation
The essential content on a website is not affected by non-enabled browser features or new technology.
17. Semantic HTML
Using HyperText Markup Language to reinforce the meaning of the information within the webpage rather than merely defining the presentation or look of it. Example: using a numbered list tag to enclose a set of items that differ in importance.
Stay tuned for our next post where we will take a look at how to use different tools to help you design accessibly and to validate that your finished designs and pages are accessible.
In the meantime, take a look at this very helpful post that can help make your website more accessible today!
RGD Access Ability – A practical handbook on accessible graphic design
Story, M.F. (1998). Maximizing Usability: The Principles of Universal Design. Assistive Technology, 10:1, 4-12.