Data table with TH row/columns headers with SCOPE Screen reader compatibility

Last updated: September 5, 2016

Expected Result: works in a screen reader

Actual Result: causes problems in 11 screen reader / browser combinations

WCAG Technique: H63: Using the scope attribute to associate header cells and data cells in data tables

Code used for this test:


        <table border='1'>
        <caption>Contact Information</caption>
        <tr>
            <td></td>
            <th scope='col'>Name</th>
            <th scope='col'>Phone#</th>
            <th scope='col'>Fax#</th>
            <th scope='col'>City</th>
        </tr><tr>
            <td>1.</td>
            <th scope='row'>Joel Garner</th>
            <td>412-212-5421</td>
            <td>412-212-5400</td>
            <td>Pittsburgh</td>
        </tr><tr>
            <td>2.</td>
            <th scope='row'>Clive Lloyd</th>
            <td>410-306-1420</td>
            <td>410-306-5400</td>
            <td>Baltimore</td>
        </tr><tr>
            <td>3.</td>
            <th scope='row'>Gordon Greenidge</th>
            <td>281-564-6720</td>
            <td>281-511-6600</td>
            <td>Houston</td>
        </tr>
        </table>
    

Change History

Last updated: September 5, 2016

Screen readerBrowserModeNotesWhat the user hears
Fail NVDA 2016.2FF48 ReadingColumn headers, but no row headers, announced for TD cells. Speak Table with 4 rows and 5 columns, contact information. Row 1, column 1. Column 2, name. Column 3, phone number. Column 4, fax number. Column 5, city. Row 2, column 1, one. Name, column 2, Joel Garner. Phone number, column 3, 412 212 5421. Fax number, column 4, 412 212 5400. City, column 5, Pittsburgh
Fail NVDA 2016.2IE11 ReadingColumn headers, but no row headers, announced for TD cells. Speak Table with 4 rows and 5 columns, contact information. Row 1, column 1. Column 2, name. Column 3, phone number. Column 4, fax number. Column 5, city. Row 2, column 1, one. Name, column 2, Joel Garner. Phone number, column 3, 412 212 5421. Fax number, column 4, 412 212 5400. City, column 5, Pittsburgh
Fail NVDA 2015.2FF41 ReadingColumn headers, but no row headers, announced for TD cells. Speak Table with 4 rows and 5 columns, contact information. Row 1, column 1. Column 2, name. Column 3, phone. Column 4, fax. Column 5, city. Row 2, column 1, one. Name, column 2, Joel Garner. Phone, column 3, 412 212 5421. Fax, column 4, 412 212 5400. City, column 5, Pittsburgh
Fail NVDA 2015.2IE11 ReadingColumn headers, but no row headers, announced for TD cells. Speak Table with 4 rows and 5 columns, contact information. Row 1, column 1. Column 2, name. Column 3, phone. Column 4, fax. Column 5, city. Row 2, column 1, one. Name, column 2, Joel Garner. Phone, column 3, 412 212 5421. Fax, column 4, 412 212 5400. City, column 5, Pittsburgh
Fail NVDA 2014.1FF41 ReadingColumn headers, but no row headers, announced for TD cells. Speak Table with 4 rows and 5 columns, contact information. Row 1, column 1. Column 2, name. Column 3, phone. Column 4, fax. Column 5, city. Row 2, column 1, one. Name, column 2, Joel Garner. Phone, column 3, 412 212 5421. Fax, column 4, 412 212 5400. City, column 5, Pittsburgh
Fail NVDA 2014.1IE11 ReadingColumn headers, but no row headers, announced for TD cells. Speak Table with 4 rows and 5 columns, contact information. Row 1, column 1. Column 2, name. Column 3, phone. Column 4, fax. Column 5, city. Row 2, column 1, one. Name, column 2, Joel Garner. Phone, column 3, 412 212 5421. Fax, column 4, 412 212 5400. City, column 5, Pittsburgh
OK JAWS 17.0.2619FF48 ReadingRow header read out along with column header for cells. Speak Table with 5 columns and 4 rows. Contact information. Blank (column 1, row 1, blank). Name (column 2, row 1, name). Phone number (column 3, row 1, phone number). Fax number (column 4, row 1, fax number). City (column 5, row 1, city). One (column 1, row 2, one). Joel Garner (column 2, row 2, name, Joel Garner). 412 212 5421 (column 3, row 2, phone number, Joel Garner, 412 212 5421). 412 212 5400 (column 4, row 2, fax number, Joel Garner, 412 212 5400). Pittsburgh (column 5, row 2, city, Joel Garner, Pittsburgh)
OK JAWS 17.0.2619IE11 ReadingRow header read out along with column header for cells. Speak Table with 5 columns and 4 rows. Contact information. Blank (column 1, row 1, blank). Name (column 2, row 1, name). Phone number (column 3, row 1, phone number). Fax number (column 4, row 1, fax number). City (column 5, row 1, city). One (column 1, row 2, one). Joel Garner (column 2, row 2, name, Joel Garner). 412 212 5421 (column 3, row 2, phone number, Joel Garner, 412 212 5421). 412 212 5400 (column 4, row 2, fax number, Joel Garner, 412 212 5400). Pittsburgh (column 5, row 2, city, Joel Garner, Pittsburgh)
OK JAWS 16.0.4350FF41 ReadingRow header read out along with column header for cells. Speak Table with 5 columns and 4 rows. Contact information. Blank (column 1, row 1, blank). Name (column 2, row 1, name). Phone number (column 3, row 1, phone number). Fax number (column 4, row 1, fax number). City (column 5, row 1, city). One (column 1, row 2, one). Joel Garner (column 2, row 2, name, Joel Garner). 412 212 5421 (column 3, row 2, phone number, Joel Garner, 412 212 5421). 412 212 5400 (column 4, row 2, fax number, Joel Garner, 412 212 5400). Pittsburgh (column 5, row 2, city, Joel Garner, Pittsburgh)
OK JAWS 16.0.4350IE11 ReadingRow header read out along with column header for cells. Speak Table with 5 columns and 4 rows. Contact information. Blank (column 1, row 1, blank). Name (column 2, row 1, name). Phone number (column 3, row 1, phone number). Fax number (column 4, row 1, fax number). City (column 5, row 1, city). One (column 1, row 2, one). Joel Garner (column 2, row 2, name, Joel Garner). 412 212 5421 (column 3, row 2, phone number, Joel Garner, 412 212 5421). 412 212 5400 (column 4, row 2, fax number, Joel Garner, 412 212 5400). Pittsburgh (column 5, row 2, city, Joel Garner, Pittsburgh)
OK JAWS 15.0.9023FF41 ReadingRow header read out along with column header for cells. Speak Table with 5 columns and 4 rows. Contact information. Blank (column 1, row 1, blank). Name (column 2, row 1, name). Phone number (column 3, row 1, phone number). Fax number (column 4, row 1, fax number). City (column 5, row 1, city). One (column 1, row 2, one). Joel Garner (column 2, row 2, name, Joel Garner). 412 212 5421 (column 3, row 2, phone, Joel Garner, 412 212 5421). 412 212 5400 (column 4, row 2, fax, Joel Garner, 412 212 5400). Pittsburgh (column 5, row 2, city, Joel Garner, Pittsburgh)
OK JAWS 15.0.9023IE11 ReadingRow header read out along with column header for cells. Speak Table with 5 columns and 4 rows. Contact information. Blank (column 1, row 1, blank). Name (column 2, row 1, name). Phone number (column 3, row 1, phone number). Fax number (column 4, row 1, fax number). City (column 5, row 1, city). One (column 1, row 2, one). Joel Garner (column 2, row 2, name, Joel Garner). 412 212 5421 (column 3, row 2, phone number, Joel Garner, 412 212 5421). 412 212 5400 (column 4, row 2, fax number, Joel Garner, 412 212 5400). Pittsburgh (column 5, row 2, city, Joel Garner, Pittsburgh)
OK JAWS 14.0.9002FF41 ReadingRow header read out along with column header for cells. Speak Table with 5 columns and 4 rows. Contact information. Blank (column 1, row 1, blank). Name (column 2, row 1, name). Phone number (column 3, row 1, phone number). Fax number (column 4, row 1, fax number). City (column 5, row 1, city). One (column 1, row 2, one). Joel Garner (column 2, row 2, name, Joel Garner). 412 212 5421 (column 3, row 2, phone, Joel Garner, 412 212 5421). 412 212 5400 (column 4, row 2, fax, Joel Garner, 412 212 5400). Pittsburgh (column 5, row 2, city, Joel Garner, Pittsburgh)
OK JAWS 14.0.9002IE11 ReadingRow header read out along with column header for cells. Speak Table with 5 columns and 4 rows. Contact information. Blank (column 1, row 1, blank). Name (column 2, row 1, name). Phone number (column 3, row 1, phone number). Fax number (column 4, row 1, fax number). City (column 5, row 1, city). One (column 1, row 2, one). Joel Garner (column 2, row 2, name, Joel Garner). 412 212 5421 (column 3, row 2, phone number, Joel Garner, 412 212 5421). 412 212 5400 (column 4, row 2, fax number, Joel Garner, 412 212 5400). Pittsburgh (column 5, row 2, city, Joel Garner, Pittsburgh)
OK WindowEyes 9.2IE11Table Speak Table, 4 rows, 5 columns, contact information. Name. Phone. Fax. City. One. Name, Joel Garner. Phone, 412 212 5421. Fax, 412 212 5400. City, Pittsburgh. Two. Name, Clive Lloyd. Phone, 410 306 1420. Fax, 410 306 5400. City, Baltimore.
Fail WindowEyes 8.4IE11TableScope has no effect - header for name column ignored. Speak Table 14, contact information start, 4 rows, 5 columns. (Table 14, contact information, on R one C one) Name. Phone. Fax. City. One. Joel Garner. Phone, 412 212 5421. Fax, 412 212 5400. City, Pittsburgh. Two. Clive Lloyd. Phone, 410 306 1420. Fax, 410 306 5400. City, Baltimore.
Fail VoiceOver OSX 10.11Safari 9.1.2 ReadingRow header not read out along with column header for cells (same result with and without scope). Speak Contact information, table, 5 columns, 4 rows. Blank, column 1 of 5. Name, column 2 of 5. Phone number, column 3 of 5. Fax number, column 4 of 5. City, column 5 of 5. Row 2 of 4 name, one, column 1 of 5. Name, Joel Garner, column 2 of 5. Phone, 412 212 5421, column 3 of 5. Fax, 412 212 5400, column 4 of 5. City, Pittsburgh, column 5 of 5. Row 3 of 4 name, two, column 1 of 5. Name, Clive Lloyd, column 2 of 5. Phone, 410 306 1420, column 3 of 5. Fax, 410 306 5400, column 4 of 5. City, Baltimore, column 5 of 5.
Fail VoiceOver OSX 10.10Safari 9.0.1 ReadingRow header not read out along with column header for cells (same result with and without scope). Speak Contact information, table, 5 columns, 4 rows. Blank, column 1 of 5. Name name, column 2 of 5. Phone, phone number, column 3 of 5. Fax, fax number, column 4 of 5. City, city, column 5 of 5. Row 2 of 4 name, one, column 1 of 5. Name, Joel Garner, column 2 of 5. Phone, 412 212 5421, column 3 of 5. Fax, 412 212 5400, column 4 of 5. City, Pittsburgh, column 5 of 5. Row 3 of 4 name, two, column 1 of 5. Name, Clive Lloyd, column 2 of 5. Phone, 410 306 1420, column 3 of 5. Fax, 410 306 5400, column 4 of 5. City, Baltimore, column 5 of 5.
Fail VoiceOver iOS 9.1Safari iOS 9.1TouchIncomprehenisible - reads out the wrong headings for cells Speak Contact information, table start. Phone number, name. Fax number, phone number. City, fax number. City. Name, one. Phone number, Joel Garner. Fax number, 412 212 5421. City, 412 212 5400. Pittsburgh. Name, two. Phone number, Clive Lloyd. Fax number, 410 306 1420. City, 410 306 5400. Baltimore.
Fail VoiceOver iOS 8.4Safari iOS 8.4TouchIncomprehenisible - reads out the wrong headings for cells Speak Phone number, name, table start. Fax number, phone number. City, fax number. City. Name, one. Phone number, Joel Garner. Fax number, 412 212 5421. City, 412 212 5400. Pittsburgh. Name, two. Phone number, Clive Lloyd. Fax number, 410 306 1420. City, 410 306 5400. Baltimore.

SortSite rules: AccWcag1-5.2.1

Test notes

The threshold for inclusion in these results is 5% usage in the most recent WebAIM screen reader survey. Chrome and Android still fall below the 5% threshold.

All tests were carried out with screen reader factory settings. JAWS in particular has a wide variety of settings controlling exactly what gets spoken.

Screen readers allow users to interact in different modes, and can produce very different results in each mode. The modes used in these tests are:

In the «What the user hears» column: