Fundamentals of the web and disabled users

Aim

The purpose of this introductory lesson is to explain web site accessibility, how the web works, and the tools and methods used by disabled people to access the Internet.

What is web site accessibility?

Web site accessibility is an important element in helping to build an inclusive society. In particular, accessible web sites can provide a "life enhancing" experience for disabled people. Properly constructed web sites give disabled people the independence to pay their own bills, do their own shopping, find employment and or training, and the tools to keep in touch with family and friends.

In practice, accessibility means designing and building web sites using agreed standards so that they work on all sorts of platforms (internet browsers, mobile phones, PDAs, screen readers etc.). It also means including some additional elements so that anyone can experience your message, including the elderly and disabled.

On page 2 of this lesson we shall look at the tools and techniques used by disabled people. But we start by reminding ourselves of how the web works.

How the World-Wide-Web works

The Internet is a new, digital medium. At it’s simplest the electronic signals are sent over the Internet and converted into text and numbers by a computer, mobile phone, screen reader or other device. To make the page more interesting to visual users the page can import images, applications and styles. These imports support the text but they must not replace it.

Because it is a digital medium, the web allows much more flexibility than traditional media such as paper. There is no need for the author to provide large text versions or audio tapes of their content. The user’s computer can convert the content into any format that the user requires (e.g. large print, audio, Braille, or high contrast). This makes the web an extremely efficient method of communication and one that offers disabled people full inclusion in the new “Information Society”.

When Sir Tim Berners Lee invented the World-Wide-Web his aim was to allow a simple text document to link to other documents on the Internet so that researchers could share information more effectively. These links (called “hyperlinks”) could also import images and other media into the basic page. The core of these “web pages” has always been the HTML document. This document is written in plain ASCII text (i.e. just the characters available on a standard keyboard) and should contain all the information that you want to impart to your visitors.

The diagram below shows the relationship between the HTML page and any images, style sheets or other media.

Diagram illustrating the page components

A web browser or other suitable technology interprets the code elements between the < > brackets in order to understand the structure of the page and thus to display the body text on the user's screen or read the text out loud through a speaker.

It should be clear from the above that the key to the World-Wide-Web’s phenomenal success is it’s simplicity. A set of basic standards for the underlying HTML code gives the web its tremendous robustness and flexibility.

The governing body for the design and application of these standards is the World-Wide-Web Consortium (W3C) who publish the internationally agreed standards on their web site (http://www.w3c.org). Software developers use these standards when designing Internet browsers, assistive technologies such as screen readers, mobile phone applications, search robots and anything else designed to work with web content. Web-designers who want their sites to be useable on all these platforms needs to apply these standards accurately and efficiently. The two recommended standards are HTML4.0 and XHTML 1.0. There is very little difference between these two standards, but if you have the choice then XHTML1.0 is more robust (but is less forgiving). The examples in these lessons are all written using the HTML4.0 standard, but will work equally as well in an XHTML1.0 environment. Links to the W3C web site are given at the end of the lesson.

Avoiding barriers

Providing that the engineering task (writing valid HTML code) is undertaken correctly, any form of Internet technology such as a browser or screen reader will read any single web page. There are just three potential barriers to universal accessibility that remain,

  1. When you introduce additional items to a page, such as images, animations, video or scripted applications, you do not prevent the basic HTML working as it should.
  2. When you use interactive elements such as forms you ensure that the controls work with the full range of input devices (primarily both the keyboard and the mouse).
  3. The links to other web pages and and documents are logical and the overall navigation is intuitive so that users can follow an intelligent route through your content.

This set of lessons is designed to help you avoid creating these barriers to accessibility whilst still delivering an effective and interesting web site. Before we start, however, we will have a look at how disabled people use the web.

Disabled Users, tools and techniques

How Disabled People Use The Internet

It is important for web designers, and content authors, to understand how disabled people use the Internet, so that they do not introduce barriers that prevent disabled people from benefiting from the technology.

Many disabled people use a standard web browser such as Internet Explorer or Firefox. However they may not use the browser in the same way that non-disabled people do. This is the benefit of the web’s adaptability. Unlike most other media, the web allows the user to configure the output to suit their particular needs.

Change the font size

Selecting a font sizeA common thing many people do (not just disabled) is to enlarge the font size to make the text easier to read. On most modern browsers enlarging fonts is achieved by pressing CTRL and the plus key (+). Fonts are enlarged in 10% increments. An alternative way to enlarge the fonts is to use the “View” menu, select the Text Size option and then the size of text required. The screen shot shows the Internet Explorer View Menu with the text size option selected.

Once the larger text size is selected it will stay in effect on all subsequent pages or websites until changed by the user. For this reason there should be no need for web authors to offer large print alternatives of their site. Users who need large print will already have configured their browser accordingly.

 

 

Change the colours

Some people find that different colour contrasts are easier to read, for example many people with dyslexia find that yellow text on a blue background stops the letters jumping around, others find that black on pink works best. Most modern browsers allow the user to over-ride the colour and font settings of a web site in order to make the content easier to read for people with some visual impairments.

Changing colour scheme with Internet Explorer
Changing colour scheme with Internet Explorer
Changing colour scheme with FireFox browser
Changing colour scheme with FireFox browser

 

Keyboard navigation

Many disabled people cannot use a mouse, either because they cannot see the cursor, or because they do not have the required hand-eye co-ordination or motor control. These people mostly use the keyboard for navigation. They can scroll up and down the page using the cursor keys, move through links using the tab key, go back to a previous page using the backspace key, close the current window using the CTRL + N keys and so on. A full list of the keyboard functions available for each browser can be found in the browser’s "Help” or “Accessibility” menu.

Standard keyboard layout

Because most web-designers use a mouse to help them create their websites they often build barriers for keyboard users into their sites without realising it. It is easy to check if your web site works without a mouse, just put the mouse out of reach and try to navigate around your site using the keyboard only. If you built your site using correct HTML code, and structured your pages in a logical order, then you should be able to navigate quite easily by just using the keyboard. If you do find problems it will probably be due to using external scripts or other applications and you will need to make changes to the way your site works.


Converting text to audio

Most modern computer operating systems include a facility to convert the text on the screen into audio output (speech). Special applications (plug-ins) are available for web browsers that will read websites out and highlight words as they are read out. Browsealoud (http://www.browsealoud.com/) is just one such application. The user selects the area of text and the programme reads the content out loud through a speaker. These tools are not designed for blind people (see screen readers below) but they are particularly useful for people who have difficulty in reading or have some limited vision.

Assistive Technologies

For those people who cannot use a standard browser there are a number of tools available. The following are the most popular at present (2009)

Screen Readers

The name screen reader is, in fact, a misnomer since they do not read the screen. Screen readers load the page content (the actual HTML code plus text) from the browser’s document into a virtual buffer (special memory area). The user is then able to review this virtual buffer at will using selected key strokes. Items such as links, form fields, headings and other HTML elements are identified when they are read out aloud by the software. When the user finds a link or other click-able element that they wish to activate, they simply press Enter, and the screen reader tells the browser where they “clicked”. There is a wide variety of options with screen readers, with users having the ability to change the rate, pitch, volume of speech output. Some use an external keypad or touch tablet to operate the reader, others use keyboard commands.

Man using a screen reader

The user can set the screen reader to read the whole page as a continuous flow, or one line, one word, or even one letter at a time. To help the user orientate himself the screen reader can also read out the first 50 links on a page or a list of the section headings, providing these have been coded correctly in HTML. Keyboard shortcuts can be used to take the user to the top or bottom of the page, to return to a previous page, search for individual words on the page and a variety of other actions. Good quality screen readers are expensive (circa £600+) but can be configured in many different ways to suit the user’s needs. However, blind people are just the same as the rest of us, and few read the manuals properly. As a result most blind users stick with the default settings.

An excellent video showing how a screen reader works is available from the University of Madison on Youtube :- 

http://www.youtube.com/watch?feature=player_detailpage&v=VvWCnFjAGgo

Braille reader

Braille Displays

Refreshable Braille displays provide a line by line tactile output of information displayed on the computer monitor. This is done by means of small, rounded pins that are lifted in order to form Braille characters. The user "reads" the braille display by running a finger over the pins. Braille displays are used by people who have both visual and hearing disabilities. Because the braille display only presents one line of text at a time instructions such as "Select from the menu opposite" or "click on one of the coloured boxes below" are inaccessible! There is an excellent video showing how a blind person with hearing impairment uses a braille pad to go shopping on the Internet in Roger Hudsons web-log (see the resources section at the end of this page)

Touch Screens

Touch screenA touch screen is an electronic device placed over, or built into the monitor of the computer. It allows the user to make a direct selection of an item on the computer screen by touching the screen with a finger or a stylus. These devices are usually plugged into the mouse port of the computer. Touch screens can help focus visual attention and provide a more direct response either for early learning of cause and effect or, when used in conjunction with an on-screen keyboard is a direct way to type.

Pointing and Typing Aids

These are most often a wand or stick held in the hand, mouth; or strapped to the chin or head. Useful for individuals who have limited hand control. More advanced tools include "blow and suck" tubes and eyeball tracking devices that allow people with paralysis to work a computer. Scrolling up or down a page, or tabbing through the links on the page is fairly easy, but actions requiring finer control, such as selecting an area of an image map, is much harder and often requires more than one attempt.

Programmable Keyboards

Programmable keyboards are often larger than a regular keyboard, with built in utilities that allow the user to change the sensitivity of the keys and other features. Some of the keyboards, with software that comes with them, or additional software allow the user to create a custom keyboard layout. Many alternative keyboards can switch between keyboard and mouse functions with the touch of a key, or can have the mouse functions as a portion of the keyboard. They are available for either Macintosh or Windows, and run simultaneously with the regular keyboard and mouse.

Chording Keyboards

Chording keyboards use a combination of a few keys to create keystrokes for each letter. Most individuals can learn to chord within a few weeks. The user uses the fingers of one hand to press different combinations of keys.

An example of someone using a chording keyboard, plus other examples of how people use computers, is available as a video from the University of Washington. The video lasts 10 minutes and is well worth watching. A link is provided at the end of this session (see resource number 5 below).

Links to resources

The following links will open in a new window

  1. World-Wide-Web Consortium (W3C) publishes the internationally agreed standards on their web site (http://www.w3c.org [new window] )
  2. The W3C provides a wide range of tutorials for web coding, these are available at http://www.w3schools.com/sitemap.asp [new window]
  3. Some examples (scenarios) of disabled users from W3C at http://www.w3.org/WAI/intro/people-use-web/Overview.html
  4. Refreshable Braille and the Web. Roger Hudson's video of someone using a braille pad to go shopping ( http://www.dingoaccess.com/accessibility/refreshable-braille-and-the-web/ [new window])