Layout tables, with and without the presentation role
Screen Reader Reliability Testing
Introduction
This page demonstrates the use of the table element for web page layout. There are two layout tables in this web page. The first layout table is not accessible because it does not have the presentation role. The second layout table is accessible because it does have the presentation role.
Test
|
|
An inaccessible layout table. |
|
|
A long time ago, it was commonplace for web page authors to achieve complex web page layouts using tables to control where the content was positioned. This was before the widespread adoption of CSS. This technique is frowned upon in modern times. However, it is still useful, but only if the table is marked up as a layout table by setting the role attribute to presentation. Failure to set the role attribute to presentation causes various accessibility issues. This table is used only for layout but it does not have the role attribute set to presentation. Reading this table is not a pleasant experience for screen reader users. |
Useful links |
|
|
|
Ad: ARC Toolkit is a useful extension to Chrome’s Developer Tools that helps with accessibility testing. ARC Toolkit is developed by TPGi, a Vispero company. |
|
|
|
An accessible layout table. |
|
| This table appears to be similar to the previous table at fist glance. But there is one major difference, this table does have the role attribute set to presentation. It is a far better experience for screen reader users. |
More Useful links |
|
|
|
Ad: JAWS Inspect, JAWS Screen Reader and Compatibility Testing Made Easy. JAWS Inspect is developed by TPGi, a Vispero company. JAWS is developed by Freedom Scientific, a Vispero company. |
|