WebAIM - Web Accessibility In Mind

E-mail List Archives

Re: Column headers are not navigable in grid

for

From: Bryan Garaventa
Date: Dec 16, 2017 4:56PM

Hi,
Personally I recommend doing something like the following if you have dedicated clickable icons within each of the sortable column headers.

<th aria-sort="ascending">
<span id="c1name">Column Name</span>
<span class="clickableSortIcon" tabindex="0" role="button" aria-label="Sort Column" aria-describedby="c1name" ></span>
</th>

You would need to toggle aria-sort accordingly, and this ensures that all of the sortable icons are focusable, include a valid role for screen reader users, and set both the Name and Description properties accordingly to ensure that all unique and relevant data is conveyed when arrowing in the virtual buffer or when tabbing using something like applications mode.

You will also need to ensure that the clickable element includes a redundant keyDown handler that performs the same action as click, preferably recognizing both the Enter and Spacebar keystrokes. The reasons for this are fully described in the section at
http://whatsock.com/training/#hd31

All the best,
Bryan


Bryan Garaventa
Accessibility Fellow
Level Access, Inc.
<EMAIL REMOVED>
415.624.2709 (o)
www.LevelAccess.com