Accessibility & descriptions (tabindex, accesskey, alt, rel, rev, longdesc, summary, datetime, headers, scope, abbr, axis)

These attribute have purpose of helping browsers "understand" better the elements and their purpose in the document's flow. Sometimes they are used to help non-visual rendering of the document (such as speech or Braille) and sometimes they offer an alternative description of an element (such as an alt attribute inside an <image> tag).

Related elements:

tabindex attribute:

A, AREA, LINK, BASE, INPUT, OBJECT, SELECT, TEXTAREA

accesskey attribute:

A, AREA, BUTTON, INPUT, LABEL, LEGEND, TEXTAREA

alt attribute:

AREA, IMG, INPUT

rel attribute:

A, LINK

rev attribute:

A, LINK

summary attribute:

TABLE

headers attribute:

TD, TH

scope attribute:

TD, TH

axis attribute:

TD, TH

abbr attribute:

TD, TH

datetime attribute:

DEL, INS

Attribute characteristics and purpose:

tabindex attribute:

defines order in which elements get focused on during tabbing navigation
it is very suitable for tabbing between links or form fields
can be a number between 0 and 32767 (an integer) with the lowest numbers starting first

accesskey attribute:

defines an access key (a single character) that after being pressed gives a focus to an element
it is very suitable for links and form elements

alt attribute:

used as alternative text when image or form's input control cannot be displayed
<img />, <area /> - alt attribute has to be added but it doesn't have to be specified (i.e. it can be an empty string like alt="")

rel attribute:

describes relationship between current document and the referred one specified by the href attribute
can be used as a pointer to the following section or chapter in a main document
possible values are: alternate, stylesheet, start, next, prev, contents, index, glossary, copyright, chapter, section, subsection, appendix, help, bookmark

rev attribute:

describes a reverse link specified by the href attribute from the current document
in a combination with the rel attribute it can be a powerful tool for specifying the previous and next chapters in a sequel type of a document
possible values are: alternate, stylesheet, start, next, prev, contents, index, glossary, copyright, chapter, section, subsection, appendix, help, bookmark

summary attribute:

provides a summary of the table's purpose and / or structure

headers attribute:

specifies the list of headers cells that provide some header information for the current cell data
the value is space separated list of cell names that are named by their id attribute
mostly used for non-visual browsers and to help compute large tables during querying

scope attribute:

specifies the set of data cells for which the current header cell provides header information
for simple tables it can be used instead of the headers attribute
following values are allowed: row (current cell provides header information for the rest of the row that contains it), col (current cell provides header information for the rest of the column that contains it), rowgroup (header cell provides header information for the rest of the row group that contains it), colgroup (header cell provides header information for the rest of the column group that contains it)
mostly used for non-visual browsers and to help compute large tables during querying

axis attribute:

places a cell into conceptual category that are considered to be forming axes in an n-dimensional space
the value is comma separated list of category names
browsers may give users access to these categories
mostly used for non-visual browsers and to help compute large tables during querying

abbr attribute:

provides an abbreviated form of the cell's content
it might be rendered instead of the full content, depending on the browser

datetime attribute:

specifies the date and time when the change was made

Example

HTML accessibility attributes:

<html>

<head>
<title>HTML tutorial</title>
<link rel="Next" href="../../../img/tutorials/sample1.php" />
<link rel="Prev" href="../../../img/tutorials/sample2.php" />
<style type="text/css">
div {
	border:1px solid gray;
}
</style>
</head> 

<body><br />

<div>Example #1 &ndash; "tabindex" and "accesskey" attributes in a form:<br />
<form action="" method="post">
	<input tabindex="3" type="text" name="age" size="3" />
	<input tabindex="1" type="text" name="first name" size="12" />
	<input tabindex="2" type="text" name="last name" size="12" />
	<input tabindex="4" accesskey="alt-s" type="submit" name="submit" value="submit (alt-s)" />
</form>
</div><br />

<div>Example #2 &ndash; "alt" attribute<br />
<img src="noimage.jpg" alt="cannot find or load the image" />
</div><br />

<div>Example #3 &ndash; "summary, headers, scope, abbr and axis" attributes in a table:<br />
<table summary="Some names and addresses">
	<tr>
		<th id="fname">First Name</th>
		<th id="lname">Last Name</th>
		<th id="address">Address</th>
	</tr>
	<tr>
		<td scope="row">1</td>
		<td headers="fname" axis="name">John</td>
		<td headers="lname" axis="name">Smith</td>
		<td headers="address" abbr="address">1234 Some Street, apt #10, Louisville, KY, USA</td>
	</tr>
	<tr>
		<td scope="row">2</td>
		<td headers="fname" axis="name">Johny</td>
		<td headers="lname" axis="name">Smithy</td>
		<td headers="address" abbr="address">1234 Some Street, apt #20, Louisville, KY, USA</td>
	</tr>
</table>
</div><br />

<div>
<ins datetime="2009-01-08T22:55:03Z">inserted by: brenkoweb.com</ins>
</div>

<h6>NOTE:<br />Some properties won't be rendered as expected due browser incompatibilities or due fact that the editor is being processed as another page inserted inside the main one (i.e. "accesskey, tabindex").To understand better review the code itself.</h6>

</body>

</html>

›› go to examples ››

Accessibility & descriptions (tabindex, accesskey, alt, rel, rev, longdesc, summary, datetime, headers, scope, abbr, axis)

Related elements:

Attribute characteristics and purpose:

Example

HTML accessibility attributes:

Comments

About

Contact

Get Connected