The Basics of Accessible Web Design

Approximately 21.7 million adults have a vision limitation of some type. Add to this number those with mobility or other accessibility issues and you can see why designing a website so it is easy for everyone to navigate is of vital importance.

A designer's goal should be to eliminate obstacles that keep people with disabilities from fully utilizing all the features of a website. This creates an even playing field for everyone.

Reasons to Make Your Web Design Accessible

Creating a design that is accessible to everyone is essential for many reasons. In some cases, you may be legally required to provide accessibility to anyone with a handicap. For example, this is required of government websites, but may apply to other types as well. Even if you are not legally required to make your site accessible, it is both ethical and smart for business.

Disabled users account for 10 to 20 percent of web users. However, that number may be higher when you include people with minor impairments such as color blindness. Those with visual impairments in particular face a real challenge when your design doesn't provide alt tags or use a size and colors that are easier to focus on.

Standards of Accessibility

The World Wide Web Consortium (W3C) has created a set of standards for usability for people with disabilities, called the Web Accessibility Initiative (WAI). Some of the ideals behind designing for inclusion include help with techniques for server-side scripting, plaint text and flash technologies.

Limitations

When designing a website, keep in mind that even small things can make a big different. For example, if the website can only be navigated by moving a mouse and clicking on a link, this can present challenges both for visually impaired users and those with mobility issues.

Color Blindness

Even the color contrast between background and text can come into play when dealing with visual impairments. Color blindness is one example. If the person has trouble with shades of blue, then a typical blue hyperlink structure may present issues. Fortunately, many tools will allow you to determine how the internal and external CSS of a web page looks, check for different types of color blindness (such as red/green deficiency) and view the website through a color blindness simulator.

Multimedia Content

Have you considered how the multimedia content on your website plays for those who are hearing and vision impaired? For most websites, captioning the video for hearing impaired users never even occurs to them. However, doing so can make the video much more usable for these site visitors.

Mobile Responsiveness

In some industries, especially institutions that cater to those with accessibility challenges such as hospitals, you must ensure that mobile users can easily access a site for information. For example, in an emergency situation, one person in a group may want to pull up the nearest hospital and access your directions without having to figure out his way around any accessibility issues.

One way to make sure your site is as mobile responsive as possible is to keep the design simple, add text elements to any multimedia and keep navigation to the basics.

Other Problems Users Encounter

There is a long list of issues that those with impairments encounter when accessing websites. A few of those include:

• Low Contrast As mentioned before, this creates issues for those with visual impairments. However, even users who do not have visual impairments may find low contrast designs hard to deal with. The strain on the eyes is cumbersome. Even worse, some people with visual challenges won't be able to read your site at all.



• CAPTCHA Codes Even someone with 20/20 vision may have trouble deciphering these small, wavy, weird-looking codes and typing them in. However, those with visual impairments may find it all but impossible. This can limit the ways that those with visual challenges can interact and participate on your website.
• Graphic Text Sure, those infographics are great, but if you only throw up an infographic and don't repeat the information as text, it is all but impossible for someone with vision limitations to know what information you'd like to get across. PDF files are better than text saved as a JPG, because at least those can be read with the appropriate software.
• HTML Structure You should use the appropriate tags for headers (H1, H2), block quotes and paragraph breaks. These are a standard language and screen readers are able to translate these and make the page's content more accessible.

Principles of Accessible Web Design

Simply implementing a few basic principles of accessible design practices makes a big difference in how well people can navigate your content. Make sure you are providing appropriate alternative text for images and multimedia content and use document formats that can be translated by screen readers (like PDF, MS Word and PowerPoint).

Finally, make sure your content is easy to read and written in a clear and concise manner, which is good advice that will translate well both to those readers with disabilities and those without.