WebAIM - Web Accessibility In Mind

E-mail List Archives

Re: Another table sort question

for

From: Birkir R. Gunnarsson
Date: Oct 30, 2018 8:08AM

You could add JavaScript to the tables to fix them, you can file an
accessibility feedback report for the vendor to have them fix their
out-of-the-box code.
It's all about trying any and all approaches to move accessibility forward.
Sometimes it is a frustrating game, but sometimes you manage the wins
and the feel good moments.



On 10/30/18, Jeremy Echols < <EMAIL REMOVED> > wrote:
> 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.
> > > > > > > > >


--
Work hard. Have fun. Make history.