Increase Web Accessibility in 6 Steps

Why Web Requires Accessibility?

Can you imagine our life without the internet?

Nowadays, by the click of a mouse, you can get any information in a second. It's true, but it is only available for the people who can use a mouse, see the screen, listen to an audio file…

What happens if you can’t use it? This is the problem facing millions of people with disabilities – inaccessible websites are preventing people from participating in normal social life. But proper website design and development could make the Internet accessible for them, and it's one of the best web development practices discovered today.

Braille magazine

What is WAI?

Web Accessibility Initiative (WAI) mission is to improve Internet accessibility for people with disabilities. Since people with disabilities often require non-standard devices and browsers, making websites more accessible also benefits a wide range of user agents and devices, including mobile devices, which have limited resources.

The Web Accessibility Initiative was launched in 1997. It has several working groups and interest groups that work on guidelines, technical reports, educational materials and other documents that relate to the several different components of web accessibility. These components include web content, web browsers and media players, authoring tools, and evaluation tools.

Web Accessibility Principles

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 of 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 the general look and feel of your website.

1. Alternative Text for WAI

For all non-text elements, you should use alternative text. I used "alt" and "long descr" attributes for this.

For instance:

<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 to make them disabled-friendly:

• images
• buttons that are implemented as images
• schemes, graphics, diagrams, and illustrations
• icons
• any text that is implemented as an image
• images used as list bullets
• animations
• frames
• scripts
• videos and sounds (played with or without user interaction)
• applets and programmatic objects

Notes:

• * For functional elements in the "alt" attribute we briefly describe their behaviour.
• * Alt text with acronyms should be written with spaces in between letters.

For example:

<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 on the screen reader.

For the detailed description, we can use "longdescr" attribute.

BrailleSense Polaris

2. Web Accessible Document Structure

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.

3. Web Accessible Forms

Ensure that text field, checkbox, 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.

4. WAI for Non-HTML Content

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 colour, that information may not be available to a person who is colourblind and will be unavailable to screen reader apps

5. Accessible JavaScript

Ensure that JavaScript event handlers do not require the use of a mouse that the pages don't rely on JavaScript to function.

6. Design to WAI 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.

Braille Cube

Summary

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 the structure of the document
• Apple project for blind and low-vision users

And links for screen reader applications:

• JAWS
• Non-Visual Desktop Access (NVDA)

Author: Andrii Datsenko

Front-end developer