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
| 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
| 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
- WebAIM; Creating Accessible Tables; http://webaim.org/techniques/tables/
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
| 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
| 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.mgitsolutions.com/">IT Solutions</a>
References
- Webcredible. Writing effective link text. http://www.webcredible.co.uk/user-friendly-resources/web-usability/effective-link-text.shtml
Best Practices for accessible Content
Posted by Michael Gaigg
People rarely read Web pages, they scan the page! As a result, Web pages have to follow Design Guidelines for Content that enable them to quickly identify headings, titles, links and other important elements to orient themselves. What else has to be done to be Section 508 compliant?
Basic Rules
- Don’t rely on color alone
- Identify the language used throughout the document and identify changes
- Use correct markup to emphasize important content
- Be clear and precise in the choice of wording and language
Best Practices
Level 1
| Checkpoint | Description | W3C | 508 | Example |
|---|---|---|---|---|
| Color | Ensure that all information conveyed with color is also available without color | 2.1 | (c) | Ensure that information is available through other style effects (e.g., a font effect), through context (e.g,. comprehensive text links) or through mark-up (e.g., the title attribute). |
| Language | Clearly identify changes in the natural language of a document's text and any text equivalents | 4.1 | n/a | And with a certain <SPAN lang="fr">je ne sais quoi</SPAN>, she entered both the room, and his life, forever. <Q>My name is Natasha,</Q> she said. <Q lang="it">Piacere,</Q> he replied in impeccable Italian, locking the door. |
| Language | Use the clearest and simplest language appropriate for a site's content | 14.1 | n/a | n/a |
Level 2
| Checkpoint | Description | W3C | 508 | Example |
|---|---|---|---|---|
| Blinking | Avoid causing content to blink | 7.2 | n/a | n/a |
| Movement | Avoid movement in pages | 7.3 | n/a | i.e., hide/show content or change presentation (movement and colors). |
Level 3
| Checkpoint | Description | W3C | 508 | Example |
|---|---|---|---|---|
| Text | 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 | 2.2 | (c) | For more information check the online paper about "Effective Color Contrast" at lighthouse.org (http://www.lighthouse.org/accessibility/effective-color-contrast/). |
| Abbreviations | Specify the expansion of each abbreviation in a document where it first occurs | 4.2 | n/a | <ABBR title="social security number">SS#</ABBR> or ASCII art:<ABBR title="smiley in ASCII art">:-)</ABBR> |
| Acronyms | Specify the expansion of each acronym in a document where it first occurs | 4.2 | n/a | Welcome to the <ACRONYM title="World Wide Web">WWW</ACRONYM> |
| Language | Identify the primary natural language of a document | 4.3 | n/a | <HTML lang="en"> |
Templates
<HTML xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<ABBR title="social security number">SS#</ABBR>
<ACRONYM title="Geographical Information System">GIS</ACRONYM>
References
- ISO 639.2 Registration Authority (2004, 10). Codes for the Representation of Names of Languages. http://www.loc.gov/standards/iso639-2/englangn.html
- Aries Arditi, PhD. Effective Color Contrast. http://www.lighthouse.org/accessibility/effective-color-contrast/
What is Accessibility?
Posted by Michael Gaigg
The purpose of web pages is to interactively display information. The Hypertext Markup Language was designed to encode meaning rather than appearance. Therefore
Accessibility is the extent of access to information on a webpage through user agents (e.g. browsers, screen readers,…) which translate HTML into hypertext structures (links, headers, tables, forms,…) in order to give the users a surplus value.
“As long as a page is coded for meaning, it is possible for alternative browsers to present that meaning in ways that are optimized for the abilities of individual users and thus facilitate the use of the Web by disabled users. Those disabilities are:
- Visual Disabilities
- Auditory Disabilities
- Motor Disabilities
- Cognitive Disabilities” [NIELSEN96]
Since Web pages are highly visual and interactive the most affected groups as far as accessibility is concerned are the visual disabled, i.e. blind users or users with other visual disabilities like color blindness and users with motor disabilities using alternative input devices or sometimes even just the keyboard instead of the mouse.
Everybody benefits!
In the same way a sidewalk curb is necessary for wheelchair accessibility it also benefits parents with strollers, children with rollerblades and elderly persons trying to cross the street. The same is true for web pages. Designing for accessiblity will not only benefit users with disabilities but will also increase your:
- Market Share Benefits
- SEO (search engine optimization)
- Repurpose
- Literacy
- Bandwidth
- Technical Efficiency Benefits
- Maintenance
- Server Bandwidth
About Me
I'm Michael Gaigg, Lead UI Engineer at Esri's Prof. Services.
I have over 8 years of experience in designing map interfaces and can't stop thinking about improving them.
Help me by sharing your thoughts, ideas and comments.
Categories
- Accessibility (16)
- Code Samples & Tips (8)
- Conclusions (4)
- Design Guidelines (11)
- Designing Map Interfaces (3)
- Go figure (9)
- Good News (19)
- Here and there (21)
- Map Applications (7)
- This Week's Highlights (53)
- Usability & UCD (22)
- Web Design (21)
Popular Posts
- ColoRotate – 3D color scheme generator with social component
- Web Content Accessiblity Guidelines (WCAG) 2.0: Overview and Structure
- Powerpoint Wireframe Stencils as Free Download
- Go figure: 10 Comic Strips that have Something in Common
- Job Posting: User Interface (UI) Engineer at ESRI
Latest tweets
- Awesome resources for website designers http://t.co/oB77As8O 2 weeks ago
- I just contacted Rep. Jerry Lewis to oppose #SOPA #PIPA - Join me! http://t.co/BuFcgvqf #wikipediablackout 2 weeks ago
- Awesome #login #form #sample http://t.co/hob6dtvF 3 weeks ago
- Photo: Dude, just don’t pin the place you’ve been… ;) http://t.co/lwf3gIU8 3 weeks ago
- Photo: Who wants to buy a church in Los Angeles? http://t.co/0SJrYxCv 2011-12-31
- More updates...
Posting tweet...
