Introduction

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.

Each content type & design decision is a potential barrier (or stair). The numbers associate each stair with a list of techniques for building in the virtual ramp.

A long term study[6] 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[12] 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[10], 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:

2. Navigation, Links & Landmarks

Navigation, links & landmarks, like stepping stones, help you find your way[8].

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.

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

Forms & Interactives are complex by nature

Note: most legal cases have happened around inaccessible tables & forms[11].

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.

6. Audio, Video & Other formats

Like images, multimedia need text alternatives to be made accessible.

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.

Conclusions

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[7]. Just as access ramps & curb cuts benefit more than just people in wheelchairs, the virtual ramp or electronic curb cut[9] 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[7].

Acknowledgements

Special thanks to:

References

  1. (2013). Semantic Structure. WebAIM.org.
  2. Don't repeat yourself. Wikipedia.
  3. Brewer, C., Harrower, M. & Pennsylvania State University. Color Brewer 2.0.
  4. Clark, J. (2003). Building accessible websites. Indianapolis: New Riders.
  5. Clark, J. (2005). Facts and opinions about PDF accessibility. A List Apart.
  6. Hanson, V. & Richards, J. (2013). Progress on website accessibility? ACM Transactions on the Web, 7(1). DOI:10.1145/2435215.2435217
  7. 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
  8. Horton, S. & Quesenbery, W. (2014). A Web for everyone: Designing accessible user experiences. Brooklyn: Rosenfeld Media.
  9. Jacobs, S. (1999). Section 255 of the Telecommunications Act of 1996: Fueling the Creation of New Electronic Curbcuts.
  10. 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
  11. Monsebraaten, L. (2012). Toronto woman wins second victory ordering government websites accessible to the blind. Toronto Star.
  12. 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.
  13. CSS. http://www.w3.org/TR/CSS
  14. WAI-ARI. http://www.w3.org/TR/wai-aria
  15. WCAG 2.0. http://www.w3.org/TR/WCAG20
  16. WCAG Samurai: http://www.wcagsamurai.org
  17. WCAG 1.0: http://www.w3.org/TR/WAI-WEBCONTENT

Resources

  1. Watson, L. (2013) Rock 'n roll guide to HTML5 and ARIA https://www.youtube.com/watch?v=GgserrcH6nQ #ID24 2014.
  2. Watson, L. (2014). Design like you give a damn: Practical accessibility for web proshttps://www.youtube.com/watch?v=vK1tlLOavvM W3Conf 2013.
  3. Smith, T. (2014) Making Web Content Accessible in 10 Steps or Less http://www.delts.mun.ca/oew.php OEW 2014.

Attribution

Creative Commons License
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.