IssueTracker

Issue report
----------------
Hi, all.   We use Google Maps on our website to support store locator functionality.  During a recent ADA audit of our site,  the "Keyboard Shortcuts" component on Google's map was flagged as a violation.   I've posted a copy of our auditor's finding and recommended mitigation below.  

Ideally, your team would implement updates to this component to ensure that it's accessible to all Google Maps users--not just our customers.   If that's not possible, the auditor has suggested a workaround for our team that would have us insert some JavaScript to add the necessary html.  While this isn’t ideal and may break if Google's code is updated, it could provide a temporary fix to the code.   We're really hoping to avoid this if at all possible.

Please scroll down for the issue description,  recommendation,  and suggested code we should inject as a workaround if Google chooses not to address this ADA accessibility violation.

Thanks for your help!
Michelle


ISSUE DESCRIPTION:
There are table headers that are not associated with their corresponding data cells. Examples include: In the keyboard shortcut model the table do not have the table header.

Example:  In  Google map’s keyboard shortcut model the table does not have the table header.

User impact: Screen reader users will not be able to determine the relationships between cells in these tables.

Code Reference:
<table><tbody><tr><td style="text-align: right;"><div class="VdnQmO-keyboard-shortcuts-view--shortcut-key"><kbd aria-label="Left arrow">←</kbd></div></td><td>Move left</td></tr><tr><td style="text-align: right;"><div class="VdnQmO-keyboard-shortcuts-view--shortcut-key"><kbd aria-label="Right arrow">→</kbd></div></td><td>Move right</td></tr>(...)Zoom out</td></tr></tbody></table>


RECOMMENDED MITIGATION:
-Ensure data table headers are properly identified. Ensure all cells that function as row or column headers use <th> elements. Additionally, ensure all <th> elements have a scope attribute set to "row" or "col" depending on whether the particular cell is a row header or a column header. Finally, if a header cell spans multiple rows or columns, set its rowspan or colspan attributes to the number of rows or cells it spans.

-If a table is sufficiently complex that these methods cannot associate a header with its cell, each cell must have a headers attribute set to a space-separated list of the IDs of the headers associated with the cell. This is often time-consuming and prone to error. Splitting complex tables into separate, simpler tables is strongly recommended.

Compliant Code Example:
<table><thead><tr> <th>Keyboard Button</th> <th >Button application</th> </tr> </thead><tbody><tr><td style="text-align: right;"><div class="VdnQmO-keyboard-shortcuts-view--shortcut-key"><kbd aria-label="Left arrow">←</kbd></div></td><td>Move left</td></tr><tr><td style="text-align: right;"><div class="VdnQmO-keyboard-shortcuts-view--shortcut-key"><kbd aria-label="Right arrow">→</kbd></div></td><td>Move right</td></tr>(...)Zoom out</td></tr></tbody></table>


SUGGESTED WORKAROUND (if Google won't mitigate the accessibility issues for this component):
insert some JavaScript to add the necessary html.  While this isn’t ideal and may break if the third party code is updated, it can provide a temporary fix to the code.  In this case, you would want to add <th> elements with <scope=”col”> or <scope=”row>.

In this example, I would recommend leaving “Keyboard Shortcuts” as an <h2> and making the arrow cells <th> elements with <scope=”row”>:

<table>
<tbody>
<tr><th style="text-align: right;" scope="row">
<kbd class="VdnQmO-keyboard-shortcuts-view--shortcut-key" aria-label="Left arrow">←</kbd></th>
<td>Move left</td>
</tr>
</tbody>
</table>