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.
If you have a question or suggestion about what I write, please leave a comment or a message.
Use links that make sense in their context, not out of context.
On October 22, 2008, 11:24 CEST, Richard Morton said:
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 some of the most important aspects of such CSS. (Also available in a bundle with Upgrade Your HTML and The Web Development Glossary.)
Looking for a way to comment? Comments have been disabled, unfortunately.