WebAIM - Web Accessibility In Mind

E-mail List Archives

Re: Another table sort question

for

From: Jeremy Echols
Date: Oct 30, 2018 7:19AM

When I build my own tables, that's my approach, but that Datatables widget is what we have used for situations that require a more "complete" solution. For instance, the hand-coded tables I tend to build don't do things like loading only 20 rows at a time from a server-side query that's got thousands of entries.

So I guess the take-away here is that Datatables isn't very accessible and the only solution at the moment is to improve the hand-coded tables I would otherwise use?
From: WebAIM-Forum < <EMAIL REMOVED> > on behalf of Birkir R. Gunnarsson < <EMAIL REMOVED> >
Sent: Friday, October 26, 2018 8:58 AM
To: WebAIM Discussion List
Subject: Re: [WebAIM] Another table sort question

My approach to sortable tables is to use the aria-sort attribute when
appropriate on the <th> cells, and code the actionable headers as
buttons.

<table>
<tr>
<th aria-sort="ascending">Name</button></th>
<th><button>Age</th>
<th>Address</th>
</tr>
...
<table>

You may need to add a sentence such as "to sort the table by the
values in a column, click the button in the column header.
You can use a visual indicator hidden from screen readers to indicate the sort.
This approach enables a screen reader user to know what can be sorted,
indicates activate sort and does not add a ton of unnecessary text to
every column header, important because users have to listen to them
all the time.


On 10/26/18, Isabel Holdsworth < <EMAIL REMOVED> > wrote:
> I find this table quite counter-intuitive. In the top row, pressing
> Tab moves across the row. But as soon as the focus moves out of the
> headers and into the data, pressing Tab moves row by row, not column
> by column.
>
> And having to listen to all of that sorting information as I move
> around the data would drive me crazy if I had to spend much time
> working with tables like this.
>
> If the instruction were provided by the ARIA-DESCRIBEDBY instead of
> the ARIA-LABELLEDBY attribute, I wonder if the instructions would
> still be spoken by screenreaders when the user moves to a new column
> and the screenreader reports the column header? If not, then IMO this
> would be a great solution.
>
> On 19/06/2018, Jeremy Echols < <EMAIL REMOVED> > wrote:
>> I'm looking at "Datatables" (see URL https://datatables.net/), and it
>> seems
>> to have done a lot to try and be accessible, but to me it seems a bit
>> iffy.
>> The context changes depending how I navigate the table, and depending on
>> the
>> context it may announce "Position" or "Position: activate to sort column
>> ascending" as the header as I browse the cells.
>>
>> Am I just not used to the right way to do a more interactive grid, or are
>> these quirks going to present problems in the real world?
>> >> >> >> >>
> > > > >


--
Work hard. Have fun. Make history.