WHAT?
“Web accessibility refers to the inclusive practice of making websites usable by people of all abilities and disabilities. When sites are correctly designed, developed and edited, all users can have equal access to information and functionality. ”
[http://en.wikipedia.org/wiki/Web_accessibility, 10/2012]
Web accessibility is barrier-free design for the internet. Just like the concept of buildings and products being easily accessible by anyone (e.g. curb cuts, or pedestrian lights equipped with sound devices) there are measures that can be taken to avoid the impairment of usability on websites as much as possible. However, these measures are not limited to coding, but include (and actually start at) the conceptual design.
WHO?
“The power of the Web is in its universality. Access by everyone regardless of disability is an essential aspect.”
[Tim Berners-Lee, Director of the W3C and inventor of the World Wide Web]
As there are various handicaps that can affect people there is also a great diversity of supportive technology helping to browse websites. A few examples will illustrate the spectrum of this issue:
- Often blind people will use screenreaders that will read the content of the website to them.
- Someone with defective vision will use a magnifier or increase the size of the text displayed in their browser.
- People with impaired motor skills, for example, paralyzed people, or people with missing extremities, would most probably use different input devices instead of mouse and keyboard.
- For the non-hearing, putting captions and/ or sign language into videos can help a lot.
- Technical impairments: no sound device, no mouse, mobile internet (probably slow network speed), touchscreen, …
- Other impairments: age-related problems, epilepsy, lacking fluency in language (e.g. not being a native speaker), cognitive defects, etc.
Obviously, it’s not only about being physically or mentally challenged when speaking about web accessibility. If you have ever tried using a slide out navigation bar (which only pops out when hovering the mouse over it) with a touch device, then you probably know how it is to feel cut out. Web accessibility definitely concerns all of us.
HOW?
“Although conformance can only be achieved at the stated levels, authors are encouraged to report (in their claim) any progress toward meeting success criteria from all levels beyond the achieved level of conformance.”
[Conformance Requirements, W3C Recommendation, http://www.w3.org/TR/WCAG20/#conformance-reqs, 10/2012]
If you decide to make your website as barrier-free as possible, you should start at the beginning – the design and planning phase. Accessibility heavily depends on the following factors:
- Technical and content concept: how to present which content; which technology to use, and how to use it (Adobe flash, HTML, CSS, JavaScript, PDF, Excel, etc.).
- Usability (quality of interaction): operability (size of buttons, positioning of elements, etc.)
- Graphic design: colors, contrast, typography and font sizes, etc.
As obvious as this might sound, implementing web accessible technology is directly dependent on the planning phase – it is not something you easily just pull over your application when everything is finished. Click here for guidelines from the W3C.
A few examples of DOs & DON’Ts:
- Semantically correct HTML: Elements should represent their meaning and not their visual design.
Example: For creating a sub headline use H1-H6 depending on the document type and structure. Do not use <b> or <strong> for formatting headlines. - An aspect of the graphic design: Use a tool to analyze color contrast on your design, e.g. http://juicystudio.com/services/luminositycontrastratio.php
Example: According to WCAG 2.0 the contrast ratio between foreground and background color should be at least 4.5:1 (with exceptions) to reach a conformance level of AA. More information about contrast can be found in the WCAG 2.0 Guidelines. - Implementation: Do not use inaccessible technology.
Example: If you use cufón (a JavaScript plugin) to render non-web safe font-families, you will not have an accessible website. Cufón converts text into vector data to show it in, let’s say, your CI’s (Corporate Identity) font-family. Every single word is being wrapped in a <span> element to be displayed properly. With screenreaders this leads to the result that. Every. Word. Will. Be. Read. As. If. It. Were. A. Sentence. On. Its. Own. - Multimedia: Multimedia content is problematic, especially when it is not suited for text-based output.
Examples: flash movies, flash animations, graphics or images as Information carrier (e.g. pie charts of financial data), PDF (is not an open format, dependent on the company Adobe), etc. Putting up an informative video (e.g. a chairman’s statement) on your homepage without captions is not accessible.
Clearly, making your website accessible is not a question of tweaking here and there a little bit right before the publishing date, or taking measures isolated from the rest of the application. In order to internalize web accessibility it is recommended to integrate the topic into corporate culture on all levels. As mentioned earlier, accessibility depends a lot on the conceptual design of a website – thus it would be a good thing that not only graphic designers and web developers know about barrier-free web technology, but also management, business partners, media designers, and all those involved in the production process are aware of the implications of web accessibility.
For financial and conceptual reasons, as well as the notorious lack of time in web development, it is unlikely that all sorts of impediments can be supported to the same extent. It should be mentioned here that WCAG 2.0 does not recommend “[…] that Level AAA conformance be required as a general policy for entire sites because it is not possible to satisfy all Level AAA Success Criteria for some content.” (http://www.w3.org/TR/WCAG20/#conformance-reqs, 10/2012) Still it makes perfect sense to make only parts of a website barrier-free. Web accessibility can also be a mindset to enable as many people as possible to use the internet. Every action taken to improve the freedom of web access is worth it, especially from the viewpoint of persons affected by inaccessible technology.
WHY?
Apart from the question of moral commitment and the concepts pointed out above, investing into a barrier-free website pays on multiple levels.
The primary motive is probably exercising corporate social responsibility (CSR) which goes hand in hand with positive PR. Eventually, web accessibility is compulsory in order to adhere to anti-discrimination laws in your country (especially when running governmental or government-related websites). Another advantage is the extension of your target audience by technologically enabling them to view your content.
Furthermore, your company will also gain from the implementation of web accessibility on the development side as there are many side effects resulting from optimizing code and assets. Just to mention a few:
- Reduction of maintenance and future development
- Reduction of bandwidth usage of your server
- SEO – a lot of measures taken for web accessibility are equivalent to search engine optimization. SEO is in many aspects a question of valid HTML and accessible content.
For facts and figures about the positive effects of making your website accessible we recommend you to read “Case Study of Accessibility Benefits: Legal & General Group (L&G)” of the W3C.
Finally, I want to emphasize once more that any step towards the Accessible Web adds to the improvement of equal access to the internet for everybody, and the quality and standards compliance of websites.
Mark Mlinaric works as a Frontend Web Developer and is the person responsible for web accessibility at nexxar. He owns a smartphone with touchscreen, uses keyboard navigation, and is near-sighted (using corrective lenses).