Easy Start Introduction: Six Easy Techniques

There are several very easy things we can do that will greatly increase accessibility on your pages. It boils down to modifying the way we construct Web pages, and best of all, it's painless on our part! You don't have to be a "Webmaster" to begin making pages accessible. Modifying the approach we use to construct a page will enable disabled users to have more control over how they navigate through our pages. This context will be explained within the context of each of the techniques below.

In the overview section of this site, we present you with information about disabilities and how disabled people use assistive technology devices to surf the Web. For the most part, a lot of disabled users, especially the blind, don't use a mouse. Blind users use a screen reading device called Jaws (and others) that will speak text out loud on a page. Understanding how Jaws reads a page will take you a long way in understanding why pages have to be constructed in a particular way.

Link Names

Links should be descriptive.

A blind user can use a screen reader like Jaws to "speak" just the links on a page. It would not make sense to the listener if all the links on the page said something like "click here." What if there were 20 links on the page and they all said "click here." Where are you going if you click one of the links?

Links are typically very short and non-descriptive. The following is an example.

To continue to page 2, click here.

This if fine for the sighted user, but it is not descriptive enough if Jaws is being made to read just the links on the page. The screen reader would speak "click here", which, out of context, would not make sense.

A better approach might be:

Continue to page 2

The listener would understand what would happen if the link were clicked.

Headers (h1, h2...h6)

Use "headers" to draw attention to areas of a page.

Imagine looking at a news paper. There is a lot of information on each page. Most people scan the page for bold text above each column to get a sense of what is on the page. We can think of a Web page in much the same way.

Web designers just starting out probably don't understand the importance of using headers when designing their pages. A lot of them will simply highlight some text and make it a larger font size and bold to draw attention to a section of the page. Screen readers do not recognize the difference in the bold text and regular text on the page.

Screen readers can be made to speak all the headers on a page before the user even starts to surf the page. Just as we can scan a news paper (or Web page) visually for bold (header) text, so can the blind user if we used headers on the page.

All Web page editors are capable of applying headers to text. To apply a header to text, you simply highlight the text and choose the header size you want. The text will take on the size of the header you choose. In Netscape Composer, you would look for the drop-down menu with the headers as you see in the image below.

Headers are HTML tags. There are six header tags:

header size 1

header size 2

header size 3

header size 4

header size 5

header size 6

As you can see, header 1 is larger than header 2. This is opposite of how we think of font sizes; however, if we think of headers in terms of "importance" of information on a page, it begins to make sense. Header 1 is more important than header 2, and so on.

Imagine the following as a Web page. Notice how the headers are used to show "importance" or relationships of information on the page.

Using headers is perhaps one of the easiest things we can do to help make pages accessible to a blind user. The screen reader will speak the header number, and can be made to jump to specific headers (h1, h2, etc.) The header number should represent the relative importance of the information below it.

Alternative Text

Use alternative text (alt text) to add descriptions to images.

Below, you see a picture of an image with alternative text being displayed. When screen reading software passes over an image, it looks for this alt text so it can speak it. Without alt text, the image has no meaning in the context of the page. Special note: Alt text does not display on Macintosh computers, but the screen readers can still speak the text.

The image below shows the alt text being displayed for the image in a Web page.

If you are using a PC, you can pass the mouse pointer over the image below to see the actual alt text of the image.

Netscape Composer

To insert alt text using Netscape Composer, look for the alt text field when you are inserting an image:

Dreamweaver

To insert alt text using Dreamweaver, click on the image in the page, and look for the alt text field on the property inspector:

Relative Sizing vs. Fixed Sizing for Fonts and Tables

Do not assign absolute sizes to fonts and tables; use relative sizing.

Typically in a word processor, we have to decide what size we want our text to be. For the main header of a page, we might decide on a 32-point font, and for the body of the document, we might choose an 11 or 12-point font. Many Web designers practice the same when designing their pages. In Web editors, though, you have more options for sizing; you can use points, pixels, percent or nothing! Points, pixels and other units of measurement are considered "fixed" sizes. Percent and nothing are considered "relative" sizes.

One of the disabilities is low vision. A person with low vision might need to increase the font size on their screen in order to read the text. If the fonts and tables are set with fixed sizes, the low vision user might not be able to increase the font size on their screen. If the fonts and tables are set to relative sizes (either percent or none), the user will have control over the sizing on their screen.

Each browser (Internet Explorer, Netscape) has a control panel in it that allows any user to set the font size on their screen. If you do not specify a fixed font size on a Web page, that page will look for the font size set in the users' browsers. In other words, if you don't control the font size in your Web pages, the users' browsers will.

The same is true for tables; you can use fixed or relative sizing. Some Web designers might set their tables to "600 pixels", which means that the table would be 600 pixels on all monitors. You can also set your tables to percent. You could set your table to 50%, which would fill up half of the users' monitors, or you could set the the table to 100%, which would fill up the entire screen.

To recap, using relative sizing for fonts and tables allows the end users to have more control over the visual presentation of your pages.

Use of Color

Use contrasting colors, and do not use color to convey meaning.

Many people have some form of color vision deficiency. Color blind people typically lack certain color sensors in their retinas. This means that they cannot distinguish between certain colors depending on which sensors they lack.

Color is one of the main components in Web pages. Sometimes we use it to simply liven up the site a little, but it is sometimes used to convey meaning. It is good to use color, but the key is not to use color alone if you are conveying meaning.

This information is applicable to not only people with color deficiencies, but also to those who are completely blind. Screen readers are not able (at this point) to convey color information to the users; therefore, the use of color to convey information also affects the blind.

A quick trip to this Web site will give you a sense of how colorblind people experience the Web:

Vis-Check Colorblind Information

Example of how you might address a color issue on your site:

Let's say we are creating a questionnaire form that has three fields, two of which are required. In order to highlight the required fields, I decide to use red text for required and black for those that are not required. This may be a problem for some color deficient people. One way to avoid this problem is to use an asterisk * before a required field. This is beneficial for both color deficient users and blind users. Colorblind users will be able to see the asterisk, and blind users will hear the asterisk spoken before the required field. For example:

All required fields are marked in red with an asterisk:

Contrast in foreground and background colors

In addition to the concern of using colors alone to convey information, Web page designers need to be aware of the colors that they choose to create their pages. There needs to be good contrast in the foreground and background colors on the Web page. The easiest way to avoid this problem is to choose highly contrastive colors for the foreground and background. For example, don't use red text (foreground) on a pink (or similar hue) background.

You can use the Vis-Check site to test your pages for color contrast:

Visit the Vis-Check Site

Email

There is no magic bullet that will make a site 100% accessible to all assistive technology devices. If you provide an email address on your site, you will provide a way for people to contact you in the event they cannot access something on your site.

You can provide an email link on your page by simply using the "mailto:" HTML code. The example below is demonstrated using Dreamweaver, but this is applicable to other HTML editors as well.

Type whatever you want to say for your email link on your page:

Email John Doe

Highlight the text and use the property inspector to create the link. In the link box, type:

mailto:

You will then type your email address directly after the colon:

mailto:whoever@wherever.com

Here is an image of what was just described using Dreamweaver:

If you want to insert all the HTML code manually into the code of your page, you can copy, paste and modify the following code:

The link would look like this, but with your name of course:

Email John Doe