May 13, 2008
Dianne Walker, OCIO–FPTIS
|
In the iNews article Tips for improving web accessibility published last October, three of the Top 10 Tips for Web Accessibility — use skip navigation, use heading elements, and use Cascading Style Sheets (CSS) — were described. This article continues with three more of the Top 10 Tips.
If a nontext element does not add meaning, then its use 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 alternative text within the alt attribute of the image element, whether that alternative text adds value or not. But if a nontext element does add meaning, then use the alt attribute, sometimes referred to as the alt tag, to include alternative text.
Nontext elements include images, graphical representations of text (including symbols), image map regions, animations (e.g., animated GIFs), applets and programmatic objects, ASCII art, frames, scripts, 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 or role 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 used, 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.
If color is used 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 actually can benefit people who are learning disabled, if color is used consistently. On the other hand, 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:
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:
Author's note: Thanks to the Berkeley WebAccess group for their help with this article!
[ iNews | Search | IST | UC Berkeley Computing | UC Berkeley ]
iNews: UC Berkeley information technology
news channels
Copyright 2007, The Regents of the University of
California