Disability India Information Resources

skip navigation



Web Accessibility Consultancy


We are providing a web accessibility consultancy. For more information please send an e-mail to aqeelqureshi@disabilityindia.com, aqeelsco@hotmail.com


What is Web Accessibility?

Accessibility is about enabling people with disabilities to participate in substantial life activities that include work and the use of services, products, and information. Following are the major concerns while designing a accessible website:

How do people with disabilities access information on the web?


For people with a disability, the Internet has become one of the most comprehensive educational, employment and recreational resources available.

Many people with a disability use a computer with adaptive technology to surf the Web. Using voice recognition software people with quadriplegia can independently read an online daily newspaper. People who are blind can participate in E-Commerce by using screen reading software and a Braille display. By using Internet chat software such as ICQ, people who are deaf can easily communicate with friends and relatives in the same town or on the other side of the world.

These are only a few of the examples of the positive impact the Internet has had on the lives of people with a disability. However, the continuing benefit of the web as an enabling tool for people with a disability is dependent on the way in which web sites are designed and coded.

For example, a web page consisting entirely of graphics and image map links might look great to a sighted user, but screen readers are unable to translate graphics. Therefore, to someone who is blind and using screen reading software to access the page, the information is completely inaccessible unless the page author has enhanced the graphics and image maps with text alternatives.

Other users who do not see the images include those using text-only browsers, people trying to speed their downloads by excluding images (those with slow modems), and users of the increasing array of non-PC web browsing devices, such as mobile phones. To see how these users can be affected.

This is an extreme example of how omitting one basic page element can impact so greatly on a particular group of Web users. A person's disability does not have to be as extreme as blindness to impact on their ability to use the web effectively. There are a myriad of reasons why some users may have difficulty accessing Web pages, which have been incorrectly designed or coded. These include:

1 The user may have difficulty reading or comprehending text
2 The user may not be able to use a keyboard or a mouse
3 The user may not be able to process some types of information easily or at all
4 The user may not speak or understand fluently the language in which the document is written
5 The user may have a text only screen, a small screen, or a slow Internet connection
6 The user may have an early version of a browser, a voice browser, or a different operating system

Top

Text and Fonts

While the appearance of the text on your page may seem like a largely cosmetic issue, it does make a significant difference for some users, particularly those using a zoom tool to compensate for poor eyesight. You can control the appearance of the text on your web page by setting the font face attribute. Even without a screen enlargement tool, text is often resized by users to compensate for eyesight or monitor display problems. This is done by altering the settings in the user's web browser. However, there are some methods of setting text size in web pages which browsers cannot over ride, making the information very difficult to access for some users. These are explained at the end of this tutorial.

What is font face and how is it relevant to accessibility?

Face is short for typeface, and is used to specify the style of the characters in the text. There are two basic families of typeface those with serif , and those without it . Serif is the name for the tails and caps on the end of the strokes which make up the letters.

What kind of text sizes cause problems?

Our tests have indicated that most common methods of setting text size do not cause problems for resizing. However, there are some which will disable this feature for a significant number of users. Safe methods for setting text size:

Styles: relative font units, for example:

<span style="font-size: 90%"> This text is resizeable.</span>

Top

Linked Text

The two most important characteristics of linked text are its appearance, and its meaning. NB: if a user is browsing without images, Linked Images (such as buttons) will appear as text links, using the images ALT Attribute

How should linked text look?
The appearance of linked text should be distinctive and consistent.
Distinctiveness is important to allow users to easily distinguish links from normal text. It is important that colour is not the sole difference between regular text and links, as people with colour perception problems may not be able to distinguish them from the surrounding text.
eg. W3c test is an important tool for web authors.
Consistency in the appearance of links allows users to become comfortable with how your pages work, thus enabling them to navigate with greater ease and efficiency. By far the most common indication of linked text is that it is underlined.

Whatever indication you choose, it should not be used for another purpose in the same website for example, on this page, using bold text to indicate links would be confusing, as it has also been used to emphasise key words. It is not advisable to use underlining for any purpose other than to indicate a link.

What should linked text say?

People using screen readers often use the tab key to find and read the links on a page independently of other text. This speeds up what can be an arduous and time-consuming process of locating information on the web. Therefore it is important that the linked text tells the user where the link is going, independently of any surrounding text.

eg. The W3C test (www.w3c.org) is an important tool for web authors.


Top

Accessible Web Colour Settings

Many authors use graphical buttons and background images to enhance the appearance of their pages. However it is important that people browsing only the text be considered when choosing colour settings for background, text and links.


What are the rules for choosing colours?


A background colour which contrasts with the set text and link colours must be set, regardless of whether a background image is also used. The background colour is the plain colour that shows as a background if a background image is not used. Even if buttons have replaced linked text on the page, users browsing in text only will just see the linked ALT text against the plain background colour.

For example, imagine a page which uses a dark background image and has yellow text, with white links. No background colour has been set because an image is being used instead, and the author has checked that the text is clearly visible against it. However a user with images turned off in their browser will not see the background image - instead they will see the text over their browser's default background colour setting (usually white or light grey), making the text virtually unreadable. Yet if the author had set the plain background colour to be black, the user would have experienced little difference in the readability of the text.

What are the best and worst colour combinations?


The most fail-proof colour combination for all users is black text on a white background. Not only is it accessible on the web, but it can also be printed out easily.

Colours that have only subtle differences will not be perceived as different colours by some people. Often this is caused by an inability to perceive the red and green components of colours, eg. to someone who cannot perceive red components, orange and yellow would appear the same.

It is worth mentioning here that variations in computer monitors and systems can have a substantial impact on how colours are displayed, particularly their relative levels of brightness. The best solution is to use high contrast colours for important features of the page.

Top

Layout and Navigation


Because vision impaired users can only view a page piece by piece, rather than as a whole, they must commit much of the layout and site navigation to memory in order to use a website's resources. Therefore, for the greatest accessibility, page layout should be uncluttered and consistent, and site structure should be logical. Below is a list of tips to help you maximise your site's usabillity.

Top

Multimedia


Multimedia can include both visual and aural elements, obviously creating accessibility barriers for users with vision and hearing deficiencies respectively. As with static images, it is necessary to provide text alternatives for these users.

Both Quicktime Pro and RealProducer G2 have the capacity to integrate accessibility solutions, such as captions and descriptive audio, into the multimedia presentation itself.

Top

Buttons, Graphics and Pictures on the Web


Not all devices for browsing the web can 'see' or understand images. Therefore, it is necessary to provide alternative information for those using these devices, including


How can my images be made accessible to all users?



HTML allows web authors to include text alternatives for images by using the ALT attribute. Including text alternatives for linked images (such as graphical buttons) is probably the single most important thing you can do to ensure that your page is accessible to the greatest number of people.

How do I add the ALT attribute to my images?

In HTML code, a basic image tag looks like this:
<img src="example.jpg">
To add the text alternative, include the ALT attribute as shown here:
<img src="example.jpg" alt="example of an image with a text alternative">

Note that a screen reader will able to read this text, whereas an image without a description would provide no information to the user.

How do I add text alternatives for image map links?

Select the image, as shown above, and click on the downward pointing arrow in the bottom right hand corner of the properties bar to expand the palette. This will reveal the Map button. The resulting panel will allow you define the areas of the image to turn into links and add text alternatives (ALT).

Top

Checklist


Back to top