Web Design with Accessibility in mind

March 11, 2014 1:20 pmComments OffViews: 250

Web Design with Accessibility in mind


I. Why Accessible Design Is Important

When web designers set out to create a website, they are likely to focus on ensuring that their website works across different operating systems and browsers or is accessible on mobile devices. However, in spite of the fact that a significant number of web users have some sort of impairment, many designers do not consider how easy or difficult the site would be to navigate if the individual viewing it had a disability. According to a study done by the National Council on Education in 2001, nine percent of college students have some sort of a disability.While using the Internet may be slightly more challenging for someone who is visually or mentally impaired, there are a number of simple ways that designers can ensure that any audience can use their site. People with disabilities may get far more out of the web than the average user since many who have impairments are less mobile and may rely on the Internet for shopping and communication. Therefore, it is important that designers do keep these individuals in mind when creating websites.

Along with ensuring that a website can be used by disabled individuals, designing with accessibility in mind can also make a site more easily used by people who are less tech savvy and might normally be confused or put off by a more complex site. Generally speaking, the tenets of accessible web design are very similar to those of user-friendly design: easy to read text and a menu and navigation system that is simple to follow and use. However, if a designer feels that making accommodations for those with disabilities changes their design too radically, they always have the option of offering a simplified and more accessible version of their site, similar to those sites that offer a low-bandwidth alternative.

II. Designing For The Visually Impaired and Colorblind

a. Common hurdles for visually impaired users
Individuals with vision impairments may range from those who simply have trouble with reading small text or text that does not have enough contrast to people who require extreme magnification to be able to read content. Standard websites may present these individuals problems, especially if a site is designed so that people cannot change font sizes or zoom in on the page without distorting it. Pages that use flash or images for menus may also be difficult for those with visual impairments to navigate because it is difficult to re-size these elements without distorting them.

People who are colorblind may also have trouble using websites that rely on color to indicate links, buttons or navigation. Telling someone to press a red signup button is not helpful for those who are colorblind, and making linked text another color may cause confusion if the text is not also underlined, made bold or differentiated from regular text in another manner.

b. Tips for improving navigation for these users
Creating a website that is accessible for visually impaired individuals is fairly simple, and many features of these websites are considered the hallmarks of well-designed pages. Text should be large enough to be read easily and increasing the size of a font should not cause a website to stop lining up properly. Ensuring that a site can be resized without distorting it can be achieved using tables with percentages and principles of responsive web design.

Text should contrast with a background sufficiently to make it readable for those with limited vision and who are colorblind; generally speaking sticking with black text on a white background is a good choice. Sites should also not rely on color for people to be able to use it, and text decorations such as bold or italics can be used in place of or along with color.

c. Tools for testing and implementing these designs
aDesigner - this tool verifies a number of elements of accessibility, including the ability to change font sizes and how simple menus are to navigate.
Vischeck - web designers are able to view their site as it would be seen by individuals who are colorblind by using this tool.
Color Contrast Analyzer - running a site through this tool will verify that text and link colors have sufficient contrast to be readable by those with vision impairments, including those who are colorblind.

III. Designing For The Blind And Those With Physical Limitations

a. Common hurdles for blind users
The issues that those who are completely blind face are obvious, but there are a variety of tools available that enable people who are blind to use computers and navigate the web. Text to speech programs that read what is on a computer screen to a user enable blind individuals to access the web. While physically disabled individuals may be able to see a computer screen with no problems, moving a mouse or even using a keyboard may be a struggle or impossible. Both blind and physically disabled individuals are likely to use programs that allow them to use a computer via voice commands. Websites that are image heavy, have complex menus or use Flash extensively tend to be problematic for text to speech and voice command programs, which can lead to problems for both types of users.

b. Tips for improving navigation for these users
The best way to make a website accessible for blind and physically limited users is to optimize it for the programs these individuals use. This means avoiding putting large amounts of text in images and using alt tags for images to explain what they are or what is said in them. Menus should also be set up in a way that is easy to navigate so that people can understand how they work based on what is read to them as well as being able to easily issue commands that take them to the page they are seeking.

c. Tools for testing and implementing these designs
NonVisual Desktop Access - this is a free screen reader that enables designers to hear how their website will be read to users.
VoiceOver - built into Mac operating systems, this program reads aloud to users as well as enabling them to use voice commands.
Windows Speech Recognition - Microsoft’s speech recognition software requires some setup and is less advanced that other similar programs, but it has the advantage of being free and built into Windows operating systems.

IV. Designing For Those With Mental Impairments

a. Common hurdles for mentally impaired users
Individuals may suffer from a wide range of mental impairments, including everything from learning disabilities to suffering from brain damage that impacts their cognitive function. These users may have trouble reading and understanding both a website’s content and navigation if they are not simple or straightforward. Websites that rely on Flash or interactive drop-down menus may be a source of confusion for those with mental disabilities.

b. Tips for improving navigation for these users
Text, at least on the main page, should be easy to read and understand. Short sentences and writing content that is geared towards people at around a 6th grade reading level can help ensure that all users are able to understand a website. If it adds clarity to menu options, icons or pictures can be incorporated. A website’s navigation should be easy to understand, and each page should be clearly labeled with a title or identify where someone is on a site. This can either be done by including specific HTML title tags, headings or a combination of the two.

c. Tools for testing and implementing these designs
Readability Calculator - using this online tool enables designers to determine the overall complexity of the written content of their site.

V. Additional Sources And Further Reading