Disability
Services for Students
Accessible Web Design - Frequently Asked Questions |
ContentsWhat is an Alt tag? And why do you always talk about it?Alt is a standard attribute of the Img element in HTML. [See the HTML specification for the definition of the Img element at http://www.w3.org/TR/html4/struct/objects.html#edef-IMG.] Alt tags are necessary for non-visual user agents, like Lynx, a popular text-only browser, and screen readers, to display information presented in a graphic. Alt tags are talked about so often in accessible web design discussions, because including them is the most important and easiest step toward making an accessible web page. Basically, you need to use the Alt attribute with every image. Without the Alt tag, a user who cannot see the image has no way whatsoever to know what the image shows. Even if the image is not important - a layout item, like a spacer or a list bullet, for example - the user has no way to know that that image is not important. Without knowledge of what each image on a page is, a user without visual access will not know whether he or she is missing an integral piece of information. So, what do I do with the Alt attribute?Like any HTML attribute, to use an Alt tag, you need to put it inside the Img element. A simple example is this: <img src='images/murray.jpg' border=2 width=160 height=120 alt="photo of my mother's dog lying down"> 
Notice that in many browsers - like Netscape and Internet Explorer - the Alt tag pops up like a 'tool tip' when you point the mouse over the image. What should I use as the Alt text?A good piece of advice I once heard is that you should think of the Alt text as the thing that you would say, if you were describing the image to someone over the phone. Both the length and treatment of the description depends of the particular image and on what role the image plays in the point you are making. There are four different types of images (that I have identified), each deserves a different treatment in respect to its Alt tag. These are:
Graphical TextThese are things like buttons and menu items that use images to show formatted text. For example, all of the text visible on the NC State Homepage falls under the category of "Graphical Text". It is best for Graphical Text to use the same text as in the graphic. For an image with the text "Home Page" use Alt="Home Page". An example with an image taken from http://www.cast.org/bobby/ is below*. <img src='images/bobby.gif' width=131 height=40 alt="Bobby Approved (v 3.2)">  *If you haven't ever seen it, Bobby is a great free tool to help you assess the accessibility of web pages. Filler GraphicsMany web pages use graphics to add an aesthetic quality. These images are here referred to as Filler Graphics. They perhaps add to the overall experience of the viewer, but the importance is in their presence and not their details. For Filler Graphics, the Alt text should be simple and short, and should simply describe the image. A good example of Filler Graphics is the image of the wolves on the NC State Homepage. Another example is the sample code of the dog above. If that code was in my personal homepage, perhaps in a section about my mother or her dog, that would be a perfectly acceptable Alt tag - as it tells the user what the image shows without going into explicit detail. 'Real' Graphics'Real' Graphics are those that provide important information relating to the overall message of the page. Say your web page is about cats and you add an image that shows a photograph of a cat. You need to provide equivalent information for what that photograph tells a sighted viewer. Returning to the dog example above, if that image were to be added to a web page about dogs, it would need a different Alt tag - one that gave the same information that the image provided graphically. The same is especially true of charts, graphs, graphics of mathematical equations, and so on. In fact, if you can't concisely describe the image or give sufficient equivalent information in about a sentence, you should provide a longdesc and a D-Link. Layout Items - Spacers, Bullets, and BordersOften Img elements are used to control layout and add the presentation of the information. These images do not provide any sort of content and therefore require Alt tags that provide the 'functional equivalent' in lieu of an actual description. The most important thing to remember with Alt tags for these types of images is to be consistent. You don't necessarily need to follow the exact recommendations below, but whatever you chose, use consistently. The major types of these Layout Items are:
Other Layout Items to which this applies include things like Horizontal Rules - in lieu of the HR element - and vertical dividers, since no element exists in HTML for vertical dividing lines. Note that the bullets used above are images, not UL elements, and demonstrate the second point. How do I add Alt text with Dreamweaver?Using Dreamweaver all you need to do to enter an Alt tag is select the image by clicking on it. Then enter the text into the box labeled Alt in the Properties window for that image. How do I add Alt text with FrontPage?An accessibility problem with FrontPage is that it automatically adds Alt tags when you do not specify them. While this may seem like a good thing, it's really quite the opposite. When FrontPage automatically gives an image an Alt tag, it uses for the text the name of the image file and the size of the image file. Not only is this not useful to the end user, but it is misleading as well, since some of the tools you can use to check the accessibility of your pages will think that those tags are acceptable. In any case, I'm digressing and dodging the real question, but it is important . . . To enter Alt text using FrontPage, right click on the image, then select Image Properties. From there, you should get a dialog where you can enter the appropriate text in the Alternative text field. (Actually, I've never used FrontPage and the advice above was passed on to me, please let me know if there are more specifics.) What's a longdesc? How's that different from a D-Link?Sometimes a graphic is too complex for an equivalent alternative to be given in a sentence or two. This is often the case with 'Real' Graphics, like charts or mathematical formulas. When this is the case, you need to provide a long description. The HTML specification for the Img element allows for a longdesc attribute. The longdesc contains the URL to a web page with a textual description of the image. To return to dog example: <img src='images/murray.jpg' border=2 width=160 height=120 alt="photo of my mother's dog lying down [with longdesc]" longdesc="http://www.foo.bar/this_is_the_longdesc_URL.html"> Theoretically, that will allow a user to follow a link from that image to a textual description giving equivalent content. Unfortunately, no current browsers support this attribute. Therefore, it has become common practice to use a descriptive link or D-Link. This is basically an additional text link that follows the image and provides a redundant link to the longdesc URL. This would look like: <img src='images/murray.jpg' border=2 width=160
height=120 alt="photo of my mother's dog lying down [with longdesc]" longdesc="http://www.foo.bar/this_is_the_longdesc_URL.html"> Note: The D-Link in the above example does not actually point to a page. A good example of the D-Link can be found on the Bobby page about the Bobby Approval Icons - see http://www.cast.org/Bobby/IconGuidelines317.cfm. Alternatively, if you need to provide more text than can properly fit in an Alt tag, but don't want to use extra Web pages, you could simply provide the extra text directly on the main page, say under the image, and note that in the image's Alt tag. 2. Tables in HTMLWhat do I need to do to make my Tables accessible?Well, that depends on what the table is being used for. There are basically two main uses of tables in HTML. These are (1) Data Tables and (2) Layout Tables. The HTML table element was designed for the purpose of providing tabular information (data), although, as graphical and layout intense sites gained popularity, the table element was 'adopted' as the easiest way to control layout. Data TablesTables used to present tabular data should make use of the correct HTML mark-up. Since many of the table attributes that are needed to ensure accessibility are non-visual - ie they do not produce visible effects on the page - it is easy to overlook them when designing your tables. For example:
The HTML for this table, with special mark-up highlighted in bold, is as follows: <table border=1 summary="This table provides
the number of students registered with Disability Services, by
disability, for the Fall 2001 and Spring 2002 semesters"> Of the highlighted elements and attributes above, notice that the caption element is the only thing that shows up visibly. The other attributes, summary and scope, provide non-visible information that helps users of alternative browsers and screen readers navigate and make sense of the table. The scope attribute is especially important in large data tables (bigger than this one), since scope allows screen reader users to determine their position in the table. Otherwise, a user might have no way to keep track of what the data he or she is currently hearing means. In addition to the mark-up demonstrated above, there are other ways you can ensure that your data tables are accessible. A good resource showing some simple examples of this is the Access Board's guide to the Section 508 standards (see http://www.access-board.gov/sec508/guide/1194.22.htm#(g)). Layout TablesMany many web pages now use tables to control layout. So many, in fact, that I'm sure this use outnumbers the use of data tables in HTML. Layout Tables require a different mentality altogether than their tabular counterparts. The key to making Layout Tables accessible, is that you need to make sure that the page will be read properly when the tables aren't supported. In other words, you need to make sure your Layout Tables linearize (or serialize) properly. What this means is that your layout tables will generally be read from the upper-left down to the bottom-right. For example, let's pretend that the following simple table controls the layout for a page.
Most screen readers and text-only browsers will read this page in the following order:
Note the difference now if our page was layed out like this:
Now this second table will be linearized like this:
While this second layout table may provide the same or a very similar look as the first (remember the borders were just there to illustrate the table cells), clearly, it will result in a confusing and difficult page to a user relying on a linearized output of the page. Namely, the content is all jumbled up with the navigation links - not only will it be more difficult for the user to nvavigate, but the content on the page may be too jumbled to make sense. Probably the easiest and best way to check your pages is to view your page with Lynx (see the Lynx section below for more about Lynx) or with the on-line accessibility checking tool, WAVE - available to use at http://www.temple.edu/inst_disabilities/piat/wave/. The WAVE tool will show your web page with a set of numbers highlighting the order the page is linearized. 3. NavigationWhat about navigation?There are some things you can do to your web site to improve its usability by people accessing it with non-visual browsers (like text-only browsers or screen readers). Often times these methods are very simple to implement and greatly enhance some people's experience at your site. One of the most effective ways to improve the usability of your site for users with disabilities is to adhere to the navigation considerations in the following sections. What's a 'skip to content' link and how do I make one?A 'skip to content' link is one of the best ways to improve the usability of your site for some users. See also: http://www.access-board.gov/sec508/guide/1194.22.htm#(o). A 'skip to content' link is generally a link at the very top of a web page that links internally to the main content of the page. This allows users of screen readers and other browsers that linearize the page (like Lynx) to skip ahead to the 'meat' of the page, just like a sighted user may skip over the page's logos and links by looking immediately at the content. Let's return to the layout table example from earlier:
A user reading this page with a screen reader would have to listen through Header, menu, link 1, link 2, and link 3 before finally getting to the content of the page (beginning with content header). Not only can this be cumbersome for this page alone, but say the user is jumping back and forth among many pages all with the same layout, but different content, he or she will often have to listen to the same Header and menu information over and over again before getting to the content. Including a skip to content link is a great way to help users skip over this recurring information. For example, we could insert this link at the top-left of the page so it's quickly read by a screen reader or seen with a text-only browser.
Skip to content in the above example would be a link to content header. The skip to content link might be coded as: <a href="#content">skip to content</a> And the content header would then need to be marked-up like: <a name="content">content header</a> In the above example the formatting was excluded. In addition to the normal formatting (like the H1, H2, or H3 element that you would most likely use to mark content header as a structural header), you can also use formatting to hide the skip to content link in a way that makes it non-obtrusive under graphical browsers. There are various ways to hide this link. The easiest is to give the text the same color as the page's background. For example, on a white background, you could color the text white. This would make the link invisible on browsers like Internet Explorer and Netscape, but screen readers would still read the text and text-only browsers that do not display page colors would display the text as normal*. Another method you can use to hide the link is to use a layout item graphic that is an internal link to the content with the Alt text as 'skip to content'. *Emacs/W3 (a text-only web browser for Emacs; see the Emacs/W3 homepage) obeys page colors and will hide this link. Lynx, however, will not show page colors and will therefore display the skip to content link correctly. For some good real world examples, see: http://lts.ncsu.edu, and http://www.cnn.com. You may wish to 'view source' and then search for 'skip' in the pages. For other working examples, I suggest searching Google for 'skip to content'. What should I use for the text of my links?The short answer is that you should use text that is meaningful and concise. You want to avoid non-specific statements, like 'click here' or 'more...'. A user of a screen reader tabbing through a page, for example, will have no idea which link to follow if each one simply says 'click here'. On the otherhand, you don't want text that is overly long and verbose, since some users will have to listen to that entire text before they can move on to a different link. For example, some simple code might be: <a href="#nav-linknames">Click here</a> for some pointers on link text. rendered: Click here for some pointers on link text. But something like the following would be better: Some <a href="#nav-linknames">pointers on link text</a> are available. rendered: Some pointers on link text are available. 4. Text-Only PagesWhat do I need to know about text-only pages?In terms of accessibility, a text-only version is generally considered to be a last ditch effort to make a site accessible. Most web pages can easily be made accessible (by properly using Alt text and being mindful of layout issues and so forth) without requiring a text version. Text-only versions can create a number of added concerns for both the developer and the end-user. Specifically, maintaining a separate text-only version of a site is a difficult task to coordinate and manage. Often text-only pages become overlooked as the content on the main pages is updated. Meanwhile, users tend not to rely on text-only pages, as the information on those pages is often out of date, incorrect, or simply incomplete. With that said, there are occasions where you may need to use a text-only version to make your site or page accessible. You also may chose to offer a text-only version for users with low bandwidth Internet connections (probably a better reason to consider one in my opinion). If you do offer your users a text-only version (for whatever reason), there are three main things you should do:
As a final note, the above concerns can be mostly solved by using a good content management system. AddendaLynxLynx is a text-only web browser. It is perhaps the most widely used text browser and is readily and freely available for most systems. Lynx can be used to test your pages for some types of accessibility problems, since it doesn't support images, tables, or scripting. If your pages do not make sense or are not navigable when viewed with Lynx, then they will also be inaccessible to many users - not just those who chose to web browse with Lynx. Lynx comes standard on all Unix/Linux installs (or at least most). It is also available for Windows (see http://lynx.browser.org/) and Macintosh (MacLynx - see http://www.lirmm.fr/~gutkneco/maclynx/). If you have an NC State Unity account, probably the easiest way to use Lynx from a Windows PC or Mac, is to telnet to unity.ncsu.edu. In most flavors of Windows, go to the Run... option in the Start menu and then type telnet unity.ncsu.edu. From a terminal, you type Lynx and the URL to view the page. For example, to browse NC State's homepage with Lynx, type Lynx http://www.ncsu.edu/. |
||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
Date Last Modified: November 17, 2004 by Ricky Lee |
||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
 | | | ||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
Spacers -
invisible images used to control page layout - use Alt="" (quote
quote).