Post from October 7, 2008 (↻ November 6, 2016), filed under Web Development.
Just having updated my German article on accessibility heuristics it looked useful to share the guidelines over here as well, albeit in a short form. It’s a hat tip to respective documentation by the W3C and IBM. It comes without comments, however; W3C guidelines are sometimes not as precise as they should or could be.
WCAG 1.0 Quick Tips
- Images and animations: Use the
altattribute to describe the function of each visual.
- Image maps: Use the client-side
mapand text for hotspots.
- Multimedia: Provide captioning and transcripts of audio, and descriptions of video.
- Hypertext links: Use text that makes sense when read out of context. For example, avoid “click here.”
- Page organization: Use headings, lists, and consistent structure. Use CSS for layout and style where possible.
- Graphs and charts: Summarize or use the
- Scripts, applets, and plug-ins: Provide alternative content in case active features are inaccessible or unsupported.
- Frames: Use the
noframeselement and meaningful titles.
- Tables: Make line-by-line reading sensible. Summarize.
- Check your work: Validate. Use tools, checklist, and guidelines at www.w3.org/TR/WCAG.
(…we appreciate mentioning of QA.)
WCAG 2.0 Quick Tips
- Provide text alternatives for non-text content.
- Provide captions and alternatives for audio and video content.
- Make content adaptable, and make it available to assistive technologies.
- Use sufficient contrast to make things easy to see and hear.
- Make all functionality keyboard accessible.
- Give users enough time to read and use content.
- Do not use content that causes seizures.
- Help users navigate and find content.
- Make text readable and understandable.
- Make content appear and operate in predictable ways.
- Help users avoid and correct mistakes.
- Maximize compatibility with current and future technologies.
IBM once shared their own set of accessibility recommendations and heuristics that is now, along with more detailed information, offered by the ACM:
- Provide meaningful and relevant alternatives to non-text elements.
- Support consistent and correctly tagged navigation.
- Allow complete and efficient keyboard usage.
- Respect users’ browser settings.
- Ensure appropriate use of standard and proprietary controls.
- Do not rely on color alone to code and distinguish.
- Allow users control of potential distractions.
- Allow users to understand and control time restraints.
- Make certain the website is content compatible with assistive technologies.
About the Author
Jens Oliver Meiert is a technical lead and author (sum.cumo, W3C, O’Reilly). He loves trying things, including in the realms of philosophy, art, and adventure. Here on meiert.com he shares and generalizes and exaggerates some of his thoughts and experiences.
If you have any thoughts or questions (or recommendations) about what he writes, leave a comment or a message.
Use links that make sense in their context, not out of context.
As WCAG 2.0 is still at the candidate recommendation stage, I must admit that my knowledge of it is lacking so it is definitely useful to see it summarised here. One thing I have found useful to help me remember the overall concept is POUR (Perceivable, Operable, Understandable, Robust), which I think is a really good way of explaining accessibility in a non-technical way.
Have a look at the most popular posts, possibly including:
Perhaps my most relevant book: CSS Optimization Basics (2018). Writing CSS is a craft. As craftspeople we strive to write high quality CSS. In CSS Optimization Basics I lay out the, at least some of the most important aspects of such CSS.
Looking for a way to comment? Comments have been disabled, unfortunately.