E-mail List Archives
Thread: Another table sort question
Number of posts in this thread: 4 (In chronological order)
From: Isabel Holdsworth
Date: Fri, Oct 26 2018 1:38AM
Subject: Another table sort question
No previous message | Next message →
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 ADDRESS 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?
> > > > >
From: Birkir R. Gunnarsson
Date: Fri, Oct 26 2018 9:58AM
Subject: Re: Another table sort question
← Previous message | Next message →
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 ADDRESS 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 ADDRESS 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.
From: Jeremy Echols
Date: Tue, Oct 30 2018 7:19AM
Subject: Re: Another table sort question
← Previous message | Next message →
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 ADDRESS REMOVED = > on behalf of Birkir R. Gunnarsson < = EMAIL ADDRESS 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 ADDRESS 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 ADDRESS 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.
From: Birkir R. Gunnarsson
Date: Tue, Oct 30 2018 8:08AM
Subject: Re: Another table sort question
← Previous message | No next message
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 ADDRESS 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 ADDRESS REMOVED = > on behalf of
> Birkir R. Gunnarsson < = EMAIL ADDRESS 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 ADDRESS 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 ADDRESS 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.