Designing accessible websites: Use tables instead of CSS

Many web designers seem to be abandoning tables and using Cascading Style Sheets (CSS) to layout information in a visually identical way. But tables increase the accessibility of tabular information for blind people* using screen readers because they can more easily scroll, page, tab, and move around in the data.

Web pages are created using HTML, the web’s markup language. Like any markup language, it contains hidden tags about unhidden information. Webpages with well-tagged information are advantageous for blind people using screen readers.** Tables are no exception. The TABLE element of HTML has several tags and attributes used to describe a table, its layout, and the data it contains. Tables are a standard way in HTML to describe tabular data. There is no standard way in CSS to display or describe tabular data; crafty web designers can use CSS to simulate tables, but only visually.

  1. The first tag is <table> which creates the table. But in this tag, designers should add attributes that describe the number of rows and columns (“rows,” “cols”). How this is helpful: A blind person may be looking for a table that contains information on all 50 states, but if the table has less than 50 rows, then they can avoid spending time reading this table and move on to find another. In the JAWS screen reading software, there is a function that allows the user to jump from table to table.
  2. The second tag to use is <th> to create a cell in a row. The <th> tag is different from the <td> cell-creating tag in that it describes a header. Writers and publishers (web designers included) often make headers larger or bolder than the subordinate text to indicate the header texts’ significance. But only sighted people can notice these cues. Screen readers will notice the <th> tag as a column heading and the user can pan the columns until they find the column they want – this is especially helpful when the web designer has tables in pages without heading text (probably not a good idea) or uses tables to organize the layout of a page (which designers should avoid).

Advanced Search - Bike Parking

This screenshot “shows” (many are hidden) several elements of accessibility in a webpage I designed for work. For example, the map is a graphic element that blind users can’t see and screen readers can’t describe. A table below the map describes the information seen on the map and takes the user to the same webpage (with detailed information) as the map markers. The table’s first row uses the <th> tag to indicate the row contains important column headings. Also, the table shows tabular data and the webpage does not use tables to organize the layout of the webpage.

In all HTML layout tags, designers can add a “title” attribute that screen reading software will notice and read to the user. Titles should describe well the information in the tagged text or the text immediately following the tag. Use the “title” attribute on these tags: <table>, <div>, and <a> (to describe links). Multimedia should ALWAYS have the “alt” attribute that describes the graphic (essentially a hidden caption). This is also helpful for people who browse with images turned off, or when your server fails to display the image.

*What is good for blind people is usually good for sighted people.

**A screen reader is software that reads text and commands sighted people would see on a computer monitor, but also reads text and commands that are hidden. With HTML and CSS, web designers can give information and commands in hidden code that speak to blind users. An example of this is a link that enables the user and their screen reader to jump over information to a predefined point, like a navigation area, skipping the introduction text.

Advertisements

1 Response to “Designing accessible websites: Use tables instead of CSS”



  1. 1 In common with bike paths, snow shoveling, and web design « Odds and ends Trackback on January 2, 2010 at 1:09 am

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s





%d bloggers like this: