Web Accessibility Initiative (WAI) test with acronym and abbr tags

Navigation

Web Accessibility Initiative (WAI) Test

Ein Bild mit Figuren 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.

[back to top]

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.

[back to top]

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

[back to top]

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.

[back to top]

 

[back to navigation]

[back to top]