HTML Tables with JAWS

A Web page author can use tables in two primary ways on the Internet. One is for the layout of structure on a Web page to place items where the author wants them to be in relation to other items on the page. These are called layout tables. The other type of table is called a data table. Data tables are the most common type of table.

JAWS announces when you enter and leave a table. A well-designed HTML table has a few different features. One of these is a caption, which is visible to a sighted user and is also read by JAWS. The caption is usually like a title, and generally appears above the table. Another design feature is the table summary. The table summary is not visible on the screen to sighted users. Web page designers can add summaries to the HTML code specifically for screen reader users. A good table summary provides a meaningful overview of the table, giving you some idea of what the table contains before you get there. Pay particular attention to the table summaries as you read through this page.

Reading Tables

You can use the JAWS navigation quick key T to move quickly between tables. On this page, each table also has a caption that is a level two heading. You can also move among the headings by pressing the JAWS navigation quick key H for headings. If you want to list all tables on the page, press INSERT+CTRL+T. You can then select a table and press ENTER to move to it.

Once you enter a table, you can use table reading commands to move through and read the information.

Table Layer Keystrokes

Table layer keystrokes offer a fast and convenient way to navigate tables. The table layer eliminates the need to have to hold down several keys at once to perform a table navigation command.

Below is a list of the layered keystrokes for table navigation. Press and release INSERT+SPACEBAR, followed by T to get to the table layer. Then press any of the following keystrokes.

The Table Layer remains active until you press a key that does not perform a table command, such as ESC, SPACEBAR, TAB, or ENTER.

The default behavior for JAWS is to read only headers that have been properly marked as headers by the author of a table.

In many tables, the first row, going from left to right, contains headers for the information in the columns below it. Also, many times the first column, going up and down, contains headers for the information in the rows to the right. If a table is not properly coded, JAWS can be changed to treat the information in the first row and the first column as headers. The settings for JAWS are as follows:

If a table has been properly marked up with column and row headers, when moving left and right in a table, you would hear the item in each column at the top of the column and then the contents of the current cell. When moving up and down in a table, you hear the item at the beginning of each row and then the contents of the current cell.

JAWS looks at the HTML code to see if the author of an HTML table has coded the table cell with a <TH> element, or table header. In addition, JAWS looks for the scope attribute, which can also be used by document authors to provide header information in tables. If a table is not specifically coded with proper column and row headers, JAWS can be changed to treat the table as if it did.

In the first two tables below you find examples of column and row headers that are marked up as headers. The first table has properly coded <TH> table header tags for both the first row and the first column. However, the second table only has properly coded <TH> table header tags for the first row. There are no row headers in the second table example. However, because these first two tables are marked up properly, JAWS reads the header information just fine.

In this first table the author used table headers for both the first row and the first column of the table, so when you use JAWS reading commands to read the current cell, you hear the following information:

NOTE: If you are not in table layer mode, press and release INSERT+SPACEBAR, and then press T. Then press NUM PAD 5 to read the current cell.

TV Listings with Both Column and Row Headers
8:00 PM 8:30 PM 9:00 PM 9:30 PM 10:00 PM 10:30 PM
ABC Grey's Anatomy Scandal How to Get Away with Murder
CBS The Big Bang Theory Mom Two and a Half Men The McCarthys Elementary
FOX Bones Gracepoint Local Programming
NBC The Biggest Loser Bad Judge A to Z Parenthood


In the second table the author used table headers for only the first row. The station network names have been omitted from column one. In this case when you use JAWS reading commands to read the current cell you hear the following information:

TV Listings with Only Column Headers
8:00 PM 8:30 PM 9:00 PM 9:30 PM 10:00 PM 10:30 PM
Grey's Anatomy Scandal How to Get Away with Murder
The Big Bang Theory Mom Two and a Half Men The McCarthys Elementary
Bones American Idol Fox 5 News at 10
The Biggest Loser Bad Judge A to Z Parenthood


The third table is just like the first table, except the author did NOT use table headers to mark up the HTML. In this case, you can change JAWS to read them.



TV Listings with Column and Row Headers that are not Marked up Properly
8:00 PM 8:30 PM 9:00 PM 9:30 PM 10:00 PM 10:30 PM
ABC Grey's Anatomy Scandal How to Get Away with Murder
CBS The Big Bang Theory Mom Two and a Half Men The McCarthys Elementary
FOX Bones Gracepoint Local Programming
NBC The Biggest Loser Bad Judge A to Z Parenthood


EXERCISE: Follow the steps below to tell JAWS to read both column and row headers for the table above that does not have proper markup:

  1. Press INSERT+V to open the JAWS Quick Settings dialog box while the Tables page is still in the foreground. The Quick Settings dialog box opens with focus in the search edit box.
  2. Type table titles in the edit box. The tree view below filters out all items not related to table titles.
  3. Press DOWN ARROW to move to the item Table Titles in the tree view. You should hear JAWS announce "Only Marked Headers."
  4. Press SPACEBAR to change this to Table Titles - Both Row and Column
  5. Press TAB to move to the OK button, and then activate it with the SPACEBAR. The Quick Settings dialog box closes.
  6. Navigate to the table above and try reading it again. You can press SHIFT+T to move to the prior table. Does it make more sense this time?
  7. Set the Quick Settings back to Table Titles Announce - Only Marked Headers again when you are finished.

The fourth table has only the times listed across the top. The network names that were in the first column have been removed. Again, the author did NOT use table headers to mark up the HTML. When you read the current cell you hear only the following information:

Because the table is not marked up properly, JAWS does not read the column headers.



TV Listings with Only Column Headers that are not Marked Up Properly
8:00 PM 8:30 PM 9:00 PM 9:30 PM 10:00 PM 10:30 PM
Grey's Anatomy Scandal How to Get Away with Murder
The Big Bang Theory Mom Two and a Half Men The McCarthys Elementary
Bones Gracepoint Local Programming
The Biggest Loser Bad Judge A to Z Parenthood


When you encounter this type of table you can change how JAWS reads column and row headers. In this case, you know that the information in row one, at the top of each column, is header information, even though it is not properly marked up. You also know that you do NOT want to have the first column treated as row headers.

EXERCISE: Follow the steps below to tell JAWS to read only column headers for the table above that does not have proper markup:

  1. Press INSERT+V to open the JAWS Quick Settings dialog box while the Tables page is still in the foreground. The Quick Settings dialog box opens with focus in the search edit box.
  2. Type table titles in the edit box. The tree view below filters out all items not related to table titles.
  3. Press DOWN ARROW to move to the item Table Titles in the tree view. You should hear JAWS announce "Only Marked Headers."
  4. Press SPACEBAR to change this to Table Titles - Columns
  5. Press TAB to move to the OK button, and then activate it with the SPACEBAR. The Quick Settings dialog box closes.
  6. Navigate to the table above and try reading it again. You can press SHIFT+T to move to the prior table. Does it make more sense this time?
  7. Set the JAWS Quick Settings Option back to Table Titles Announce - Only Marked Headers again when you are finished.

Document Presentation Mode

There are two different document presentation modes that you can use when reading tables with JAWS: Simple Layout and Screen Layout. With Simple Layout, each cell of the table is displayed on a separate line in the virtual buffer. Screen Layout mode allows you to read tables by row, just as they are presented on the screen. With Screen Layout each row of the table is displayed on a separate line and each cell is separated by a vertical bar. This lets you get a much better idea about how the table is structured and how different cells in a row relate to each other.

Screen Layout mode is also helpful when you want to copy an entire table row and paste it into another document as a single line. The default document presentation mode for JAWS is Simple Layout.

To enable Screen Layout mode for the current web browser, do the following:

  1. In your browser, press INSERT+V. The Quick Settings dialog box opens with focus in the search edit box.
  2. Type document presentation in the search edit box. The tree view below filters out everything that does not relate to document presentation.
  3. Press DOWN ARROW until focus moves to Document Presentation Mode.
  4. Press the SPACEBAR to choose Screen Layout.
  5. Press TAB to move to the OK button, and then SPACEBAR to activate it.

NOTE: By default, the quick settings for JAWS are saved to your computer hard disk, and remain set this way until you change them back or to a different setting.

When you practice reading tables with JAWS in the following section, experiment with Screen Layout mode and Simple Layout mode to see which you like best.

Permanently Enable Screen Layout Mode for all HTML and PDF Tables

If you determine that Screen Layout mode is better suited to your needs, you can do the following to permanently enable this feature in HTML and PDF tables.

  1. In your browser, press INSERT+F2.
  2. Select Settings Center and press ENTER.
  3. Press CTRL+SHIFT+D to switch to the Default, all files, setting. You can read the title bar of Settings Center to verify this by pressing INSERT+T.
  4. Focus is in the Search edit box. Type in "select layout" without the quotes.
  5. Press DOWN ARROW to move to Select Layout in the filtered results of the tree view in Settings Center.
  6. Press SPACEBAR to toggle from Simple Layout to Screen Layout.
  7. Press TAB to move to the OK button, and then activate it with the SPACEBAR. The changes are made and saved. Settings Center closes.

Practice with More Tables

The next table on this page discusses air and water temperatures for the Tampa Bay area. The Tampa Bay area enjoys an average of 361 days of sunshine a year. The Guinness Book of World records credits Saint Petersburg with the longest run of consecutive sunny days: 768. All the sunshine makes it easy to enjoy the area's beaches, which include two of the top ten rated beaches in the nation.


Average Temperatures for Saint Petersburg
Month High Air Temperature Low Air Temperature Gulf Water Temperature
January 70 degrees 50 degrees 64 degrees
February 71 degrees 51 degrees 65 degrees
March 77 degrees 58 degrees 69 degrees
April 81 degrees 61 degrees 73 degrees
May 88 degrees 67 degrees 79 degrees
June 89 degrees 71 degrees 82 degrees
July 90 degrees 75 degrees 84 degrees
August 90 degrees 75 degrees 86 degrees
September 89 degrees 73 degrees 82 degrees
October 82 degrees 65 degrees 78 degrees
November 78 degrees 56 degrees 71 degrees
December 72 degrees 50 degrees 64 degrees


The information above is taken from the Chamber of Commerce Web site in Saint Petersburg.

EXERCISE: Try re-reading the previous table using Screen Layout mode instead of Simple Layout mode. If you need a reminder about how to switch document presentation modes, see the steps for switching to Screen Layout mode. When you are finished, change JAWS back to Simple Layout mode.

Surf's Up also makes use of cascading style sheets (CSS) for formatting purposes. Using CSS is a best practice technique for Web designers and is the best way to accomplish formatting. One of the formatting techniques used in Surf's Up is to have cells that are classified as table header elements colored with a lemon yellow background, which is darker than the ivory background of the other table cells.

The table below is an example of a table that uses the ID, AXIS, and HEADERS attributes to make JAWS speak different information when navigating different areas of the table. For example, when moving up and down the Employee Name column, you hear the division name as the row header. However, when moving up and down the Phone Extension column, you hear the employee name as the row header. The employee name is actually in column two, but the HTML code is telling JAWS to treat it as the row header in this case, rather than the text in column one. In this case, JAWS reads properly without you having to change any settings for JAWS, since the author of the table took the time to use good practices for coding the HTML of the table. Any given cell can reference any other cell (or cells) anywhere in the table as a header using this technique.


Employee Extensions and Departments
Division Name Employee Name Phone Extension
Shipping John Smith 543
Receiving Lee Johnson 123
Accounting Sharon Jones 222


This next table is much more complex, but notice how JAWS reads it. When moving up and down column two, where the company name is, the row header information is gathered from column one, the region. When moving up or down any column from three to eight, the row header information is gathered from column two, the company name. You also hear the axis attribute spoken with the words "Region" and "Where."


Sales Contacts by State
  Company Address City State Phone Number Fax Products
West Screen Readers Unlimited 52 Third Ave. Los Angeles CA 555-555-1234 949-555-0101 Screen Readers
Access Now 115 Webb Street Seattle WA 206-555-7777 206-555-7778 Software; Braille Displays; Embossers; Notetakers
Webb Access Group 100 Main Street Phoenix AZ 602-555-3131 602-555-3132 Software; Web Accessibility Consulting
Accessible World 5 N. 7th Street San Francisco CA 1-800-555-2190   Software; Braille Displays; Embossers; Notetakers
Midwest Special Computers, Inc. 121 4th Street, Suite I Chicago IL 800-555-1478 708-555-2221 Software; Braille Displays; Embossers; Notetakers
IndyPendence Day Computing 2110 Freedom Dr. Indianapolis IN 1-800-555-1332 317-555-6261 Software; Braille Displays; Embossers; Notetakers
Touch the World, Inc. 82 S. Broadway Cincinnati OH 1-800-555-3691 513-555-2221 Software; Braille Displays; Embossers; Notetakers


In the following table, the first row actually spans the entire width of the table, across all five columns. JAWS uses the COLSPAN and SCOPE attributes to determine how it should read the information in the table. Try reading this table now.

Sales Report
Produce On Sale
  First Week Second Week Third Week Fourth Week
January Apples Pears Oranges Grapes
February Mangos Tangerines Strawberries Kiwis
March Cherries Limes Lemons Melons