The TABLE tag is one of the most popular tags used in web design. Conceptually, the TABLE tag was invented to allow the web designer to place data on the web page in convenient and standardized manner.
Since the beginning of the WWW, designers have sought to find creative ways to position text and images onto the web page to make them graphically pleasing. If you remember the early days of the WWW, most of the pages were simple default text arranged across the screen. Designers later began to use the TABLE tag as a way to create what are essentially text boxes. Because you can change the various attributes of a table (including making the border invisible), tables are used extensively now to control the layout on web pages.
Section 508 has very little to say about tables, and what it does say applies only to data tables. Section 508, § 1194.22(g) and 1194.22(h), state:
- Row and column headers shall be identified for data 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.
Why Are These Two Provisions Necessary?
Paragraphs (g) and (h) permit the use of tables, but require that the tables be coded according to the rules of the markup language being that is in use. Large tables of data can be difficult to interpret if a person is using a non-visual means of accessing the web. Users of screen readers can easily get "lost" inside a table because it may be impossible to associate a particular cell that a screen reader is reading with the corresponding column headings and row names.
Let's briefly review of a typical table. In this example, we are tracking the work schedule of three employees at a Retail Store.
|
|
Because screen readers can read one cell at a time, but it is difficult for the impaired user to get an overview of the table and its contents, it is imperative that table data cells are associated with column headers. Assistive technology allows users to navigate among table cells and access header and other table cell information. Unless marked-up properly, these tables will not provide the assistive technology with the appropriate information.
Section 1194.22 (g) and (h) state that when information is displayed in a table format, the information shall be laid out using appropriate table tags as opposed to using a preformatted table in association with the "<pre>" tag. Web authors are also required to use one of several methods to provide an association between a header and its related information.
Making Tables Accessible in CuteEditor
1. The first step is to add column headers.
| Browser View | HTML Code | ||||||||||||||||||||
|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|
|
<table border=1 cellspacing=0 cellpadding=3> |
Each table cell is either a pure data cell (TD) or a header cell (TH). By default, headers will appear centered in bold so that most users can easily identify them.
In CuteEditor, You can change the data cell to header cell using the following steps:
a. Place the mouse cursor in your editor where you want change the data cell to header cell.
b. Right click > Tags > TD > Verbs.
c. Click the Change to header Cell.
Captions and Summaries
Section 508 says nothing about using captions or summaries for tables, although the W3C's Web Accessibility Initiative (WAI) suggests a priority 3 guideline to provide summaries for tables. However, many accessibility experts suggest using these to enhance your table's accessibility. A table's caption is a short sentence summarizing the contents of the table, which will appear in all browsers and can be visually styled using CSS. It looks like this in the code:
| Browser View | HTML Code | ||||||||||||||||||||
|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|
|
<table SUMMARY="The work schedule of employees"> |
In CuteEditor, to add a summary to a table while you're inserting it, just fill in the appropriate field in the Insert Table dialog box as followings:
In CuteEditor, to add a caption to a table while you're inserting it, you can follow these steps
a. In the Insert Table dialog box, click the insert button. A default caption will
be inserted into the table.
b. In Design view, enter the text you want for your caption.
