WebAIM - Web Accessibility In Mind

E-mail List Archives

Re: Sortable table columns

for

From: Mallory
Date: Aug 7, 2020 10:39AM

Unfortunately my solution for changing column widths is always a separate button inside the colheader. I don't think I can get around that becoming part of the colname there :(

cheers,
_mallory

On Thu, Aug 6, 2020, at 8:10 PM, Birkir R. Gunnarsson wrote:
> 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.
> > > > >