Michael Gaigg: Über UI/UX Design

20Nov0

Best Practices for accessible Tables

Posted by Michael Gaigg

The purpose of a table is to layout data. Unlike regular text, tables are generally difficult to comprehend. It takes time and effort to understand the structure, capture the data and interpret its meaning. This is even more difficult when the table is viewed and read out by a screenreader. Additional attributes are needed to relate headers with column and rows.

Tables might be used to layout content. The current recommendation for content tables is to explicitely state this purpose upfront so that users with screenreaders can avoid investigating the table's structure. Convey this meaning using the summary attribute:

<table border="0" summary="Layout table with two columns: menu and content">

Basic Rules

General:

  • Use proper HTML
  • Use tables for displaying tabular data
  • Use block elements (e.g. DIV) and CSS for layout purposes
  • Use proportional sizing rather than absolute sizing

Data Tables:

  • Describe tables with a name or title (caption tag)
  • Provide a summary (summary attribute)
  • Designate Row and Column Headers (TH tag)
  • Associate the data cells with the appropriate headers (scope & id attributes)
  • Avoid spanned rows or columns (workaround: normalize table)
  • Avoid tables with more than two levels of row and/or column headers

Layout Tables:

  • Linearize content (literal order in the code equals the linearized reading order)
  • Use the simplest table configuration possible

Best Practices

Level 1

Level 1 Checkpoints - Section 508 Compliancy Standards
Description W3C 508 Example
For data tables, identify row and column headers 5.1 (g) <TR>
<TH>Name</TH>
<TH>Cups</TH>
<TH abbr="Type">Type of Coffee</TH>
<TH>Sugar?</TH>
</TR>
For data tables that have two or more logical levels of row or column headers, use markup to associate data cells and header cells 5.2 (h) <TABLE border="1">
  <CAPTION>Travel Expense Report</CAPTION>
  <TR>
    <TH></TH>
    <TH id="header2" axis="expenses">Meals
    <TH id="header3" axis="expenses">Hotels
    <TH id="header4" axis="expenses">Transport
    <TD>subtotals</TD>
  <TR>
    <TH id="header6" axis="location">San Jose
    <TH> <TH> <TH> <TD>
  <TR>
    <TD id="header7" axis="date">25-Aug-97
    <TD headers="header6 header7 header2">37.74
    <TD headers="header6 header7 header3">112.00
    <TD headers="header6 header7 header4">45.00
    <TD>
  <TR>
    <TD id="header8" axis="date">26-Aug-97
    <TD headers="header6 header8 header2">27.28
    <TD headers="header6 header8 header3">112.00
    <TD headers="header6 header8 header4">45.00
    <TD>
  <TR>
    <TD>subtotals
    <TD>65.02
    <TD>224.00
    <TD>90.00
    <TD>379.02
</TABLE>

Level 2

No Level 2 requirements.

Level 3

Level 3 Checkpoints - Section 508 Compliancy Standards
Description W3C 508 Example
Provide summaries for tables 5.5 n/a <TABLE summary="This table charts the number of cups of coffee ...">
Provide abbreviations for header labels 5.6 n/a <TABLE ...>
<TH scope="col">Name</TH>
<TH scope="col">Cups</TH>
<TH scope="col" abbr="Type">Type of Coffee</TH>
<TH scope="col">Sugar?</TH>
</TABLE>
Provide a linear text alternative (on the current page or some other) for all tables that lay out text in parallel, word-wrapped columns 10.3 n/a n/a

References

28Oct0

Best Practices for accessible Links

Posted by Michael Gaigg

It is essential that users can find, identify, and comprehend hypertext links quickly. Even though there are no Level 1 (A) checkpoints associated with links it is pretty easy to fulfill Level 2 and even Level 3. It's definitely worthwhile the little effort with the added benefit that e.g. most browsers render the title attribute as a tooltip.

Basic Rules

See also my Design Guidelines for Links.

  • Contrast link text color and regular text color
  • Underline link text
  • Ensure link text is descriptive of its destination
  • Make visited links change color
  • Limit link text to a maximum of four words
  • Place important words at the front of link text
  • Minimize amount of links to seven (excluding the menu) unless they are presented in a clear structure
  • Use meaningful pathnames when creating directory structure

Best Practices

Level 1

No Level 1 requirements.

Level 2

Level 2 Checkpoints - Section 508 Compliancy Standards
Checkpoint Description W3C 508 Example
Links Clearly identify the target of each link 13.1 n/a <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>

Level 3

Level 3 Checkpoints - Section 508 Compliancy Standards
Checkpoint Description W3C 508 Example
Links Create a logical tab order 9.4 n/a <A tabindex="2" href="link2.txt"">Link 2</A><A tabindex="1" href="link1.txt">Link 1</A>

<A tabindex="3" href="link3.txt">Link 3</A>

Links Provide keyboard shortcuts to important links 9.5 n/a <A accesskey="2" href="link2.txt"">Link 2</A><A accesskey="1" href="link1.txt">Link 1</A>

<A accesskey="3" href="link3.txt">Link 3</A>

Links Include non-link, printable characters (surrounded by spaces) between adjacent links 10.5 n/a [<A href="a.htm">Link A</A>] [<A href="b.html">Link B</A>] or<A href="a.htm">Link A</A> | <A href="b.html">Link B</A>

Templates

Find out more about <a title="Michael Gaigg IT Solutions Webpage" href="http://www.michaelgaigg.com/">IT Solutions</a>

References