E-mail List Archives

Search E-mail List Archives for

Number of posts in this thread: 8 (In chronological order)

From: Alan Zaitchik
Date: Wed, Aug 05 2020 4:41PM
Subject: Sortable table columns
No previous message | Next message →

I need to put a button inside certain column headers of a table to support sorting the table onnthose columns. The trouble is that JAWS and NVDA and VoiceOver all read out the text of the sort button when they read out the rest of the column header— for every blasted data cell in the column, as one navigates across a row ! It's unbearably verbose. I want to hear the button text when moving into the header cell itself, which is why I cannot just hide it from screen readers, but not across dats cells.
I've tried aria labeling but it's gives the same results as button text. Aria-described by sort of worked with VO but not with JAWS or NVDA.
I really don't want to write focus event handlers to detect focus location and toggle what's read out by screen readers and what's not.
Anyone out there with a brilliant suggestion?
Thx!
A

From: Birkir R. Gunnarsson
Date: Wed, Aug 05 2020 4:59PM
Subject: Re: Sortable table columns
← Previous message | Next message →

I have always solved this by making the column header text of a
sortable column into a
Add screen reader instructional text for good measure (it can even be
visible if you want keyboard only users to benefit).
button, use aria-sort on the header cell to indicate one that is
actively sorted.
e.g., if you can sort by name or city but not phone number:
<span class="srOnly" id="sbInstr">Click the column header buttons to
sort by that column</span>

<table aria-describedby="sbInsr">
<tr>
<th><button>Name</button></th>
<th><button>City</button></th>
<th>Phone number</th>
</tr>
...
</table>

If user clicks the name button, add aria-sort="ascending" to the <th>
cell for that column to indcate it is sorted by name, ascending.
If you add visual sortability and sort direction cues to the column
headers, make sure those are coded as presentation or hidden using
aria-hidden.


We've done some screen reader usability studies on this pattern and in
those studies people had no difficulty figuring this out.
If designers push back on the <button> element, just use <span
tabindex="0" role="button"></span> and use your Javascript to make it
act like a button.


On 8/5/20, Alan Zaitchik < = EMAIL ADDRESS REMOVED = > wrote:
> I need to put a button inside certain column headers of a table to support
> sorting the table onnthose columns. The trouble is that JAWS and NVDA and
> VoiceOver all read out the text of the sort button when they read out the
> rest of the column header— for every blasted data cell in the column, as one
> navigates across a row ! It's unbearably verbose. I want to hear the button
> text when moving into the header cell itself, which is why I cannot just
> hide it from screen readers, but not across dats cells.
> I've tried aria labeling but it's gives the same results as button text.
> Aria-described by sort of worked with VO but not with JAWS or NVDA.
> I really don't want to write focus event handlers to detect focus location
> and toggle what's read out by screen readers and what's not.
> Anyone out there with a brilliant suggestion?
> Thx!
> A
> > > > >


--
Work hard. Have fun. Make history.

From: glen walker
Date: Wed, Aug 05 2020 5:12PM
Subject: Re: Sortable table columns
← Previous message | Next message →

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.

From: Birkir R. Gunnarsson
Date: Wed, Aug 05 2020 6:11PM
Subject: Re: Sortable table columns
← Previous message | Next message →

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 ADDRESS 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.

From: Mallory
Date: Thu, Aug 06 2020 5:59AM
Subject: Re: Sortable table columns
← Previous message | Next message →

This is a great idea, Birkir.

Typically the sites I check have a graphic button instead of the colheader text being in the button, and I've wrestled with "how can I click these with my voice" against the "now the crappy sort text becomes colheader text". If I can get buy-in to set the colheader text as buttons and get the designers to style them so they actually look like buttons (this one is hard lol), this is a winner.

cheers
_mallory

On Thu, Aug 6, 2020, at 2:11 AM, Birkir R. Gunnarsson 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 ADDRESS 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.
> > > > >

From: glen walker
Date: Thu, Aug 06 2020 7:25AM
Subject: Re: Sortable table columns
← Previous message | Next message →

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 ADDRESS 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 ADDRESS 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.
> > > > >

From: Birkir R. Gunnarsson
Date: Thu, Aug 06 2020 12:10PM
Subject: Re: Sortable table columns
← Previous message | Next message →

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 ADDRESS 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 ADDRESS 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 ADDRESS 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.

From: Mallory
Date: Fri, Aug 07 2020 10:39AM
Subject: Re: Sortable table columns
← Previous message | No next message

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 ADDRESS 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 ADDRESS 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 ADDRESS 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.
> > > > >