|
|
|
Accessibility Guidelines
This page describes techniques for authoring accessible HTML Web content to conform to Web Content Accessibility Guidelines 1.0. The content on this page has been summarised from the W3C site to include only the content that is directly relevant to maintainers of the University of Melbourne website. For the complete set of HTML Techniques refer to the HTML Techniques for Web Content Accessibility Guidelines 1.0 page on the W3C site.
Table of Contents
the proper html elements should be used to mark up emphasis: em and strong. the b and I elements should not
be used; they are used to create a visual presentation effect. the EM and strong elements were designed to indicate structural emphasis that may be rendered in a variety of ways (font style changes, speech inflection changes, etc.)
Mark up abbreviations and acronyms with abbr and acronym and use "title" to indicate the expansion:
Example. <p>Welcome to the <acronym title="World Wide Web">WWW</acronym>!
End example.
this also applies to shortened phrases used as headings for table row or columns. If a heading is already abbreviated provide the expansion in abbr. If a heading is long, you may wish to provide an abbreviation, as described in Data tables.
Example. ...
<th>First name</th>
<th><abbr title="Social Security Number">SS#</abbr>
...
End example.
the Q and blockquote elements mark up inline and block quotations, respectively.
Example.
this example marks up a longer quotation with blockquote: <blockquote cite="http://www.example.com/loveslabourlost">
<p>Remuneration! O! that's the Latin word for three farthings.
--- William Shakespeare (Love's Labor Lost).
</p>
</blockquote>
End example.
the html 4.01 specification defines the following structural elements for miscellaneous markup needs:
- cite
- Contains a citation or a reference to other sources.
- dfn
- Indicates that this is the defining instance of the enclosed term.
- code
- Designates a fragment of computer code.
- samp
- Designates sample output from programs, scripts, etc.
- kbd
- Indicates text to be entered by the user.
- var
- Indicates an instance of a variable or program argument.
- ins
- Indicates text inserted into a document.
- del
- Indicates text deleted from a document.
the html list elements dl, ul, and ol should only be used to create lists, not for formatting effects such as indentation.
this section discusses the accessibility of tables and elements that one can put in a table element. Two types of tables are discussed: tables used to organize data, and tables used to create a visual layout of the page.
Content developers may make html 4.01 data tables more accessible in a number of ways:
- Providing summary information
- Identifying row and column information
- Provide summaries for tables.
- Provide abbreviations for header labels.
- Provide a caption via the caption element. A table caption describes the nature of the table in one to three sentences. Two examples:
- "Cups of coffee consumed by each senator."
- "Who spends the most on pollution cleanup?"
A caption may not always be necessary.
- If a caption is not provided, use the "title" attribute on the table element to describe the nature of the table in a few words.
- Provide a summary via the "summary" attribute. Summaries are especially useful for non-visual readers. A summary of the relationships among cells is especially important for tables with nested headings, cells that span multiple columns or rows, or other
relationships that may not be obvious from analyzing the structure of the table but that may be apparent in a visual rendering of the table. A summary may also describe how the table fits into the context of the current document. If no caption is provided, it is even more critical to provide a summary. Two examples:
- "this table charts the number of cups of coffee consumed by each senator, the type of coffee (decaf or regular), and whether taken with sugar."
- "Total required by pollution control standards as of January 1, 1971. Commercial category includes stores, insurance companies and banks. the table is divided into two columns. the left-hand column is 'Total investment required in billions of dollars'. the right--hand column is 'Spending' and is divided into three sub-columns. the first sub-column is titled '1970 actual in millions of dollars', the second is '1971 planned in millions of dollars', and the third is 'Percent change, 1970 versus 1971.' the rows are industries." [NBA, 1996].
- Provide terse substitutes for header labels with the "abbr" attribute
on th. these will be particularly useful for future speaking technologies that can read row and column labels for each cell. abbreviations cut down on repetition and reading time.
- For data tables, identify row and column headers.
- For data tables that have two or more logical levels of row or column headers, use markup to associate data cells and header cells.
- Identify structural groups of rows (thead for repeated table headers, tfoot for repeated table footers, and tbody for other
groups of rows) and groups of columns (colgroup and col).
- Label table elements with the "scope", "headers", and "axis" attributes so that future browsers and assistive technologies will be able to select data from a table by filtering on categories.
- Do not use pre to create a tabular layout of text -- use the table element so that assistive technologies may recognize that it is a table.
- For information about table headers, refer to the table header algorithm and discussion in the html 4.01 Recommendation
Example.
this example shows how to associate data cells (created with td) with their
corresponding headers by means of the "headers" attribute. the "headers" attribute specifies a list of header cells (row and column labels) associated with the current data cell. this requires each header
cell to have an "id" attribute.
<table border="1"
summary="this table charts the number of
cups of coffee consumed by each senator,
the type of coffee (decaf or regular),
and whether taken with sugar.">
<caption>Cups of coffee consumed by each senator</caption>
<tr>
<th id="header1">Name</th>
<th id="header2">Cups</th>
<th id="header3" abbr="Type">Type of Coffee</th>
<th id="header4">Sugar?</th>
<tr>
<td headers="header1">T. Sexton</td>
<td headers="header2">10</td>
<td headers="header3">Espresso</td>
<td headers="header4">No</td>
<tr>
<td headers="header1">J. Dinnen</td>
<td headers="header2">5</td>
<td headers="header3">Decaf</td>
<td headers="header4">Yes</td>
</table>
End example.
A speech synthesizer might render this tables as follows:
Caption: Cups of coffee consumed by each senator
Summary: this table charts the number of cups of coffee
consumed by each senator, the type of coffee
(decaf or regular), and whether taken with sugar.
Name: T. Sexton, Cups: 10, Type: Espresso, Sugar: No
Name: J. Dinnen, Cups: 5, Type: Decaf, Sugar: Yes
- Do not use tables for layout unless the table makes sense when linearized. Otherwise, if the table does not make sense, provide an alternative equivalent (which may be a linearized version).
- If a table is used for layout, do not use any structural markup for the purpose of visual formatting.
Authors should use style sheets for layout and positioning. However, when it is necessary to use a table for layout, the table must linearize in a readable order. When a table is linearized, the
contents of the cells become a series of paragraphs (e.g., down the page) one after another. Cells should make sense when read in row order and should include structural elements (that create paragraphs, headings, lists, etc.) so the page makes sense after linearization.
Also, when using tables to create a layout, do not use structural markup to create visual formatting. For example, the th (table header) element, is usually displayed visually as centered, and bold. If a cell is not actually a header for a row or column of data, use style sheets or formatting attributes of the element.
- Clearly identify the target of each link.
Good link text should not be overly general; don't use "click here." Not only is this phrase device-dependent (it implies a pointing device) it says nothing about what is to be found if the link if followed. Instead of "click here", link text should indicate the nature of the link target, as in "more information about sea lions" or "text-only version of this page".
In addition to clear link text, content developers may specify a value of the "title" attribute that clearly and accurately describes the target of the link.
If more than one link on a page shares the same link text, all those links should point to the same resource. Such consistency will help page design as well as
accessibility.
If two or more links refer to different targets but share the same link text, distinguish the links by specifying a different value for the "title" attribute of each A element.
"Auditory users" -- people who are blind, have difficulty seeing, or who are using devices with small or no displays -- are unable to scan the page quickly with their eyes. To get an overview of a page or to quickly find a link, these users will often tab from one link to the next or review a list of available links on a page.
thus, for a series of related links, include introductory information in the first link, then distinguishing information in the links that follow. this will provide context information for users reading them in sequence.
Example.
<a href="my-doc.html">My document is available in html</a>,
<a href="my-doc.pdf" title="My document in PDF">PDF</a>,
<a href="my-doc.txt" title="My document in text">plain text</a>
End example.
- Provide a text equivalent for every non-text element (e.g., via "alt", "longdesc", or in element content). this includes: 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 an image is used as the content of a link, specify a text equivalent for the image.
Example.
<a href="routes.html">
<img src="topo.html"
alt="Current routes at Boulders Climbing Gym">
</a>
End example.
Or, if you provide link text, use a space as the "alt" attribute value of the img element. Note that this text will appear on the page next to the image.
Example.
<a href="routes.html">
<img src="topo.html" alt=" ">
Current routes at Boulders Climbing Gym
</a>
End example.
- Until user agents (including assistive technologies) render adjacent links distinctly, include non-link, printable characters (surrounded by spaces) between adjacent links.
When links are grouped into logical sets (for example, in a navigation bar that appears on every page in a site) they should be marked up as a unit. Navigation bars are usually the first thing someone encounters on a page. For users with speech synthesizers, this means having to hear a number of links on
every page before reaching the interesting content of a page. there are several ways to allow users to bypass groups of links (as users with vision do when they see the same set on each page):
- Include a link that allows users to skip over the set of navigation links.
- Create a logical tab order through links, form controls, and objects.
- Provide keyboard shortcuts to important links (including those in client-side image maps), form controls, and groups of form controls.
Keyboard access to active elements of a page is important for many users who cannot use a pointing device. User agents may include features that allow users to bind keyboard strokes to certain actions. html 4.01 allows content developers to specify keyboard shortcuts in documents via the "accesskey" attribute.
Example.
In this example, if the user activates the "C" key, the link will be followed.
<a accesskey="C" href="doc.html" hreflang="en"
title="XYZ company home page">
XYZ company home page</a>
End example.
- Until user agents allow users to turn off spawned windows, do not cause pop-ups or other windows to appear and do not change the current window without informing the user.
If a link is required to open a new browser window use the following code. Note that the title text conveys information about the link and warns the user of the intended action.
Example.
In this example, if the user selects the link, a new browser window will opened.
<a href="http://www.abc.net.au/test/doc.html"
title="[external site] www.abc.net.au [opens new browser window]"
onclick="this.target='_blank';">
document at www.abc.net.au</a>
End example.
Sample link:document at www.samplesite.net.au
the following sections discuss accessibility of images (including simple animations such as GIF animations) and image maps.
- Provide a text equivalent for every non-text element (e.g., via "alt", "longdesc", or in element content). this includes: 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 using img, specify a short text equivalent with the "alt" attribute. Note. the value of this attribute is referred to as
"alt-text".
Example. <img src="magnifyingglass.gif" alt="Search">
End example.
- Provide a text equivalent for every non-text element (e.g., via "alt", "longdesc", or in element content). this includes: 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 does not suffice to adequately convey the function or role of an image, provide additional information in a file designated by the "longdesc"
attribute:
Example. <img src="97sales.gif" alt="Sales for 1997"
longdesc="sales97.html">
In sales97.html:
A chart showing how sales in 1997 progressed. the chart
is a bar-chart
showing percentage increases in sales
by month. Sales in January were up
10% from December 1996,
sales in February dropped 3%, ..
End example.
- Provide a means to skip over multi-line ASCII art.
Avoid ASCII art (character illustrations) and use real images instead since it is easier to supply a text equivalent for images. However, if ASCII art must be used provide a link to jump over the ASCII art, as follows.
Example. <p>
<a href="#post-art">skip over ASCII art</a>
<!-- ASCII art goes here -->
<a name="post-art">caption for ASCII art</a>
End example.
ASCII art may also be marked up as follows [skip over ASCII figure or consult a description of chart:
Example.
% __ __ __ __ __ __ __ __ __ __ __ __ __ __
100 | * |
90 | * * |
80 | * * |
70 | @ * |
60 | @ * |
50 | * @ * |
40 | @ * |
30 | * @ @ @ * |
20 | |
10 | @ @ @ @ @ |
0 5 10 15 20 25 30 35 40 45 50 55 60 65 70
Flash frequency (Hz)
End example.
Another option for smaller
ascii art is to use an abbr element with
"title".
Example. <p><abbr title="smiley in ASCII art">:-)</abbr>
End example.
If the ASCII art is complex, ensure that the text equivalent adequately describes it.
Another way to replace ASCII art is to use human language substitutes. For example, <wink> might substitute for a winking smiley: ;-). Or, the word "therefore" can replace arrows consisting of dashes and greater than signs (e.g., -->), and the word "great" for the uncommon abbreviation "gr8".
An image map is an image that has "active regions". When the user selects one of the regions, some action takes place -- a link may be followed, information may be sent to a server, etc. To make an image map accessible, content developers must ensure that each action associated with a visual region may be
activated without a pointing device.
Image maps are created with the MAP element. html allows two types of image maps: client-side (the user's browser processes a URI) and server-side (the server processes click coordinates). For all image maps, content developers must supply a text equivalent.
Content developers should create client-side image maps (with "usemap") rather than server-side image maps (with "ismap") because server-side image maps require a specific input device. If server-side image maps must be used (e.g., because the geometry of a region cannot be represented with values of the shape attribute), authors must provide the same functionality or information in an alternative accessible format. One way to achieve this is to provide a textual link for each active region so that each link is navigable with the keyboard. If you must use a server-side image map, please consult the section on server-side image maps
- Provide a text equivalent for every non-text element (e.g., via "alt", "longdesc", or in element content). this includes: 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.
Provide text equivalents for image maps since they convey visual information. As with other links, the link text should make sense when read out of context. Refer to the section on Link Text for information on writing good link text. Users may also want keyboard shortcuts to access frequently followed links. Refer to the section on Keyboard access to links.
- Provide client-side image maps instead of server-side image maps except where the regions cannot be defined with an available geometric shape.
- Provide redundant text links for each active region of a server-side image map.
When a server-side image map must be used, content developers should provide an alternative list of image map choices. there are three techniques:
- Include the alternative links within the body of an object element
(refer to the previous example illustrating links in the object element).
- If img is used to insert the image, provide an alternative list of links after it and indicate the existence and location of the alternative list (e.g., via that alt" attribute).
Example.
<a href="http://www.example.com/cgi-bin/imagemap/my-map">
<img src="welcome.gif" alt="Welcome! (Text links follow)" ismap>
</a>
<p>[<a href="reference.html">Reference</a>]
[<a href="media.html">Audio Visual Lab</a>]
End example.
- If other approaches don't make the image map accessible, create an alternative page that is accessible.
Server-side and client-side image maps may be used as submit buttons in Forms.
- Ensure that foreground and background color combinations provide sufficient contrast when viewed by someone having color deficits or when viewed on a black and white screen.
- Until user agents allow users to freeze moving content, avoid movement in pages.
this section discusses the accessibility of scripts included in a document via the script
element.
- Ensure that dynamic content is accessible or provide an alternative presentation or page.
Content developers must ensure that pages are accessible with scripts turned off or in browsers that don't support scripts.
- Avoid creating content on the fly on the client. If a user's browser does not handle scripts, no content will be generated or displayed. However, this is different than displaying or hiding already existing content by using a combination of style sheets and scripting; if there is no script, then the
content is always shown. this also does not rule out generating pages on the fly on the server-side and delivering them to the client.
- Avoid creating links that use "javascript" as the URI. If a user is not using scripts, then they won't be able to link since the browser can't create the link content.
- Until user agents allow users to control flickering, avoid causing the screen to flicker.
- Until user agents allow users to control blinking, avoid causing content to blink (i.e., change presentation at a regular rate, such as turning on and off).
- Until user agents allow users to freeze moving content, avoid movement in pages.
- For scripts and applets, ensure that event handlers are input device-independent.
- Ensure that pages are usable when scripts, applets, or other programmatic objects are turned off or not supported. If this is not possible, provide equivalent information on an alternative accessible page.
- Make programmatic elements such as scripts and applets directly accessible or compatible with assistive technologies [Priority 1 if functionality is important and not presented elsewhere, otherwise
- For scripts, specify logical event handlers rather than device-dependent event handlers.
An event handler is a script that is invoked when a certain event occurs (e.g, the mouse moves, a key is pressed, the document is loaded, etc.). In html 4.01, event handlers are attached to elements via event handler attributes (the attributes beginning with "on", as in
"onkeyup").
Some event handlers, when invoked, produce purely decorative effects such as highlighting an image or changing the color of an element's text. Other event handlers produce much more substantial effects, such as carrying out a calculation, providing important information to the user, or submitting a form.
For event handlers that do more than just change the presentation of an element, content developers should do the following:
- Use application-level event triggers rather than user interaction-level triggers. In html 4.01, application-level event attributes are "onfocus", "onblur" (the opposite of "onfocus"), and "onselect". Note that these attributes are designed to be device-independent, but are implemented as
keyboard specific events in current browsers.
- Otherwise, if you must use device-dependent attributes, provide redundant input mechanisms (i.e., specify two handlers for the same element):
- Use "onmousedown" with "onkeydown".
- Use "onmouseup" with "onkeyup"
- Use "onclick" with "onkeypress"
Note that there is no keyboard equivalent to double-clicking ("ondblclick") in html 4.01.
- Do not write event handlers that rely on mouse coordinates since this
prevents device-independent input.
- Provide a text equivalent for every non-text element (e.g., via "alt", "longdesc", or in element content). this includes: 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.
- Ensure that equivalents for dynamic content are updated when the dynamic content
changes.
One way to accomplish this is with the noscript element. the content of this element is rendered when scripts are not enabled.
Example.
<script type="text/tcl">
...some Tcl script to show a billboard of sports scores...
</script>
<noscript>
<p>Results from yesterday's games:</P>
<DL>
<DT>Bulls 91, Sonics 80.
<DD><a href="bullsonic.html">Bulls vs. Sonics game highlights</a>
...more scores...
</DL>
</noscript>
End example.
- Until user agents provide the ability to stop the refresh, do not create periodically auto-refreshing pages.
- Until user agents provide the ability to stop auto-redirect, do not use markup to redirect pages automatically. Instead, configure the server to perform redirects.
- Until user agents allow users to turn off spawned windows, do not cause pop-ups or other windows to appear and do not change the current window without informing the user. If a new browser window is required to open refer to the section Anchors and targets.
- Avoid deprecated features of W3C technologies.
this index lists all elements in html 4.01. the first column of this table links to the definition of the element in the html 4.01 specification. Elements that are deprecated in html 4.01 are followed by an asterisk (*). Elements that are obsolete in html 4.01 or don't exist in a W3C specification of html (2.0, 3.2, 4.01) do not appear in this table.
the second column indicates other W3C specifications for html that included each element. the third column indicates the element's role.
the last column lists the sections in the current document where the element is discussed. An entry of "N/A" means that the element is not discussed in this document.
| Element name |
Defined also in |
Role |
Techniques |
| a |
2.0, 3.2 |
Structure |
N/A |
| abbr |
|
Structure |
N/A |
| acronym |
|
Structure |
N/A |
| address |
2.0, 3.2 |
Metadata |
N/A |
| applet* |
3.2 |
Replaced |
N/A |
| area |
3.2 |
Structure |
N/A |
| b |
2.0, 3.2 |
Presentation |
N/A |
| base |
2.0, 3.2 |
Processing |
N/A |
| basefont* |
3.2 |
Presentation |
N/A |
| bdo |
|
Processing |
N/A |
| big |
3.2 |
Presentation |
N/A |
| blockquote |
2.0, 3.2 |
Structure |
N/A |
| body |
2.0, 3.2 |
Structure |
N/A |
| br |
2.0, 3.2 |
Presentation |
N/A |
| button |
|
Structure |
N/A |
| caption |
3.2 |
Structure |
N/A |
| centre* |
3.2 |
Presentation |
N/A |
| cite |
2.0, 3.2 |
Structure |
N/A |
| code |
2.0, 3.2 |
Structure |
N/A |
| col |
|
Structure |
N/A |
| colgroup |
|
Structure |
N/A |
| dd |
2.0, 3.2 |
Structure |
N/A |
| del |
|
Metadata |
N/A |
| dfn |
3.2 |
Structure |
N/A |
| dir* |
2.0, 3.2 |
Structure |
N/A |
| div |
3.2 |
Structure |
N/A |
| dl |
2.0, 3.2 |
Structure |
N/A |
| dt |
2.0, 3.2 |
Structure |
N/A |
| em |
2.0, 3.2 |
Structure |
N/A |
| fieldset |
|
Structure |
N/A |
| font* |
3.2 |
Presentation |
N/A |
| form |
2.0, 3.2 |
Structure |
N/A |
| frame |
|
Replaced |
N/A |
| frameset |
|
Presentation |
N/A |
| h1 |
2.0, 3.2 |
Structure |
N/A |
| head |
2.0, 3.2 |
Structure |
N/A |
| hr |
2.0, 3.2 |
Presentation |
N/A |
| html |
2.0, 3.2 |
Structure |
N/A |
| i |
2.0, 3.2 |
Presentation |
N/A |
| iframe |
|
Replaced |
N/A |
| img |
2.0, 3.2 |
Replaced |
N/A |
| input |
2.0, 3.2 |
Structure |
N/A |
| ins |
|
Metadata |
N/A |
| isindex* |
2.0, 3.2 |
Structure |
N/A |
| kbd |
2.0, 3.2 |
Structure |
N/A |
| label |
|
Structure |
N/A |
| legend |
|
Structure |
N/A |
| li |
2.0, 3.2 |
Structure |
N/A |
| link |
2.0, 3.2 |
Metadata |
N/A |
| map |
3.2 |
Structure |
N/A |
|
2.0, 3.2 |
Structure |
N/A |
| meta |
2.0, 3.2 |
Metadata |
N/A |
| noframes |
|
Alternative |
N/A |
| noscript |
|
Alternative |
N/A |
| object |
|
Replaced |
N/A |
| ol |
2.0, 3.2 |
Structure |
N/A |
| optgroup |
|
Structure |
N/A |
| option |
2.0, 3.2 |
Structure |
N/A |
| p |
2.0, 3.2 |
Structure |
N/A |
| param |
3.2 |
Processing |
N/A |
| pre |
2.0, 3.2 |
Presentation |
N/A |
| q |
|
Structure |
N/A |
| s* |
|
Presentation |
N/A |
| samp |
2.0, 3.2 |
Structure |
N/A |
| script |
3.2 (Dtd) |
Processing |
N/A |
| select |
2.0, 3.2 |
Structure |
N/A |
| small |
3.2 |
Presentation |
N/A |
| span |
|
Structure |
N/A |
| strike* |
3.2 |
Presentation |
N/A |
| strong |
2.0, 3.2 |
Structure |
N/A |
| style |
3.2 (Dtd) |
Processing |
N/A |
| sub |
3.2 |
Presentation |
N/A |
| sup |
3.2 |
Presentation |
N/A |
| table |
3.2 |
Structure |
N/A |
| tbody |
|
Structure |
N/A |
| td |
3.2 |
Structure |
N/A |
| textarea |
2.0, 3.2 |
Structure |
N/A |
|
|
Structure |
N/A |
| th |
3.2 |
Structure |
N/A |
| thead |
|
Structure |
N/A |
| title |
2.0, 3.2 |
Metadata |
N/A |
| tr |
3.2 |
Structure |
N/A |
| tt |
2.0, 3.2 |
Presentation |
N/A |
| u* |
3.2 |
Presentation |
N/A |
| ul |
2.0, 3.2 |
Structure |
N/A |
| var |
2.0, 3.2 |
Structure |
N/A |
this index lists some attributes in html 4.01 that affect accessibility and what elements they apply to. the first column of this table links to the definition of the attribute in the html 4.01 specification [html4]. Attributes and elements that are deprecated in html 4.01 [html4] are followed by an asterisk (*). Attributes and elements that are obsolete in html 4.01 or don't exist in a W3C specification of html (2.0, 3.2, 4.01) do not appear in this table. Attributes that apply to most elements of html 4.01 are indicated as such; please consult the html 4.01 specification for the exact list of elements with this attribute.
the second column indicates other W3C specifications for html that included each attribute. the third column indicates the elements that take each attribute. the fourth column indicates the attribute's role.
the last column lists the sections in the current document where the attribute is discussed. An entry of "N/A" means that the attribute is not discussed in this document.
| Attribute name |
Applies to elements |
Role |
Techniques |
| abbr |
td,
th |
Alternative |
N/A |
| accesskey |
a,
area,
button,
input,
label,
legend,
textarea |
User Interface |
N/A |
| alt |
applet,
area,
img,
input |
Alternative |
N/A |
| axis |
td,
th |
Structure |
N/A |
| class |
Most elements |
Structure |
N/A |
| dir |
Most elements |
Processing |
N/A |
| for |
label |
Structure |
N/A |
|
td,
th |
Structure |
N/A |
| hreflang |
A,
link |
Metadata |
N/A |
| id |
Most elements |
Structure |
N/A |
| label |
option |
Alternative |
N/A |
| lang |
Most elements |
Metadata |
N/A |
| longdesc |
img,
frame,
iframe |
Alternative |
N/A |
| scope |
td,
th |
Structure |
N/A |
| style |
Most elements |
Processing |
N/A |
| summary |
table |
Alternative |
N/A |
| tabindex |
a,
area,
button,
input,
object,
select,
textarea |
User Interface |
N/A |
| title |
Most elements |
Metadata |
N/A |
| usemap |
img,
input,
object |
Processing |
N/A |
the following is the list of html 4.01 attributes not directly related to accessibility. Content developers should use style sheets instead of presentation attributes. For event handler attributes, please refer to the section on device-independent event handlers for more detail.
- Other structural attributes:
- start*, value*, rowspan, colspan, span
- Other presentation attributes:
- align*, valign*, clear*, nowrap*, char, charoff, hspace*, vspace*,
cellpadding, cellspacing, compact*, face*, size*, background*, bgcolor*,
color*, text*, link*, alink*, vlink*, border, noshade*, rules, size
(deprecated according to element), marginheight, marginwidth, frame,
frameborder, rows, cols
- Other processing instruction attributes:
- ismap, coords, shape
- Other user interface attributes:
- target, scrolling, noresize
- Other metadata attributes:
- type, cite, datetime
- Event handler
attributes:
- onblur, onchange, onclick, ondblclick, onfocus, onkeydown, onkeypress,
onkeyup, onload, onload, onmousedown, onmousemove, onmouseout, onmouseover,
onmouseup, onreset, onselect, onsubmit, onunload
|
top of page
![The University of Melbourne [logo]](/webcentre/template-assets-custom/images/custom_logo_crest_comb.gif){kind=logo}
