Example of an Accessible HTML Table

This is an example of how one would go about coding a table to be more usable by non-visual users. According to the W3C's HTML 4.01 specification:

"Non-visual user agents such as speech synthesizers and Braille-based devices may use ... TD and TH element attributes to render table cells more intuitively."

The following example includes the ID and SCOPE attributes of the TH element (both would not usually be used together; they were combined for the purposes of this example), and the HEADER attribute of the TD element.

A speech synthesizer might render this table as follows:

Caption: Codes to Render Special Characters for HTML, and Which Browsers Support Them
Summary: Numeric and Named Codes to Render Special Characters for HTML and Which Browsers Support Them
number:   name: support:N1-N4; IE3-4; WebTV visual: description: Space
number: ! name: support:N1-N4; IE3-4; WebTV visual: ! description: Exclamation point
number: " name: " support: N1-N4; IE3-4; WebTV visual: " description: Double quote
number: # name: support:N1-N4; IE3-4; WebTV visual: # description: Number symbol
number: $ name: support:N1-N4; IE3-4; WebTV visual: $ description: Dollar Symbol

ETC ...

Codes to Render Special Characters for HTML, and Which Browsers Support Them
Numbered Entity Named Entity1 Supported In2 Intended Rendering Description
  N1-N4; IE3-4; WebTV   Space
! N1-N4; IE3-4; WebTV ! Exclamation point
" " N1-N4; IE3-4; WebTV " Double quote
# N1-N4; IE3-4; WebTV # Number symbol
$ N1-N4; IE3-4; WebTV $ Dollar symbol
% N1-N4; IE3-4; WebTV % Percent symbol
& & N1-N4; IE3-4; WebTV & Ampersand
' N1-N4; IE3-4; WebTV ' Single quote
( N1-N4; IE3-4; WebTV ( Opening parenthesis
) N1-N4; IE3-4; WebTV ) Closing parenthesis
* N1-N4; IE3-4; WebTV * Asterisk
+ N1-N4; IE3-4; WebTV + Plus sign
, N1-N4; IE3-4; WebTV , Comma
- N1-N4; IE3-4; WebTV - Minus sign
. N1-N4; IE3-4; WebTV . Period
/ N1-N4; IE3-4; WebTV / Slash/virgule/bar
: N1-N4; IE3-4; WebTV : Colon
&#59; N1-N4; IE3-4; WebTV ; Semicolon
&#60; &lt; N1-N4; IE3-4; WebTV < "Less than" symbol
&#61; N1-N4; IE3-4; WebTV = Equal sign
&#62; &gt; N1-N4; IE3-4; WebTV > "Greater than" symbol

1Personal Observation: Named entities seem to be less uniformly supported than their numbered equivalents.

2"Nx"=Netscape level; "IEx"=MS Internet Explorer level

Display the code for this table (abbreviated to 3 rows)

See a Bobby report on this page


Return to the Technology page

Copyright 2000 Debi Orton