WebAIM - Web Accessibility In Mind

E-mail List Archives

Re: Screen Reader Table Header Usability Question

for

From: Wolfgang Berndorfer
Date: Jun 11, 2018 3:30PM

Hi all who care about screen reader UX,
Birkir suggests:
"just put the column header text in a button element".
Agree, but: We frequently find within ONE TH-Element for a column:
a) a date
b) a button like: Sort (up / down)
We all know more verbose button descriptions.
Now about screen reader UX:
When I navigate in the rows bellow with arrow right/left from column to
column, my screen reader will tell me something like this:
"Date Sort Up [Date info of Cell]"
But what from the column heading should be announce when entering the coumn
cell is just ""Date".
Purely a significant usability issue for screen readers. But as I know about
my own frustration about just screen reader usability issues and the
lethargy of most screen reader users to shout for better practise:
My technical idea would be:
1. For b) Button aria-label="" [empty] to overwrite the button text
defaultly at all.
2. Scripts to show the button for a screen reader, when the TH-button gets
focus.
(aria-hidden on the button would not work, as it would never get focus.)
Thanks for improving this technique or better solutions!
Wolfgang
-----Ursprüngliche Nachricht-----
Von: WebAIM-Forum [mailto: <EMAIL REMOVED> ] Im Auftrag
von Birkir R. Gunnarsson
Gesendet: Samstag, 09. Juni 2018 01:58
An: WebAIM Discussion List
Betreff: Re: [WebAIM] Screen Reader Table Header Usability Question

Just code the table headers that can be clicked to sort the column as
buttons.
If a user comes across a button, the user knows to click it. No need
to add extra verbiage, just put the column header text in a button
element.
When the table is sorted by that column, add aria-sort attribute
indicating the sort direction to the table cell.
<tr>
<th><button>name</button</th>
<th aria-sort="descending"><button>Date of birth</button></th>
<th>email address</th>
</tr>


On 6/5/18, Jonathan Cohn < <EMAIL REMOVED> > wrote:
> JIm,
>
> I have seen systems where the sort options are either available or
tubbable
> available as a combo box or possibly a popup menu . One could then remove
> the heading links to do sorting from the tab order.
> Best wishes,
>
> Jonathan Cohn
>
>
>
>> On Jun 5, 2018, at 8:32 PM, Jim Homme < <EMAIL REMOVED> > wrote:
>>
>> Hi,
>> I think this is more a usability question than an accessibility one, but
>> please feel free to correct me.
>>
>> I’m a screen reader user. I feel that I’m OK with the following
situation,
>> and wondered what your opinion is, and was hoping for a possible coding
>> answer.
>>
>> The situation is that there are tables on a site I’m testing. The table
>> header cells allow the user to sort columns in ascending order and
>> descending order if they click links contained in the header cells. Now
>> this is my opinion, which I would like you to comment on. I feel that if
>> possible, it would be OK for usability for the screen reader to skip that
>> the header cells can be sorted as the user navigates among the table data
>> cells, but hear that they can sort the columns when they are reading the
>> header cells. Assuming that you agree with this opinion, is there a
>> solution that allows this to happen? So far I have not thought of one.
>>
>> Thanks.
>>
>> Jim
>>
>>
>>
>> =========>> Jim Homme
>> Product Manager
>> Digital Accessibility
>> Bender Consulting Services
>> 412-787-8567
>>
https://www.benderconsult.com/our%20services/hightest-accessible-technology-
solutions
>> People with disabilities, access job openings at
>> https://www.benderconsult.com/careers/job-openings
>>
>>
>> >> >> >> >
> > > > >


--
Work hard. Have fun. Make history.