You are here

Web Toolkit

Make Accessible Tables

Tables can be one of the most inaccessible things on a website. To make tables more accessible:

Go to Table Properties (either by right-clicking an existing table or through the table wizard).

Select the Accessibility tab.

Accessibility Properties Explained
All these properties are required to be completed on each WSDOT table - except, the Summary property.

Heading Rows
Input the number of rows that your table has with headings.

Heading Columns
Input the number or columns that include headings.
(NOTE - Avoid tables with more than 1 row and 1 column of headings).

Caption Alignment
Alignment of caption, leave this on left-justified.

Caption
The caption is like a table title. Use this describe the overall purpose of your table. For example, WSDOT CMS Contacts.

Summary
The summary is useful for more complex data. If you have weather data over a period of time - describe the changes - did the weather get warmer or cooler over specific times? It's useful to give an overall synopsis of your table data.

Having a summary is not required on all WSDOT tables. Some tables, don't lend themselves to an overall summary. However, please use the summary option if your data can be summarized to the benefit of the user.

Table Size

You can resize a table two ways:

Specify dimensions in Table Properties

Drag-and-drop bottom corner to expand the table to desired size.

Table Tips

Simple
Make your tables as simple as possible. Layouts with spanned rows and columns will be hardly noticeable to the average eye, but the blind users will "see" it all.

Avoid centering text
If you are going to center text on the Web, the most appropriate place to do so is column headings in a table.

Use right-justification for dollar amounts
If you have a column of dollar amounts, consider making the column right justified so all the decimal points line up.

Delete a table
Delete a table by putting your mouse along the edge of the table. Once the cross cursor shows up (instead of an arrow cursor), click table and hit delete.