• Create BookmarkCreate Bookmark
  • Create Note or TagCreate Note or Tag
  • PrintPrint
Share this Page URL

Lesson 4. Elements of Page Design > Inserting Accessible Tables

Inserting Accessible Tables

It is important to continually consider how accessible your pages will be to your visitors. You can use the Insert Accessible Table feature to have Dreamweaver prompt you for the kinds of information needed to create accessible content as you insert tables. The goal of creating accessible pages is to develop content that is functional for the widest possible audience, including those with disabilities. You will learn more about accessibility in Lesson 7.

Create a new document and save it as lens_stats.html. Title the page Lights of the Coast: Technology: Lenses: Stats. Place the text from lens_stats_intro.txt into the page and create a new paragraph line below the text.

You will insert an accessible table here in the following steps.

Choose Edit > Preferences and choose Accessibility from the Category list.

Options for accessibility will display on the right side of the dialog box.

Click the check box next to Tables at the bottom of the list and click OK.

The dialog box closes, and you return to your document.

Click the Table icon on the Common tab of the Insert bar. Set the table options as follows: 2 rows, 3 columns, Cell Padding of 3, Cell Spacing of 0, Border of 1, and width of 500 pixels.

The Accessibility Options for Tables dialog box opens. You now have a number of new options and settings to choose from.

Type Lens Stats in the Caption text field and choose Top for the Align Caption option.

The caption feature will cause a table caption to appear in the browser after you complete the table settings in the following steps. Captions can be aligned to either the top or bottom of a table. If you leave this option blank, no caption will be inserted.

Type This table lists each Fresnel lens order and their approximate diameters and heights in the Summary text field.

A table summary should provide a concise and descriptive, but fairly brief, synopsis of the material contained within the table. It should indicate what the content of the table is. Table summaries are contained within the code and will not be visible in the browser window.

Choose Row from the Header drop-down menu and click OK to insert the table.

The Header attribute does not display in the browser window. It is used primarily by screen readers, assistant programs for the blind or visually impaired. This option will apply scope tags to each cell of the top row of the table. The scope tags will make any information that you place in the cells of that top row act as identifiers for each of the cells in their respective columns. For example, if you type Order in the top cell of the first column, the remaining cells in that column would be prefaced verbally by the word “Order” when read aloud by a screen reader in order to indicate the content of those cells.


The Column option on the Header drop-down menu works in the same way: It places the scope tags in the cells of the leftmost table column so you can enter header information in those cells to indicate the content of their respective rows.

From left to right, starting with the cell in the first column of the first row, type Order Classification in the first cell, type Approximate Diameter (in inches) in second cell, and in the third cell type Approximate Height (in feet). Use the Vert drop-down menu on the Property inspector to align each of the three cells to Top.

These terms will now act as identifiers for the cells in their respective columns.

Place the insertion point in a new paragraph below the existing table. Click the Tabular Data icon on the Common tab of the Insert bar to bring up the Import Tabular Data dialog box.

You will import the tabular data for lens stats into a new table in order to import the information.

Click Browse and choose lens_stats.txt in the Lesson_04_Tables/Text folder. Then choose Tab from the Delimiter menu. For Table Width, choose Set; then type 500 in the text field and choose Pixels from the drop-down menu. Set the Cell Padding to 3 and Cell Spacing to 0. Format Top Row should be set to (No Formatting) by default, and Border should be 1. Click OK.

A table is inserted containing the data from the tab-delimited lens_stats.txt file. The settings for this new table match the settings for the table you inserted with the accessibility options earlier in this exercise.

Select all the cells in the second table by clicking in the bottom right cell and dragging across the cells to the top left cell; then choose Edit > Copy.

All of the cells in the table are selected as indicated by their black borders. To be cut or copied, the selected cells must form a rectangle.

Click the first cell of the second row in the top table and choose Edit > Paste. Delete the bottom table. Save the file and preview it in your browser.

This cell is where the copied cells will be pasted. All the cells from the second table are inserted into the first table. You can delete the blank, bottom row.

You can see in the browser how this page will appear to many visitors. For those visitors who are using a screen reader to access the information in your page, this table will be read as follows:

“Caption: Lens Stats

Summary: This table lists each Fresnel lens order and their approximate diameters and heights.

Order Classification: First; Approximate Diameter in inches: 72; Approximate Height in feet: 8

Order Classification: Second; Approximate Diameter in inches: 55; Approximate Height in feet: 6”

The screen reader would continue to read the remaining content in the table in the same manner.

Choose Edit > Preferences and uncheck the box for Tables in the list of accessible objects.

The remaining lessons in this book will use the basic table option without accessibility attributes. You can choose to enable Dreamweaver's accessibility features at any time through these preferences.


The accessible tables feature will not apply accessibility attributes to tables that already exist on your pages. For those tables, you would have to enter the appropriate tags into the code.

You can close this file.

  • Creative Edge
  • Create BookmarkCreate Bookmark
  • Create Note or TagCreate Note or Tag
  • PrintPrint