Common HTML Attributes used by Screen Readers

These are some of the attributes that are designed specifically for screen reader users. Many times these are not spoken or visibly noticeable to a sighted user.

ALT Attribute

Often called an ALT tag, the ALT attribute is used to provide a text equivalent for an object or image. The ALT attribute actually has several tags defined for it, including:

Some browsers cannot actually display images so will display the ALT attribute text instead if it is available. Search engine bots also cannot see pictures on a Web page, so having the ALT attribute for images on a Web site helps them index it.

If the image is just a bullet or a line or other decoration it is OK to use the empty ALT attribute (e.g. alt=""), however the World Wide Web Consortium (W3C) says it is better to use the image in cascading style sheets (CSS) with list-style-image.

If the image needs more than a short description, use the LONGDESC attribute. The next section describes long descriptions.

Images and videos, however, can benefit those individuals who have difficulty with reading, so don't hesitate to use them -- just remember to give equivalent information in an alternate format.

The ALT attribute is also displayed visually in a tool tip when the user hovers a mouse over a graphic. Some browsers do not visually display the text that is present in the ALT attribute and instead, will use the TITLE attribute.

An example of HTML code showing the ALT attribute follows:


<img src="./images/sharkfooter-new.jpg" alt="Image of shark fin cutting through waves. End of main content of this page." title="Image of shark fin cutting through waves. End of main content of this page.">

Tables

While tables are used in HTML for everyone, not just screen reader users, there are some general rules for writing tables that help with accessibility for screen reader users. Here are some guidelines:

SUMMARY Attribute Deprecated in HTML 5 - New Recommendations

The SUMMARY attribute is deprecated in HTML 5, though still part of the code. It was originally designed to be descriptive and give an overview of the table. The newer recommendation is to include explanatory information introducing the table. This information is useful for all users, but is especially useful for users who cannot see the table, e.g. users of screen readers. You want to give the screen reader user a description of what is coming. Do not tell them how many rows and columns there are. The screen reader gives this information automatically. Instead, say something useful (e.g. "The column headers across the top of the table represent the months of the first quarter and the row headers in the first column represent the weeks within each month."). Do not just say something like "Table with first quarter earnings."

From the W3C recommendation, 4.9.1.1 Techniques for describing tables Opens a new window:

Such explanatory information should introduce the purpose of the table, outline its basic cell structure, highlight any trends or patterns, and generally teach the user how to use the table.

There are a variety of ways to include this information, such as:

Authors may also use other techniques, or combinations of the above techniques, as appropriate.

The table below uses the aria-describedby tag to give the equivalent of the summary tag information. The text is also included for sighted users, as it can be helpful for those with learning disabilities or other cognitive issues.

In this table, the name of the network is in the first column on the left side and the show times are in the first row across the top.

TV Listings with Both Column and Row Headers

8:00 PM 8:30 PM 9:00 PM 9:30 PM 10:00 PM 10:30 PM
ABC Grey's Anatomy Scandal How to Get Away with Murder
CBS The Big Bang Theory Mom Two and a Half Men The McCarthys Elementary
FOX Bones Gracepoint Local Programming
NBC The Biggest Loser Bad Judge A to Z Parenthood

TH Element

The table header element (TH) is used to define a header for a row or column that is not data itself. If the information in a cell contains data and could also be considered a header, the TD tag should be used.

HEADERS Attribute

The HEADERS attribute is used to specify which cells are considered to be headers for a given cell. The value can be a single cell id value or can also be a list of cell id values.

It is listed by the WCAG 2.0 as one of the techniques that can be used when data cells are associated with more than one row and/or one column header.
H43: Using id and headers attributes to associate data cells with header cells in data tables
1.3.1 Info and Relationships, Level A

ID Attribute

The ID attribute assigns a unique name to an element. It can be referred to by CSS and scripting languages and links can also be used to point to a specific id.

An example of HTML code showing a table summary, the use of TH elements, ID, HEADERS, and AXIS attributes follows:


<table border=1 cellpadding="5" cellspacing="1" summary = "A table that has the department in the first column, the employee name in the second column, and the employee's phone extension in the last column."> <caption> <h3>Employee Extensions and Departments</h3> </caption> <tr> <th scope="col">Department Name</th> <th scope="col">Employee Name</th> <th scope="col">Phone Extension</th> </tr> <tr> <td id="d1" axis="department">Shipping</td> <td headers=d1 id="empl1">John Smith</td> <td headers="empl1">543</td> </tr> <tr> <td id="d2" axis="department">Receiving</td> <td headers=d2 id="empl2">Lee Johnson</td> <td headers="empl2">123</td> </tr> <tr> <td id="d3" axis="department">Accounting</td> <td headers=d3 id="empl3">Sharon Jones</td> <td headers="empl3">222</td> </tr> </table>

AXIS Attribute Deprecated in HTML 5

The AXIS attribute is used to put a cell into a category. User agents can also be used to query all cells that belong to a certain category or multiple categories. The AXIS text is also spoken to screen reader users while navigating through the table.

Long Descriptions Deprecated in HTML 5

The LONGDESC attribute is used to give more information than normally would be put into an ALT attribute. Keep the ALT attributes relatively short and if more description is needed, use the LONGDESC attribute. The info is then kept in a separate HTML page that opens when the screen user activates the LONGDESC link. Recommendations now include giving more description in the surrounding text or creating a link in the text that opens a new page with the description.

An example of HTML code showing LONGDESC follows:


<img src="./images/MAGicwithMonitor.jpg" alt="An image of the MAGic package and CD with MAGic running on a monitor in the background." longdesc="./SampleFiles/MAGicPackageDescription.htm">

Of course, the separate file "MAGicPackageDescription.htm" would then contain more descriptive text than that contained in the ALT attribute.

NOTE: Since the new page for the long description opens in a new browser window, it may be helpful to put a note on the last line of text for the long description that reminds the user to close that window by pressing ALT+F4.

CONTEXTHELP Attribute, JAWS-specific

Web authors may now use the CONTEXTHELP attribute for form input or other focusable elements and JAWS tells the user when a field has such extra help whenever it exists. The user can choose to review the help using speech or braille with the key combination INSERT+F1, or ignore it. This is an attribute created by Freedom Scientific specifically for JAWS and MAGic. It may not work for other screen readers or magnification products unless they are specifically looking for it.

An example of HTML code showing the CONTEXTHELP attribute follows:


<label for=Mname>Mother's Name: </label> <br /> <input id="Mname" name="Mname" ContextHelp="For this field make sure you enter your mother's maiden name, not her married name.">

OnClick and OnMouseOver

It is recommended that onclick and onmouseover use be limited. While screen readers MAY announce them, not every screen reader user understands them or how to navigate using them. This is more of a usability issue than an accessibility issue, but if someone cannot access links because they do not know how to handle mouseovers and onclicks using their screen reader and a keyboard instead of a mouse, you may have just lost a customer.

Skip to Main Content Links

It is a good idea to use links designed for screen reader users that allow them to skip or jump past the repetitive information and links that are often at the top or side of many Web pages. Many Web developers use the term "skip navigation" but the recommended wording of these links is "skip to main content" because tests have shown that not all screen reader users understand the first term. Normally the skip to main content link is one of the first links near the top of the Web page. Often they are invisible to the sighted user, being attached to a spacer or other graphic that blends into the background of the Web page.

However, also consider that some users may not be able to use a mouse or regular keyboard and may use a typing stick held in the mouth or a switch device for input. Instead of forcing these users to press TAB to move past a navigation bar or grouping of links on your Web pages, if the "skip to main content" link is visible, the user of such devices can get to more meaningful content on your site quicker. Therefore you may notice that the "skip to main content" link on some pages is actually visible for all to use, not just hidden away for screen reader users.

For those Web page authors who really do not want a visible "skip" link, CSS can be used to hide it until a user presses the TAB key to move to it. At that point the link will become visible and can be used by sighted users.

Here is an example of a common skip to main content link:


<a href="#skip"> <img src="images/spacer10.gif"alt="Skip to Main Content"/> </a>

And here is an example of the code it jumps to further down on the page:


<p><a name="skip" id="skip"></a> Welcome to the Freedom Scientific Web site... </p>

Access Keys on Web Pages

Access Keys can be used on Web pages to move directly to a given spot on the page. If an Access Key combination is used to move to a form field or link, then you must press ENTER to go into forms mode.

NOTE: Be careful when using Access Keys, because if an Access Key is used to move to a button THE BUTTON WILL BE ACTIVATED!

EXERCISE: There are access keys on many pages to move you directly to certain spots on the page. For example, press ALT+B to move to the Back link or ALT+X to move to the Next link at the bottom of some pages. See the JAWS Help system for an example of this in use. What would happen if you used ALT+F as an access key? Why is this not good? Keyboard users cannot then use the keystroke to access the File menu. You have to be careful when using access keys not to use any keystroke that might be used by the native application. So, this is an example of how NOT to use this particular access key!

The author's preference for using access keys is to keep them to a minimum.

Abbreviations and Acronyms Deprecated in HTML 5

By default, JAWS reads the text visible on the screen. However, JAWS users may also choose to check for abbreviations or acronyms. When Expand Abbreviations or Expand Acronyms is checked, if a TITLE attribute is present for an abbreviation or an acronym, JAWS reads the TITLE text instead of the text that is visible on the screen. This can be done in one of two ways:

Individual Application

  1. Press INSERT+V to open the JAWS Quick Settings dialog box. Notice that the title bar should say the title of the application focus was in at the time you pressed the keystroke.
  2. Type expand in the search edit box. JAWS filters out all items that do not match the search in the tree view below.
  3. Press DOWN ARROW to move to the item "Abbreviations Expand, not checked," in the virtual cursor options, and then press SPACEBAR to toggle this to checked.
  4. Press DOWN ARROW to move to the item "Acronyms Expand, not checked," in the virtual cursor options, and then press SPACEBAR to toggle this to checked.
  5. Press TAB to move to the OK button, and then activate it with the SPACEBAR. The changes are saved and the JAWS Quick Settings dialog box closes.

Global for All Web Browsers

  1. Press INSERT+F2 to open the list of JAWS managers.
  2. Choose Settings Center.
  3. When Settings Center opens, press CTRL+SHIFT+D to open the default file.
  4. In the search edit box, type expand.
  5. Press DOWN ARROW to move to Expand Abbreviations or Expand Acronyms. Use the SPACEBAR to toggle the check mark on or off.
  6. Press TAB to move to the OK button, and activate it with the SPACEBAR.