Basic Web Accessibility Tutorial: Introduction
Version 1.0, October 14, 2009
This tutorial will focus on the accessibility of Web content, but the concepts we discuss here apply to information stored in other formats as well.
This is part 1 of a 3 part tutorial. Here is a short description of each part.
- The degree to which a device, service, or environment can be used by as many people as possible. Web accessibility means that people with disabilities can perceive, understand, navigate, interact with, and contribute to the Web.
- Web content
- Any Web page or Web application that is displayed in a Web browser. This is normally HTML content, but might also include other non-HTML elements, such as Java applets or multimedia players.
- Accessible Web content
- Web content that has been designed and created to comply with accessibility guidelines, with the goal of enabling the largest possible audience to use the content, regardless of disability or method of access.
When we publish a Web page or a Web application, we must make sure the content is usable by everyone who needs to access it. But everyone has their own style of learning, and some people do not process information as easily, or in the same manner as others.
- Can I use your Web page if I cannot see it?
- Can I use your Web page if I cannot hear?
- Can I use your Web page if I cannot use a mouse?
- Can I use your Web page if I cannot break the content into easily understandable sections?
- Can I use your Web page if I am easily distracted by excess noise or movement?
For your Web page or Web application to be fully accessible, you must be able to answer yes to all of those questions. Accessibility means that everyone can use your Web content regardless of his or her level of ability.
In the following sections, we will discuss how a person with varying levels of ability might interact with your Web content, so we can begin to understand the issues involved in creating Web content that is accessible to everyone.
Note: Although this tutorial will focus on Web content, the concepts we discuss here apply to information stored in other formats as well.
If I cannot see, how will I use your Web content? First, this could mean many things. For example:
- I might be totally blind.
- I might have limited vision.
- I might be colorblind.
If I cannot see the screen, I will probably interact with the Web content as follows:
- I probably rely on a screen reader to read the page to me. This is a software application on my system that can read all of the text on the page to me.
- I cannot use the mouse at all. I probably rely on the keyboard to navigate the page, select links, select checkboxes and radio buttons, to activate buttons, and everything else a mouse might be used for.
- I may use a Braille output device that allows me to read text line by.
Here are some of the challenges I will have in understanding the content:
- I cannot see the page structure, so I cannot visually scan the content of a page to focus quickly on the information I care about.
- I cannot see any pictures, charts, graphs, or videos that might be on the page.
- I cannot perceive information conveyed solely by color or other text attributes.
Limited vision can mean many things, so there might be a few options available to me, depending on my vision.
- I might just need the ability to enlarge the text a bit so I can see it better. The Web browser has an option to enlarge the text on the page.
- I can probably use the mouse and the keyboard well enough to navigate and interact with the Web content.
- I might have trouble telling the difference between normal text fonts and bold or italic fonts.
- I may have trouble recognizing characters if the font has a lot of frills and decorations.
- I may have trouble seeing text that has a low contrast difference between the text and the background. I may even need to configure special high contrast colors on my system, such as yellow text on a black background instead of the default black text on a white background.
- I can probably use the mouse and keyboard well enough to navigate and interact with the Web content.
- With high contrast mode set, I probably cannot tell what the original color of the text is, because the high contrast mode changes the text colors.
- I might use a screen magnifier to enlarge everything on the screen. The result is like a magnifying glass: I cannot see the entire screen at once, but only the portion of the screen that is being magnified.
- Since I can now see only a small portion of the screen, I need to scroll up, down, left, and right to see all of the content. I will probably use the mouse for that. Information presented in multiple columns may be difficult to follow.
- If I cannot use the mouse, I will probably use the keyboard.
- Because I can see only a small part of the screen, it might be difficult to keep track of where I am on the page. For example, if I press the Tab key, I expect the visible portion of the screen to follow the keyboard focus, and there must be a clear indication of where the focus has moved.
- I might need to use a screen reader, either occasionally or all the time, to help me.
To be colorblind means that I cannot distinguish between two or more colors. The most common type of colorblindness is red/green, where red and green colors both might look like the same shade of brown.
- I will not be able to understand certain text or use forms that use color to convey information. For example, if the text says “The winner is shown in blue,” or “Required fields are shown in red,” I might miss something.
If I cannot see, I cannot do a quick visual scan of a page to find information, links, images, or other items that might interest me, or to skip items that are unnecessary. Also, the mouse is useless to me, since I cannot see where it is pointing, so I will probably be using a keyboard to navigate from the top to the bottom of the page.
The screen reader helps me do those things that a sighted user does without a second thought.
- The screen reader can read a page from start to finish, or I can go through the page line by line, word by word, or one character at a time.
- The screen reader can help give me a quick idea of what is on the page, since I cannot do a quick visual scan of the page. For example, it can present me with lists of elements found on a page, such as:
- Form Fields
- Since I cannot use the mouse, the screen reader provides the ability to jump to the part of the page that interests me, or to activate a link, or to jump from heading to heading.
The screen reader cannot describe the picture without some help from the page author.
- The page author must to add “alternative text” to every image on the page. This text is not normally visible on the page, but the screen reader can announce the alternative text.
There are other things you must do to make sure I, as a screen reader user, can understand your Web content. For example, you should be sure to use section headings (<h1>, <h2>, and so on) to structure content, and use descriptive link text when creating hyperlinks to other pages. You also need to provide the ability to disable background audio that might interfere with the screen reader. More hints and requirements are discussed through the rest of this and other available tutorials.
If I cannot hear, how will I use your Web content? First, there are differing levels of hearing ability. For example:
- I might be totally deaf.
- I might be hard of hearing, or have limited hearing.
If I cannot hear, I will probably interact with the Web content using the mouse, keyboard, and display. However, if audio content is provided, either as part of a video, or as an audio-only element, I will miss it.
- If there is any audio content, I rely on you to provide the same information in a visual manner. This might be done in one or more ways:
- For audio/video content, provide captions for the video.
- For audio/video, or audio-only content, provide a full text transcript.
- Provide a video showing sign language translation.
- Keep in mind, however, that not all people who are deaf or hard of hearing understand sign language, and American Sign Language (ASL) is not English. If you provide an ASL translation, you should also provide a text version.
If I am hard of hearing, I may be able to hear your audio content, but I may need the ability to control the volume, not only for your content but for any other audio content that might be occurring at the same time.
Considerations for volume control of the audio content:
- Provide a volume control on the audio player on the Web page. I could use the system volume control, but I'd like to avoid using that if at all possible. If I cannot control the volume of individual applications, the volume in one application might overpower another application.
Many people cannot effectively use the mouse. For example:
- I may have a mobility problem, where I cannot easily hold or move the mouse.
- If I cannot see the screen, the mouse is useless, since I cannot see where it is pointing.
- There are many other possible reasons I may not be able to use a mouse.
If I cannot use a mouse, I must use my keyboard or some other input device to do all of the things that the mouse is normally used for, such as:
- Clicking on links to view other pages.
- Selecting radio button options.
- Selecting or deselecting checkboxes.
- Moving the cursor to form input fields, so I can begin typing in the input field.
- Navigating to and activating submit buttons or other buttons in a form.
Here are some techniques I will use to navigate and interact with Web content using a keyboard.
- I will use the Tab key to jump from link to link on the page, or to jump to form fields.
- If I tab to a link, I will press the Enter key to activate the link and go to the new page.
- If I tab to a button (like a Submit button), I will press the Spacebar key to activate the button. (Usually, the Enter key works also, but the Spacebar is the standard method of activating a button.)
- If I tab to a group of radio buttons, I will use the Arrow keys to move between radio buttons in the group.
- If I tab to a checkbox, I will press the Spacebar to either check or uncheck the box. If there is a group of checkboxes, I will use the Tab key to jump between them, and not the Arrow keys, as I did with radio buttons.
For the most part, I will use the same keys to navigate and use Web content as if I did not have a screen reader running.
- However, the screen reader provides lots of additional features to help me find content on a page, navigate to the content, and interact with the content. But that is a subject for another class.
Cognitive issues affect my ability to absorb the information you are trying to present.
Cognitive issues involve the way my brain processes information. For example:
- I might be easily distracted by noise, or by movement. In some extreme cases, rapid movement might even cause seizures.
- I might have some form of dyslexia.
- I might have trouble processing text that is presented in large blocks, and not separated into paragraphs or into more easily digestible sections.
Because there are a variety of cognitive issues, there are a number of ways they might affect my experience with your Web content.
- If there are flashing images or blinking text, it may distract me, possibly preventing me from concentrating enough to really understand the content. In some cases, flashing or blinking content could cause a seizure.
- If the page automatically starts playing a video or audio track when it loads, it may distract me so that I cannot concentrate on the page content. If I cannot turn off the audio track, I may give up and close the page.
- If a page contains long paragraphs of solid text that are not broken up into smaller paragraphs, with section headers where appropriate, I may suffer from information overload. I might not be able to read beyond the first line of the text before I get overwhelmed.
- I might use a screen reader or talking Web browser that will read the content to me as I follow along, just to help me focus on the words in multiple ways.
- Images may help me understand complex issues presented in the text.
This was the introduction to Web accessibility issues. For details on how to make your Web content accessible, proceed to the next portion of this tutorial:
Basic Web Accessibility Tutorial: Design and Development.