WebAIM - Web Accessibility In Mind

E-mail List Archives

Re: Sortable table columns

for

From: Birkir R. Gunnarsson
Date: Aug 6, 2020 12:10PM

Yeah, there are no good options:
* You an't put any element outside of a <th> or <td> element, that
breaks the whole table structure, so no buttons or any other elements
outside of table cells.
* If you create a graphic button that uses aria-labelledby for the
table cell text, maybe it works but it probably causes the text to be
repeated twice
<th<span id="n1">Name</span>
<button aria-labelleddby="n1" class="sort"></button>
</th>
You could create a keyboard focusable button with the column header
text and use a graphical mouse button that is hidden from screen
readers and not focusable, or use some trick of using a real button
underneath a graphical button, Angular Material does that sort of
stuff all the time and it seems to work, but you are juggling a lot of
CSS and Javascript that way.

I think any solution other than just making the column header text of
a sortable column into a button is going to break the table or create
a lousy screen reader experience.


On 8/6/20, glen walker < <EMAIL REMOVED> > wrote:
> Right, which I think (I might be wrong) is what the original question was
> about. I thought there was text outside the button as the column header
> but they didn't want the button text itself read as part of the column
> header. That's messy.
>
> On Wed, Aug 5, 2020 at 6:11 PM Birkir R. Gunnarsson <
> <EMAIL REMOVED> > wrote:
>
>> Typically those tables have the column header text + a button that
>> says "click to sort" or some such (or a visual arrow icon button that
>> has to have some sort of an accessible name).
>> Any accessible name that isn't part of the column header text is
>> repeated as part of the column header text for every cell in that
>> column (when people navigate to it) making it so annoying as to be
>> almost a blocker for someone using a screen reader.
>> Column header text has to be descriptive and succinct, which usually
>> makes for a perfect is an ideal button label.
>>
>> On 8/5/20, glen walker < <EMAIL REMOVED> > wrote:
>> > Yes, I've seen the pattern that Birkir uses but that requires the
>> > entire
>> > column header be a button. It sounded like the original question had
>> plain
>> > text in the header and a separate button for sorting.
>> > >> > >> > >> > >> >
>>
>>
>> --
>> Work hard. Have fun. Make history.
>> >> >> >> >>
> > > > >


--
Work hard. Have fun. Make history.