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.
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. By default, earlier versions of JAWS and MAGic would treat the information in the first row and the first column as headers. This information would automatically be read to you as you navigated using the JAWS and MAGic table reading commands. 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.
Beginning with JAWS 9.0 and MAGic 11.0, both products now look at the HTML code to see if the author of an HTML table has coded the table cell with a <TH> element. JAWS and MAGic now are smart enough to distinguish between a <TH> element (table header) and a <TD> element (table data). If the table cell is not specifically coded as a table header, JAWS and MAGic do not automatically treat them as such.
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. 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.
MAGic Tip: MAGic uses Screen Layout mode automatically by default. So if MAGic is running either by itself or with JAWS at the same time and you press DOWN ARROW to move through a table, MAGic reads and highlights the entire row.
Screen Layout mode is also helpful when using JAWS alone and 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 temporarily enable Screen Layout mode when running JAWS only, do the following:
When you begin learning to use JAWS for reading tables in the following section, experiment with Screen Layout mode and Simple Layout mode to see which you like best. If you determine that Screen Layout mode is better suited to your needs, you can do the following to permanently enable this feature in Internet Explorer:
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.
TIP: If you are using JAWS alone, or both JAWS and MAGic at the same time, you can use the JAWS navigation quick keys to move around quickly from table to table. If you are running MAGic alone, use the list of headings, INSERT+F6, to list all of the tables on the page. 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. Most of the movement is done by holding down the CTRL and the ALT keys in combination with the ARROW KEYS to move in a given direction. Press CTRL+ALT+NUMPAD 5 to read the information in the current cell. Many of these keystrokes work equally well for either JAWS or MAGic. To find out which table reading keystrokes work with MAGic alone, visit the table reading commands page link above.
The first 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.
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. You may not have noticed, but in the table above, the cells for November and December are classed using the <TH> element. They are visually different from the remaining cells for January through October, since those are only classed as table data <TD>.
EXERCISE: When reading the table above, notice that using normal table reading keystrokes while moving up and down columns two through four, all of the month names in column one are spoken. However, the table cells for the months January through October are not actually properly coded as table headers. JAWS is set to automatically read the first cell of any row and the top cell of any column as table headers. If you want to use JAWS to test this, follow the steps below to change JAWS to read only marked headers - that is, those properly coded with the
You can set the Adjust JAWS Option back to Table Titles Announce - Both Row and Column again when you are finished, or you can leave it set to Only Marked Headers, depending on your preference. In summary, the five choices for reading titles in tables with JAWS now include the following:
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 your 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.
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."
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.
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 |
You can select text in an HTML table and then copy it, just as you can in any document. You can then paste that information into a text editor, such as Notepad or Microsoft® Word. New beginning with JAWS 9.0 and MAGic 11.0 is the ability to select text using the keyboard, including tables, from an HTML document or Web page, and retain the formatting of the original page or document when pasting it into an HTML formatted e-mail or Word document. For example, you can now select tables, links, headings, and more from the HTML environment and paste them intact into Microsoft Word or HTML e-mail. This is great for people who need to copy things from the Web and then paste information into reports or other documentation where the original formatting is desired.
The default mode for selecting text for both JAWS and MAGic is now Select and Copy - Full content using onscreen highlight. What this new feature also gives you is visual highlighting of text when selecting text with the keyboard.
EXERCISE: If you have JAWS running either alone or in combination with MAGic, do the following to select and copy an entire table from a Web page:
MAGic users can either select the table using keyboard commands such as SHIFT+DOWN ARROW to select a line at a time or by clicking and dragging with a mouse.
|