Presented here is an action-based guide to create accessible websites. The focus is on accessibility rather than compliance. The goal is to help teams create sites that are perceivable, operable, understandable & robust. The POUR principles of the Web Content Accessibility Guidelines (WCAG 2.0) are what all the other layers of guidance in the WCAG aim to achieve. The simplified techniques presented here focus on decisions about content & design that typically occur throughout the development process. Presented as decisions rather than success criteria, the layers of WCAG become more understandable and thus easier to integrate into the design & development process. It's a team effort to build in the virtual ramp & as we progress up the staircase, it takes more awareness, skills & perhaps even a few resources to ensure content is accessible.
A long term study by Hanson & Richards found low compliance rates with the Web Content Accessibility Guidelines (WCAG), but at the same time, uncovered a growing adherence to some criteria. A follow-up study found that at least part of the improved accessibility was a side effect of changes in coding practices, new browser capabilities & concerns over page rankings. In another study, lack of awareness & knowledge of the WCAG was identified by the participants to be a significant barrier to web accessibility. These studies show that web teams continue to struggle with correct implementation of the WCAG & suggest that aids that make the guidelines easier to understand could improve implementation. This action-base guide intends to do just that, present the guidelines in a way that keeps team members focused on accessibility & building in the virtual ramp.
1. Text & Solid Structure
Electronic text-based content is accessible by nature. It can be rendered visually, auditorily & tactilely:
- Use HTML's built-in semantic structure[1,4,8] to code meaning directly into your content:
- headings, lists, quotes, etc.
- Keep the reading level as simple as possible.
- Define the natural language & mark language changes.
- Ensure templates have a doctype, charset & page title (all needed for a valid code base).
- Make page titles unique so users know they are in the right place.
2. Navigation, Links & Landmarks
Navigation, links & landmarks, like stepping stones, help you find your way.
- Use unique self-describing meaningful words for linked text.
- Leave context changes - pop-ups, new tabs - in the control of the user (i.e. give them user focus)
- Use WAI-ARIA landmark roles, HTML5 landmark tags or skip-navigation links to provide direct access to page content.
- Design well-planned, consistent navigation to make sites accessible & usable.
3. Images & Charts
Images are not text and need a text-based description or alternative to make them accessible. The goal of text descriptions and alternatives is to maintain the meaning of the document whether you can see the image or not. The alt attribute is required, but can be left empty in circumstances where the image provides no meaning or is described elsewhere in the content.
- Provide meaningful text alternatives for all content images.
- Use the
altattribute is required, but:
- Keep it succinct as it is read inline. One-hundred characters is a good rule of thumb.
- Leave the it blank (
alt="") when the image is purely decorative.
- Leave the it blank when the image's meaning is fully described in the text near by.
- Do not repeat
altattribute content in the title attribute - may cause unnecessary verbosity for screen reader users.
- Describe the function of the link in the alt, if the image is a hyperlink.
- For charts or complex images you may need to link to supplementary content or use the
4. Tables, Forms & Interactives
For complex HTML structures, consider simplification whenever possible. For successful interaction the keyboard must be your guide.
Table structure conveys meaning
- Use the rich semantic mark-up available for tables to make data relationships clear.
- Appropriately distinguish table header cells from data cells on rows & columns.
- Do not use tables for layout. They are for tabular data only!
Forms & Interactives are complex by nature
- Keep user control & keyboard access top of mind.
- Use & associate labels for every form control.
- Use the button element when you need a button.
- Exploit group form controls to create meaningful organization - legend, fieldset, optgroup. Organizational meaning is good for usability.
- Design clear error identification & intuitive error handling by clearly telling the user where they have gone wrong, how to fix the problem & when they have succeeded. Provide reasonable time-outs (think user control).
- Employ WAI-ARIA to define roles & behaviours that HTML cannot describe. This is particularly important for forms & interactive structures that use forms.
Note: most legal cases have happened around inaccessible tables & forms.
5. Colour & Layout
CSS is the standard to use for presentation. Use it correctly to maintain global control of your layout & design. Using CSS & HTML together properly is best method in making your content accessible & easier to maintain.
- Choose colours wisely & test for sufficient contrast ratios.
- Avoid confusing colours.
- Don't rely on colour alone for meaning.
6. Audio, Video & Other formats
Like images, multimedia need text alternatives to be made accessible.
- Provide captions for video & transcripts for audio.
- For ultimate accessibility describe video when the meaning cannot be understood by the soundtrack alone.
- Controls for media must be operable by the keyboard.
- Do not auto-play anything (think user control).
For other formats, such as PDF or Word documents, first ask is there a reason not to use HTML? When HTML is not an option, follow the same principles (WCAG) discussed here to make content in documents accessible.
Creating websites that meet the needs of people with disabilities overlaps with people with situational limitations such as being in a loud environment, having limited use of hands, using a mobile device, using old hardware or having limited access to bandwidth. Just as access ramps & curb cuts benefit more than just people in wheelchairs, the virtual ramp or electronic curb cut benefits more than just people using assistive technology. Making accessibility a priority in the design process helps us build better websites & brings us closer to a universal web.
Special thanks to:
- The Accessible Icon Project for a beautiful icon.
- DELTS @ Memorial University for support and encouragement in pursuing this work.
- (2013). Semantic Structure. WebAIM.org.
- Don't repeat yourself. Wikipedia.
- Brewer, C., Harrower, M. & Pennsylvania State University. Color Brewer 2.0.
- Clark, J. (2003). Building accessible websites. Indianapolis: New Riders.
- Clark, J. (2005). Facts and opinions about PDF accessibility. A List Apart.
- Hanson, V. & Richards, J. (2013). Progress on website accessibility? ACM Transactions on the Web, 7(1). DOI:10.1145/2435215.2435217
- Henry, S., Abou-Zahra, S., & Brewer, J. (2014). The role of accessibility in a universal web. Paper presented at the W4A - 11th Web for All 2014 Conference. DOI:10.1145/2596695.2596719
- Horton, S. & Quesenbery, W. (2014). A Web for everyone: Designing accessible user experiences. Brooklyn: Rosenfeld Media.
- Jacobs, S. (1999). Section 255 of the Telecommunications Act of 1996: Fueling the Creation of New Electronic Curbcuts.
- Lazar, J., Dudley-Sponaugle, A. & Greenidge, K. (2004). Improving web accessibility: as study of web master perceptions. Computers in Human Behavior, 20(2). pp 269-288. DOI: 10.1016/j.chb.2003.10.018
- Monsebraaten, L. (2012). Toronto woman wins second victory ordering government websites accessible to the blind. Toronto Star.
- Richards, J., Montague, K. & Hanson, V. (2012). Web Accessibility as a Side Effect, ASSETS '12 Proceedings of the 14th International ACM SIGACCESS Conference on Computers & Accessibility. pp 79-86.
- CSS. http://www.w3.org/TR/CSS
- WAI-ARI. http://www.w3.org/TR/wai-aria
- WCAG 2.0. http://www.w3.org/TR/WCAG20
- WCAG Samurai: http://www.wcagsamurai.org
- WCAG 1.0: http://www.w3.org/TR/WAI-WEBCONTENT
- Watson, L. (2013) Rock 'n roll guide to HTML5 and ARIA https://www.youtube.com/watch?v=GgserrcH6nQ #ID24 2014.
- Watson, L. (2014). Design like you give a damn: Practical accessibility for web proshttps://www.youtube.com/watch?v=vK1tlLOavvM W3Conf 2013.
- Smith, T. (2014) Making Web Content Accessible in 10 Steps or Less http://www.delts.mun.ca/oew.php OEW 2014.
Ramp it up! Action-based guide for creating accessible websites by Taliesin L. Smith is licensed under a Creative Commons Attribution-NonCommercial-ShareAlike 4.0 International License.