Web Accessibility Initiative (WAI) Test
This Web page is a test for the (X)HTML-Tags acronym and abbr.
The tags are needed to make a Web site accessible for persons with disabilities
and is a part of the Web Content Accessibility Guidelines 1.0 (WCAG) from
the W3C. Test
Accessibility/Usability with Web browsers or screenreaders.
The (X)HTML acronym-tag
Acronyms are special abbreviations which you can read mostly as a word. Some Web browsers work with acronyms in(X)HTML documents, but doesn't show the user a visual label like the dotted underline. People without a mouse can't probably see the tooptip.
Testtext:
You should use the WAI Guidelines.
<p>You should use the
<acronym title="Web Accessibility Initiative">WAI</acronym>
Guidelines.</p>
You should see a tooltip with "Web Accessibility Initiative" after your mouse move over the word "WAI". Users without a mouse don't see the tooltip and screenreader can read the title or the acronym. The user can decide in the screenreader config, how the screenreader should manage this.
The (X)HTML abbr-tag
This is a test for abbreviations in (X)HTML-Documents. Some browsers ignore the abbr-Tag, other doesn't show a visual label. People without a mouse can't probably see the tooptip.
Testtext:
Read the WCAG from W3C for more informations.
<p>Read the
<abbr title="Web Content Accessibility Guidelines>WCAG</abbr>
from W3C for more informations.</p>
You should see a tooltip with "Web Content Accessibility Guidelines" after your mouse move over the word "WCAG". Users without a mouse don't see the tooltip and screenreader can read the title or the abbr. The user can decide in the screenreader config, how the screenreader should manage this.
Tables and screenreader
To make a table with more than two columns readable for screenreaders you should define table headers. Here a small example.
| Browser | Linux | MacOS | Windows |
|---|---|---|---|
| Amaya | yes | yes | yes |
| Lynx | yes | no | no |
| Netscape | yes | yes | yes |
<table border="0" summary="Screenreader Test für Tabellen">
<tr>
<th id="header1">Browser</th>
<th id="header2">Linux</th>
<th id="header3">MacOS</th>
<th id="header4">Windows</th>
</tr>
<tr>
<td headers="header1">Amaya</td>
<td headers="header2">yes</td>
<td headers="header3">yes</td>
<td headers="header4">yes</td>
</tr>
<tr>
<td headers="header1">Lynx</td>
<td headers="header2">yes</td>
<td headers="header3">no</td>
<td headers="header4">no</td>
</tr>
<tr>
<td headers="header1">Netscape</td>
<td headers="header2">yes</td>
<td headers="header3">yes</td>
<td headers="header4">yes</td>
</tr>
</table>
A screenreader should read:
Browser Amaya, Linux yes, MacOS yes, Windows yes
Browser Lynx, Linux yes, MacOS no, Windows no
Browser Netscape, Linux yes, MacOS yes, Windows yes
Explanations for this page
If you wish that browsers with CSS support show a visual label use the following sample:
.acronym {
font-style: normal;
border-bottom: 1px dotted #666666;
cursor:help;
}
.abbr {
font-style: normal;
border-bottom: 1px dotted #666666;
cursor:help;
}
If you use the CSS sample above, the you should add in your CSS for media print a modified copy without the visual label. If you don't do this, some users can think, that this are links. In the best case, there is a CSS for media print.
The acronym-tag is no more part of HTML 5 and XHTML 2, the abbr-tag is part of HTML 5 and XHTML 2. Both tags only work with the mouse or for screenreaders. For all persons with disabilities without mouse support you should make a glossary as alternative.
This Web Accessibility Initiative test page work without the CSS-Code listet above to see how browsers render this page.