Web Accessibility Consultancy
We are providing a web accessibility consultancy. For more information please send an e-mail to accessaudit@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?
- Text and Font
- Linked Text
- Accessible Web Colour Settings
- Layout and Navigation
- Multimedia
- Buttons, Graphics and Pictures on the Web
- Checklist
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
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
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.
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.
- Put site navigation in a single consistent area on each page to make it easy to find all links and get an idea of the contents and structure of the site.
- Make sure text and graphics are clear. Text clarity can be dependent on the colours and style of font used (explained further in the Making Accessible Webpages guides www.w3c.org). Graphical buttons should not be compressed to a level which significantly detracts from the quality of the image. These factors become extremely important when the screen is magnified to a level at which vision impaired users can read it.
- Avoid using vague labels for menu items, for example info instead of contact info labels for all links should clearly tell the user where the link will take them. This will save people the time and effort of having to check and backtrack through a number of pages in a search for relevant information.
- Include meaningful metadata. This is descriptive information that is hidden in the page's code. It is used by search engines to find and rank the resources that are most likely to be relevant to a users search, providing a shortcut to users. To add metadata in Dreamweaver, go to Head in the Insert menu, and select Keywords (words you think people wanting the info on your page would use in a search, separated by a comma) and Description (brief overview of the pages contents, max of 250 characters).
- Test your site's usability. Having users trial your site will highlight any potential problems with its layout and structure. As few as three people should provide enough feedback to pick up any major problems. Any subsequent adjustments to the design will be easier if these test are undertaken at a relatively early stage of the sites development.
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.
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
- People who rely on screen readers or other auditory devices, such as mobile phones, to access the information on the web;
- People browsing the web with text-only displays;
- People using a screen enlargement resolution that is too high to make viewing images practical;
- People whose internet connections are too slow to download images within a reasonable time.
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).
- I have included an ALT attribute for all images and image map hotspots on the page.
- Users can tell where links are taking them without having to read the surrounding text.
- My text links are distinguished from regular text in a way that is consistent, and does not rely solely on colour.
- Users can easily see the set text colour against the set background colour (as opposed to any graphical buttons or backgrounds). I have used high-contrast colours throughout.
- I have used a sans-serif font, such as Arial, and any stylesheets have font sizes specified using relative units.
- I have simplified my layout as much as possible and had sample users trial its usability.
- I have not used frames.
- I have provided accessible alternatives for interactive and multimedia content.
- All of the content on my web page can be printed. My page has passed the W3C standards, www.w3c.org and I have done any recommended manual checks.
