How To Use This Page:

The How To page has most of the techniques you will need to make your pages more accessible. There is a list of items on the left navigation bar for each item on a Web page that could create a barrier to people with disabilities. Each item is explained briefly on this page, and in more depth on a linked page.

Easy Start

If you are a novice or budding Web designer, I have some good news for you: This is easier than you think! No matter what your Web page skill level, you already possess some ability to create accessible pages. View the Easy Start information here. When you are comfortable with Easy Start, you can move on to the other links on the navigation bar on this page.

Philosophically speaking...

Making Web pages accessible is more than just applying techniques; it is a philosophy. Each Web site has its own personality, therefore decisions on how to apply the techniques might vary. No canned technique works the same on every site. It is basically up to the designer of the site to decide if, when, and why a particular technique is appropriate.

Images

If images convey meaning to the context of the Web page, they should be made "speakable" to screen reading software like Jaws. Text must be associated with the images to make them speakable.

Alternate Text ("Alt" Text)
Alternate text can be added to any image on a page. You can type up to 256 characters for alt text. Most Web page editors have the ability to add alt text to an image.

Image Maps
Some Web pages use images for navigation. These images are "mapped" for links. Alt text must be applied to the mapped region.

D-Link
Some images on a Web page convey so much information that alt text is not sufficient to explain the image. A "d-link", which is placed next to an image, links to another page with a text explanation of the image.

Images for Decoration Only
If images on a page serve only for decoration, and do not necessarily convey meaning, an "empty" alt tag must be used to make it non-speakable.

See Image Techniques Here

Tables

Layout Tables
Tables are common on the Web, and they pose some of the most challenging tasks when addressing accessibility issues. Most Web developers use tables for layout to position text and images in specific places on their pages. Care should be taken to arrange text and images in the table so the page is spoken in a logical manner.

Data Tables
Tables can be used like spreadsheets to present information in columns and rows. Unless special HTML code is used to allow the screen reader to triangulate this information in the column headers and row headers, it is almost impossible for a blind user to extract data from the table in a meaningful way.

Relative Sizes
Using relative versus fixed sizes for tables is another area of concern for accessible Web design. Using relative sizes allows low-vision users to increase the size of tables and their content.

See Table Techniques Here

Frames

Titles and Names in the Frameset
The framset of a framed site should contain a "name" and "title" attribute for each of the framed areas in the page.

See Frame Techniques Here

Java and Other Scripts

It is quite common to find Java and other scripting languages on Web sites. Some developers use it to add functionality (like navigation menus), while others use it to add "flair" to their site. If you use scripting languages like Java menus or applets, some users may not be able to access the information you are trying to present. In fact, some users might have Java turned off in their browsers. We recommend that you test your site with a screen reader and other tools to test the functionality of your scripts. If you find that the scripts are not accessible by assistive technology devices, you must provide an alternative means for accessing or conveying the information.

See Script Techniques Here

Multimedia

Multimedia presentations are usually in the form of audio and video formats. The formats could be QuickTime, Realmedia, Flash and others. In order to make these presentations accessible, alternate forms of the information need to be provided. Unfortunately there is no easy way to provide these alternate forms, and it is often time-consuming to transcribe audio or add captions to video. We recommend that when you are buying audio/video material for your classes or Web site that you look for materials that have already been made accessible.

Audio for the Deaf
Audio content needs to have an accompanying text transcript so people who are deaf can read it.

Video for the Blind
Video content needs to have an accompanying aural description of what is taking place in the video. This could be in the form of a second audio tract that describes what is taking place visually.

Plug-ins
If you have audio, video or multimedia that requires players like QuickTime, RealPlayer or Flash, supply a link to download the player.

Captioning Video
There are some software programs that can add text captions to video.

See Multimedia Techniques Here

Text-Only Site

Text-only sites are alternative, parallel sites to primary Web sites. Text-only sites are not looked at as being the best way of complying with accessibility requirements, and should be reserved only for instances when there is no other, suitable way to make a page or site accessible. Whenever the primary site is updated, the text site must also be updated.

See Text-Only Techniques Here

Navigation

Consistent Navigation
Navigation refers to the way visitors move through your site. Navigation should be logical and consistent throughout the site. By keeping navigation logical and consistent, the non-sighted person will know what to expect as they navigate through the different pages. It not only improves accessibility for people with disabilities, it improves usability for all users.

Skip Navigation
Skip Navigation is a technique that will allow a user to skip to a specific place in the page. This technique is useful for providing a means of bypassing repetitive navigation menus on pages.

Link Names
Links should have meaningful text, not just "Click here."

Java Menus
It is quite common to find Java and other scripting languages on Web sites. Some developers use it to add functionality (like navigation menus), while others use it to add "flare" to their site. If you use scripting languages like Java menus or applets, some users may not be able to access the information you are trying to present. In fact, some users might have Java turned off in their browsers. We recommend that you test your site with a screen reader and other tools to test the functionality of your scripts. If you find that the scripts are not accessible by assistive technology devices, you must provide an alternative means for accessing or conveying the information.

See Navigation Techniques Here

Page Layout

Consistency
Use a style of presentation that is consistent across pages. Consistent page layout of a site allows blind users to predict where information on a page is located. This is similar to using consistent page navigation systems.

Page and Paragraph Headers
Headers (h1, h2...H6) should be used instead of bold or strong tags to draw attention to page and paragraph headers.

Layout Using Tables
When using tables for page layout, avoid using complex table structures. Nested tables should be avoided if possible. A blind user can easily get lost in a complex table layout.

CSS (Cascading Style Sheets) for Visual Presentation
Web pages are created using HTML tags. These tags control the visual presentation of a page: font size, font type, font colors, page background color, etc. Alternately, page presentation can be controlled by CSS. HTML tags can pose problems for Assistive Technology devices. It is preferable, from an accessibility standpoint, to use CSS.

Relative Versus Fixed Sizing
People with low vision sometimes need to increase the size of text and tables on their screen. Fonts and tables on a page are sometimes defined with "fixed" values, e.g., Font="12px". Fixed values cannot be resized. Page elements can also be defined with relative units, e.g., Font="100%." By using relative sizing, the user can control the size of the visual presentation more easily.

See Page Layout Techniques Here

CSS: Cascading Style Sheets

Web pages are created using HTML tags. These tags control the visual presentation of a page: font size, font type, font colors, page background color, etc. Alternately, page presentation can be controlled by CSS. HTML tags can pose problems for Assistive Technology devices. It is preferable, from an accessibility standpoint, to use CSS.

See CSS Techniques Here

Color

Color blindness is more common than one might think. When color is used to convey meaning on a Web page, the information is possibly not accessible to someone who is color blind. Certain colors do not contrast well for color blind people. Pages should be tested for color contrast.

See Color Techniques Here

Forms

Form Labels and Form Elements
Forms labels need to be associated with the form elements they describe. A form label is the text that tells a visual user what information is needed in the form element (text box, radio button). Screen readers should be able to speak the label associated with the form element.

Layout Tables for Forms
If a table is used to structure the position of form labels and form elements, <label> and <id> tags must be used to associate the label and the form element for a screen reader.

See Forms Techniques Here

Language

Using Clear Language
Use the clearest language appropriate for the page or site.

Identifying Changes in the Natural Language in Browsers
If there are foreign words on a page, a screen reader will mispronounce the word. There are steps you can take to make the screen reader speak the foreign words correctly.

Abbreviations
Abbreviations will not be read correctly by a screen reader. There is an HTML tag that will allow the screen reader to speak the actual word for the abbreviation.

Acronyms
Acronyms will not be read correctly by a screen reader. There is an HTML tag that will allow the screen reader to speak the actual words for the acronym.

Numbers
When screen readers read a string of numbers, such as a phone number, they don't speak the numbers one at at time. There is no consensus on the best way to approach this issue, but there are some workarounds.

See Language Techniques Here

Flicker Rates

Flicker refers to images that flash or change from one thing to another in a certain frequency. If an image flashes a certain number of times per second (hertz), it could induce seizures in individuals with photosensitive epilepsy.

See Flicker Techniques Here

Email

Email is not one of the accessibility priorities, but it makes sense to give people who surf your site a way to contact you if they have a problem.

See Email Techniques Here

Back to top