Web Accessibility Initiative or WAI
Can you imagine our life without the internet?
Nowadays, by the click of the mouse, you can get any information in a second. It's true, but mostly for the people who can use a mouse, see the screen, listen to an audio file...
In this article, I want to share the importance of Web Accessibility for the people with disabilities (WAI). First time I touched this question by the request of our client - American Heart Association and our cooperation gave me deep understanding how people with disabilities use the web, their feelings when they cannot access the web, and what we can do to make sites more accessible.
The internet is one of the greatest things that has ever happened to people with disabilities. Before the internet, how did blind people read newspapers? Clearly, they didn't. Audiotapes of newspapers were expensive and too bulky to be used. Of course, you can say, they could ask a friend to read to them, but it makes them dependent upon others.
Most newspapers now publish their content online, so people who are deaf may be able to read, who are blind - listen by screen application readers. Many people with cognitive disabilities can also benefit greatly not only from online newspapers but from the structure and flexibility of different websites.
The Web Content Accessibility Guidelines (WCAG) provide an international set of rules. They are developed by the Worldwide Web Consortium (W3C). These guidelines are the foundation of most web accessibility rules in the world and based on four principles:
Perceivable: accessible to the senses (vision and hearing) through the browser or applications like screen readers, screen enlargers, etc.
Operable: users can communicate with all controls and interactive elements using the mouse, keyboard etc.
Understandable: content is clear and limits confusion and ambiguity.
Robust: accessibility for a wide range user agents and assistive applications to the content.
Below, the list of key principles of accessible design. The implementation usually is not hard and doesn't change look and feel of your website
For all non-text elements, you should use alternative text. I used "alt" and "long descr" attributes for this.
<img src="images/promo-img01.jpg" width="1200" height="460" alt="the doctor talks to the patient">
The list of elements where it's necessary to provide an alternative text:
- buttons that are implemented as images
- schemes, graphics, diagrams and illustrations
- any text that is implemented as an image
- images used as list bullets
- videos and sounds (played with or without user interaction)
- applets and programmatic objects
* For functional elements in the "alt" attribute we briefly describe their behavior.
* Alt text with acronyms should be written with spaces in between letters.
<alt="A S A P" > (read by a screen reader as "ASAP").
* Screen readers will skip over images with empty "alt" attribute.
* Don't use "alt" attribute for decor elements.
* "alt" attribute must be filled with meaning.
* The best practice is to use 125 characters or fewer for "alt" text. Because of restrictions within the screen reader.
For the detailed description, we can use "longdescr" attribute.
All structural elements like headings, lists and etc. provide meaning and structure to web pages and can also help keyboard navigation within the page.
So make an understandable and logical document structure.
Ensure that text field, check box, a drop-down list has a label and associated with the correct form element <label>. Also, make sure the user can submit a form and recover to fill in all required fields.
The links make sense out of context
Screen reader apps have an option to read only the links on a web page, so don't use phrases like "click here" and "more".
Provide captions and transcripts for media
Audio and videos must have captions and a transcript.
Work over non-HTML content, including PDF files, Word documents, presentations and flash content. The PDF documents and other non-HTML content must be as accessible as possible. If you can not make it accessible - use HTML instead.
Allow users to skip repetitive elements on the page like navigation or other elements that repeat on every page.
Don't try to convey meaning just by color, that information may not be available to a person who is colorblind and will be unavailable to screen reader apps
Design to standards
HTML compliant and accessible pages provide excellent search engine optimization and Cascading Style Sheets (CSS) allow you to separate content from presentation. This provides more adaptability and accessibility of web page content.
I believe, that this list will help you to make greater accessibility of your web content to everyone.
For more information about Web Accessibility and useful tools you can find by the links:
- WAI principles and recommendations
- Total Validator App
- W3 HTML validator
- Web Developer extension for checking structure of the document
- Apple project for blind and low-vision users
And links for screen reader applications: