Common HTML Attributes used by Screen Readers

Common HTML Attributes used by Screen Readers

These are some of the attributes that are either designed specifically for screen reading programs or that screen reading programs can take advantage of to give their users more information. 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. Therefore, we recommend using both the ALT and TITLE attributes with identical text describing an image in order to allow mouse users of different browsers to display the descriptive text for images.

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

The SUMMARY attribute should be descriptive and give an overview of the table. Give the screen reader user a description of what is coming. Do not tell them in the summary 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."

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.

AXIS Attribute

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.

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>Department Name</th>
	<th>Employee Name</th>
	<th>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>

Long Descriptions

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.

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

Web authors may now use the CONTEXTHELP attribute for form input or other focusable elements and JAWS® screen reading software 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

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:

Temporary

  1. Press INSERT+V to open the Adjust JAWS options dialog box.
  2. Press A to move to the item "Abbreviations Expand - Off," and press SPACEBAR to toggle this to On.
  3. Press A to move to the item "Acronyms Expand - Off," and press SPACEBAR to toggle this to On.
  4. Press ENTER to close the Adjust JAWS options dialog box.

NOTE: This temporary change only remains in effect while focus is in Internet Explorer. As soon as focus switches to another application, both are set back to Off.

Permanent

  1. Press INSERT+F2 to open the list of JAWS managers.
  2. Choose Configuration manager
  3. Choose Set Options > HTML Options
  4. On the Text tab page, choose the checkbox for Expand Abbreviations or Expand Acronyms. Use the SPACEBAR to toggle the check mark on or off.
  5. Press ENTER to close the HTML Options dialog box.
  6. Press ALT+F4 to close Configuration manager and answer "Yes" to save the changes.


Last updated 2008/05/23