Website Design

Designing Accessibility Websites

Designing Accessibility Websites

Website Design

Accessibility website design offer the same options available to disabled people as able bodied people when browsing websites and navigating the information that they require. Website accessibility considers the range of disabilities which can effect a persons ability to access information online. Accessibility considerations include:

Visual
Speech
Physical
Auditory
Neurological Disabilities
Cognitive

The ability to use the internet has become a significant requirement for many aspects of modern life. If someone is finding access to the web difficult, they could find themselves unable to access important information which is increasingly moving to online resources such as:

Health Care
Education
Commerce
Government Information
Recreation
Employment

The ability to access content and media online offers people with disabilities a source of interaction and information that is not accessible easily through traditional audio, visual and print media.

How to make a Website Accessible

Page Titles

Page titles can be read visually or listened to using a screen reader so both media should be checked as being appropriate on an accessible website.

Page titles should be organised so that they describe the content accurately making it easy for users to navigate through the website content. It is important that the most significant feature of the page is described at the front end of the title so that it is visible in the display area for the page title in the browser.

Image text alternatives (“alt text”)

The ‘alt text’ connected to an image will be available for users who do not display images and can be listened to by people with sight impairments by using a screen reader. It is necessary for the alt text to accurately describe the function of the image to convey the way that it is intended to be used or the information included within it.

Images which are purely decorative and serve no function or add no additional information can be labelled with a null alt tag (alt=””).

Headings

To make your content easy to navigate, headings should be placed in the correct order of hierarchy. H1 should be the most important in describing the page followed by the h2, h3, h4 etc.

Headings should accurately divide up content into meaningful sections. Each heading will need to be descriptive and useful in deciding which content is described below.

Contrast ratio (“color contrast”)

Contrast settings help display content so that all readers are able to read it easily. Some people are unable to distinguish between a light text on a light background as there is not enough contrast. A high contrast content features a light text on a dark background or a dark text on light background.

Visual impairments can vary. Many older people find it easier to read information in high contrast colours. People with dyslexia and other reading disabilities require low luminance to make content readable which means that they cannot read any content in bright colours.

Resize text

The option to enlarge content on websites is available for people who require help in viewing and reading what is displayed on the screen. Some people require specific aspects of the content to become more prominent including font display, line-space, images or buttons.

Browsers allow users to control the text-size, text-only zoom and page zooms for other elements. Assessable websites should be designed so that whenever any of these options are changed, it does not cause elements to overlap or for lines to become too long.

Keyboard access and visual focus

For some users of the internet, the keyboard, and not a mouse, is the only means of interaction with the webpage and its content. Blind people and persons with mobility impairments may require a website to be accessed through their assistive technologies, such as voice input that rely on keyboard commands.

Accessible websites should provide keyboard shortcuts to allow access to each element of a website.

Forms, labels, and errors

People who use voice input technologies or keyboard commands to access the web will require that all form fields and labels work to provide the information in an accessible way. Colour only indicators may also be unusable to some people.

Multimedia (video, audio) alternatives

It is important to remember that any information contained within an audio file or a podcast is not available to someone who is deaf or hard of hearing unless a text transcript or subtitle alternative is offered. Blind people or persons with visual disabilities will not be able to acquire a full understanding of the information contained within a video unless an alternative audio or text format is provided.

All audio and video players should be accessible from keyboards for people who require keyboard access to interact with online information.

Auto-start audio is best avoided or should be able to be paused, turned off or be available with a volume control.

Subtitles or captions should be available for any video content. Automatic captions are often not accurate enough to provide relevant content so the video is not accessible with only automatic captions available. Sufficient captions should be in sync with the spoken content, identify who is speaking on screen and offer a description of other important sounds in the audio.

Basic structure check

When designing an accessible website, it should be remembered that people “see” a webpage differently. Information which is organised to be visually easy to understand may be difficult for someone who is using a text reader.

It should be easy to increase the size of text without effecting the basic website design.

Once style sheets and images have been turned off, you will be able to view the page layout and assess if the structure of the page makes sense. Relevant headings should proceed related content and alt-images should offer a description of the missing image if required for navigation.

References:

http://www.adobe.com/uk/accessibility/create.html

http://www.w3.org/WAI/intro/accessibility.php

http://www.w3.org/standards/webdesign/accessibility

http://www.studygs.net/accessibility.htm

http://www.w3.org/WAI/impl/Overview

http://www.w3.org/WAI/eval/preliminary.html

Leave a Reply

Your email address will not be published. Required fields are marked *