Tips and Tricks
Accessibility: Tables for Layouts
A little history on yours truly. Even experts have to humble themselves sometimes. I’ve been in the web design business for a while, so when I went to my first accessibility conference, I also had my first taste of humble pie:
“So no one here is using tables for layouts, right?”
I started to slide down my chair, trying to hide from my classmates. I wasn’t too successful.
Everything I knew from that point on I had to unlearn. “Tables are easy to use to put text and images exactly where you want them…”
But that is not what they are for. In fact, their design is unreadable by screen readers because the screen readers are looking for tabular data, a set of data with table headers for the rows and/or columns.
Let’s look at this from a different perspective.
One of the main problems with table layouts is our current state of the Internet. We aren’t always on our desktop computers looking at websites. Sometimes we are looking at the same page on a mobile phone or tablet, and that becomes frustrating with table layouts, since they assume a particular size for everything based on a computer monitor’s size – and we know not every monitor is even the same size!
Web Services uses solutions that replace tables for layouts to make the Tarleton website more accessible.
Bad News: it is more technical, and Cascade doesn’t include these options in the editor for the more web savvy designer.
Good News: Web Services will happily assist you in finding ways to redesign the page to remove table layouts. We’ve already created many templates to do just that. Contact us, and we’ll point you in the right direction.
Technical / Legal Stuff
- Section 508 Subpart B §1194.22 (g) - Table Headers: Row and column headers shall be identified for data tables.
- Section 508 Subpart B §1194.22 (h) - Complex Tables: Markup shall be used to associate data cells and header cells for data tables that have two or more logical levels of row or column headers.
The Web Content Accessibility Guidelines (WCAG) 2.0 makes this a little easier to understand. I mention three guidelines on How to Be Accessible with Cascade Server:
- WCAG Guideline 1.4 - Distinguishable: Make it easier for users to see and hear content including separating foreground from background.
- WCAG Guideline 2.4 - Navigable: Provide ways to help users navigate, find content, and determine where they are.
- WCAG Guideline 3.1 - Readable: Make text content readable and understandable.