How to make websites accessible for all

A focus of web design is often responsiveness — how to make each device showcase the most beautiful story possible.

But designers sometimes overlook a key feature in spreading their content to the largest, most diverse audience possible: accessibility.

On Saturday afternoon at SNDSF, Mobiquity‘s Dave Stanton discussed the importance of designing websites to be accessible for people with impairments.

Stanton opened with the example of a can opener made for people with arthritis designed by kitchen gadget company Oxo. While Oxo developed a product to help people with an impairment, the can opener can be used by anybody.

“It’s the same size as a regular can opener. Why not make something that is accessible to everybody?” said Stanton, who owns the gadget.

How does this concept apply to web design? Stanton said when pages are designed without accessibility in mind, they leave out people with impairments that may hinder their ability to access our content — a big portion of the population.

Stanton said that of the four types of impairments — mobility, sight, hearing and speech — web designers are mostly concerned with visual impairments.

Eight percent of men and 1 percent of women have some form of color blindness, Stanton pointed out, and one-third of the population has an astigmatism, which distorts 3-D shapes. Keeping this is mind, he said, special attention should be paid when designing 3-D charts and and working with color. Ensuring enough contrast between colors enables access to those with color blindness. That’s where the Chrome plug-in WAVE can help.

WAVE is a web accessibility evaluation tool that allows users to test the accessibility of websites and find out if they are 508 compliant.

508 compliance, a standard created by the government, means the technology is accessible for all users, regardless of disability status. Checklists are available to help you make documents and web pages compliant.

Wave screenshot
The WAVE plug-in

NoCoffee — another useful Chrome plug-in — allows users to see how webpages look to people with different visual impairments.

In addition to paying close attention to contrast, designers and programmers can make their sites more compliant by using HTML tags to create hierarchy on the page for those who rely on voice assist, Stanton said. He encouraged designers to write alt text for each image to better serve those who have a visual impairment. Mac’s Voice Assist can test how webpages will read to a person relying on this service to access the content.

“The reason I pitched this presentation is not to promote ‘do this,’ but to promote ‘be aware of this,’ ” Stanton said.

You can download Stanton’s presentation here.