Top Ten Tips for making your website accessible

The Berkeley Web Access Group, through hosting more than two dozen web developers on campus as well as referring to Section 508 standards, first developed the Top 10 Tips for a May 2006 Webnet presentation. We are continuing to update the tips as technology advances.

The Top 10 Tips

1. Provide a way for users to skip repetitive content.
2. Use heading elements properly.
3. Use Cascading Style Sheets (CSS) to control page layout.
4. Provide alternative text for nontext elements (e.g., images) when the nontext elements are meaningful.
5. Use color with care.
6. Give links unique names and make them descriptive.
7. Use “Go” or “Submit” buttons with select lists.
8. Include a well-positioned label for each field on a form.
9. Ensure that all content can be accessed with the keyboard alone in a logical way by using tab order.
10. Instead of providing a “text-only” alternative, work to make your primary website accessible.

1: Provide a way for users to skip repetitive content.

Many web sites use mastheads, navigation menus, search forms, and other sections that are identical across all pages. To prevent screenreader users from having to listen to these on each new page, your code should provide a way for them to skip to the unique content. Those who cannot use the mouse have a similar need to use their keyboard to skip over the repetitive content. (In some cases, the navigation linksare the most important elements on the page.)

One very efficient way to to accomplish this is by using heading elements properly (seeTip #2). Recent versions of browsers and screenreaders allow navigation by heading.

Another way is to use a “skip nav” or “skip to main content” link – a link with a local target just before the beginning of the main content. If you use skip nav links, keep them visible and at the top of the page. Skip nav links allow people using screen readers to move from the top of the page to the beginning of the “main content” of the page (whatever is deemed the “main content” or “most important”).

For more information, see:

• Jim Thatcher’s article, Skip Navigation Links.
• WebAIM’s article, “Skip Navigation” Links.

2: Use heading elements, <H1> to <H6>.

Since some users skim through a document by navigating its headings, it is important to use them appropriately to convey document structure. Order header elements properly. For example, in HTML, H2 elements should follow H1 elements, H3 elements should follow H2 elements, and so on. Content developers should not “skip” levels (e.g., H1 directly to H3). Use Cascading Style Sheets (CSS) instead of heading elements to change font sizes or styles.

Do not use heading elements as a quick way to format text. Use them to define your page’s organizational structure and simplify page navigation. Effective use of headings also promotes good indexing and searching using Google and other search engines.

For more information, see:

• The Web Content Accessibility Guidelines (WCAG) version 1.0, section 1.2.1, onstructural grouping.
• W3C’s write-up on heading elements and page structure.

3: Use Cascading Style Sheets (CSS) instead of tables to control page layout.

The strength of CSS lies in the ability to

• separate content from presentation and
• allow for more precise control over the layout.

With this control, you can change the linear layout of a page without affecting its visual layout, and vice versa. Linear layout refers to the order of elements in the source code of a web page. That is the order in which screen readers users hear the content, and the order in which any user tabs through links and form elements.

Sites created with CSS have more flexibility to adapt to different display devices – not only screen readers, but also mobile devices, small and large monitors, or any other display.

Sites created with CSS are also easier to maintain than sites created with tables: a change to the style sheet is promulgated across all pages at once. This helps maintain accessibility.

For more information:

• See WebAIM’s Overview of CSS.
• Jim Thatcher’s chapter on CSS is also helpful.
• CSS Zen Garden, “a demonstration of what can be accomplished visually through CSS-based design”, exemplifies how CSS can be used to make a website both more accessible and more usable with wonderful design.
• Layout Gala has 40 CSS layouts with validated HTML and CSS that help with managing headers, footers, nav bars, main content, and other parts of page structure.

4: Provide alternative text for nontext elements (e.g., images) when the nontext elements are meaningful and integral to the content of the page.

If an image or other nontext element adds meaning to the page, then use the alt attribute to provide alternative text. If it does not add meaning, then alternative text is superfluous to a screen-reader user; it simply slows the process down with no benefit because the screen-reading software vocalizes the content of the alt attribute, whether that alternative text adds value or not. For decorative images, leave the alt attribute empty as described below.

Nontext elements include images, graphical representations of text (including symbols), image map regions, animations (e.g., animated GIFs), applets and programmatic objects, ASCII art, images used as list bullets, spacers, graphical buttons, sounds (played with or without user interaction), stand-alone audio files, audio tracks of video, and video. When a short text equivalent, either alternative text in the alt attribute or a standard caption visible to sighted users as well, does not suffice to adequately convey the function of a nontext image, provide additional information in a file designated by the longdesc attribute.

If alternative text (either the alt or the longdesc attribute) is not needed, simply leave the quote marks with nothing between them, e.g.,

<img src=”/images/campanile.jpg” height=”35″ width=”10″ alt=”" />

Bonus tip about buttons: make sure the label on the button is the same as the alternative text. This facilitates user help desk interactions, e.g., “Press the ‘submit’ button!” “I don’t see a ‘submit’ button; I only see a ‘go’ button!”

For more information:

• WebAIM has a comprehensive, in-depth discussion on the use of the alt attribute.
• Dive into Accessibility’s 30-day course on making websites accessible has a section,Day 23, on using the alt attribute.Caveat: At the top of Day 23, there is a statement that all images need alternative text. Keep your alternative texting to meaningful images.

5: Use color with care.

If your site uses color to impart meaning, for instance, green always means “go”, while red means “stop”, that meaning could be lost to a person with vision impairment — including the estimated nine percent of men who are color deficient or color blind. (The greatest color deficiency is around red and green.) Color contrast is also important: the eye must work harder (and therefore becomes tired more easily) if low-contrast background colors are used, for example, to separate columns in a page. Higher-contrast color combinations, or a simple line, are more effective in differentiating sections of a web page.

Caveat: A “dueling disability” is when the “fix” for one type of disability cancels out a benefit to another disability type. A perfect example of dueling disabilities related to web accessibility is that associating color with meaning benefits people who are learning-disabled, if color is used consistently. It’s fine and can even be desirable to use color coding to connote meaning IF other, redundant coding is also used, e.g., object shape or type style. Use color with care — and awareness.

For more information:

• See Type and Colour, Joe Clark’s comprehensive discussion of color deficiency (also known as “color blindness”) and other issues related to color contrast.
• Juicy Studio’s Colour Contrast Analyzer provides more examples of color contrasts that are effective.
• The University of Washington’s Disabilities, Opportunities, Internetworking, and Technology (DO-IT) website has links to other helpful articles on color contrast such asColour Blindness and Link Colours, andEffective Color Contrast.
• The Ishihara Test for Color Blindness on Frank Dutton’s site about color deficiency is another helpful resource.

6: Give links unique names and make them descriptive (a.k.a. “the click-here guideline” or “the more…guideline”).

Screen readers recognize links and make them searchable. Unique names facilitate that search.

If, for example, a page consists of links to PDF files that are all related to the same subject, for instance, graduate students, avoid naming them all “Graduate students: [Topic A],” then “Graduate students: [Topic B].” Instead, use the topic name itself: “A,” then “B,” and so on. Avoid repetitions.

In addition to making a link’s name unique, make it descriptive so that it is understood out of context. Screen-reader users can adjust their software to read only the links on a page. For this reason, links should provide enough information when read out of context. Use a more descriptive phrase than “click here” or “more” as a link or next to a graphic used as a link. For example:

<a href=”about.htm”>Click here</a> for information about our company.

will present “Click here” as the link. However,

<a href=”about.htm”>Information about our company.</a>

will present “Information about our company” to a screen-reader user. Descriptive text is displayed as the link.

Finally, if a single page contains links with the same name, they should point to the same location; otherwise, the user will be confused.

For more information:

• Point 4.3 in the Accessible Navigation section of Jim Thatcher’sWeb Accessibility for Section 508 tutorial describes some of the unintended consequences of link naming.

7: Use “Go” or “Submit” buttons with select lists.

Select lists are a commonly-used form of navigation, often presented as a list of “quick links” that provide immediate access to diverse sections of a site using an HTML form element. If used without an associated button, they severely hamper screenreader users or anyone using the keyboard to navigate.

If there is no separate “Go” or “Submit” (or any other clear title) button that activates the chosen item in a select list, then whichever choice is encountered first by a screen reader will be activated. This has the unfortunate effect of sending the screen reader or keyboard user to the first option in the list before they can see what the other options are.

Place a “Go” or “Submit” button immediately after select lists so that the user can see all of the options first, then “submit” it.

For more information:

• Jim Thatcher’s tutorial on accessible forms, Accessible forms, goes into even more detail on forms, including suggestions for using “Go” and “Submit” buttons.

8: Include a well-positioned label for each field on a form (a.k.a. “the ‘what-am-I-supposed-to-fill-in-here?’ guideline”)

For blind or low-vision Web users, it is really frustrating not to know what information is required in a text field on a form. In the case of checkboxes and radio buttons, it is equally frustrating not to know if the box that is checked or button that is chosen is actually the one associated with the correct label. This happens because of the misplacement of the associated labels or because labels are missing altogether. Think of a form asking for address information where there are three lines provided for the street address and only the first line is labeled, e.g., “Street address”. Label placement is critical.

Label each field and place the label close to the field, usually immediately to the left or immediately to the right (although left is preferred) of the field to be filled in. The linearized view that the screen reader uses may not help the user understand whether the label applies to the field before it or the field after it. Using the<label> tag and the title attribute for form elements solves the problem of not knowing which field the text label applies to.

For more information:

• Jim Thatcher’s tutorial on accessible forms, Accessible forms, goes into even more detail on forms, including suggestions for labeling text entry fields, and for using radio buttons and checkboxes.

9: Ensure that all content can be accessed with the keyboard alone in a logical way by using tab order.

WebAIM describes why tab order is important:

Keyboard accessibility is one of the most important aspects of disability access. Blind people generally cannot use a mouse because they cannot see where to click. They use their keyboard almost exclusively. (Some legally blind people have limited residual vision which allows them the use of a mouse if the page is enlarged and the contrast is high.)

Some individuals with neuromuscular impairments cannot use a mouse either. Some have tremors which don’t allow for fine muscle control. Others have little or no use of their hands, due to a spinal cord injury, brain damage, or some other cause. Some people simply do not have hands… There is an almost limitless list of conditions that could make mouse usage difficult or impossible.

Those who cannot use a mouse may not be able to use a keyboard either. Some use “puff and sip” devices activated by airflow from the mouth. Others use single-switch devices — consisting of a piece of hardware with one button that can be pushed. These devices are sometimes configured to interpret Morse code, which the person performs by tapping on it. One thing that all of these devices have in common is that they interact with the computer in a way that mimics the functionality of the keyboard. If a website is not keyboard-accessible, you will shut many people out.

Test the tab order by using the tab key exclusively to move through your page. If you need to, rearrange the content, change the style sheet, or do both. The most important thing is that the tab order should make sense.

For more information:

• See W3C’s information on tab order, Keyboard access to forms and Keyboard access.
• WebAIM has a useful discussion on keyboarding that includes information about tab order. SeeKeyboard accessibility: Introduction to keyboard accessibility.
• At the same time, WebAIM does not recommend using the tabindex attribute. SeeKeyboard accessibility: Altering the default tab order usingtabindex for this discussion.

10: Instead of providing a “text-only” alternative, work to make your primary website accessible.

Many sites provide a text-only version of their pages. While the text version is useful in some ways, for example as a printer-friendly option, “text-only” is not an accessibility solution.

Text-only versions do not help mobility-impaired users, and they are less accessible for anyone with cognitive disabilities.

Instead of using limited resources to maintain mirror sites, concentrate on the previous top nine tips!