Devarshi,
Is aria-controls really useful here?
The JS needs to be fixed for the aria-label and aria-sort values.
Besides, the focus indicator is not visible; with CSS off, the up/down
arrows disappear. HTML images are better for the arrows I think and
can be assigned alt.
I realize this is an example of static headers with sort feature. So
consider adapting from the technique here
http://juicystudio.com/article/accessible_data_tables_static_headers.php
Exposing 2 tables to SR users and using a summary to explain the
disconnect is a no-no for me.
Thanks,
Sailesh
On 3/3/15, Devarshi Pant <devarshipant@gmail.com> wrote:
> Sailesh,
> The second grid seems to associate the headers in the first grid, and that
> could be due to the use of aria-controls - is that a correct observation?
> Some questions -
>>It's not clear whether this is an example of incorrect aria use, or maybe
> aria overuse. Assuming aria (code) is correctly used, and screen reader is
> incorrectly interpreting the code, is it a violation / failure?
>> Visually it's a single data table, not structurally. Would it be okay to
> suggest in the table summary of the first grid something like, "There are
> two tables; this is the first table that hosts header cells. Table data
> follows in the second table." Should it then be considered navigable by
> screen reader users?
>>Is it reasonable to code to specs and not worry about how assistive
> technologies would react (in the interim, determine workarounds), knowing
> that someday these will eventually merge?
> -Devarshi
>
>
> On Mon, Mar 2, 2015 at 4:49 PM, Sailesh Panchang
> <sailesh.panchang@deque.com
>> wrote:
>
>> Devarshi,
>> I am testing with JAWS 16, NVDA 2015.1:
>>
>> There are two grids and column header row is repeated in both; the
>> first has no data rows and the 2nd grid has an empty first row.
>> This is confusing in itself.
>> Then:
>> On loading the page, on grid#1:
>> aria-controls=example
>> aria-label=Name: activate to sort column descending
>> aria-sort=ascending
>> Then I sorted the table using age:
>> aria-controls=example
>> aria-label=Name: activate to sort column ascending
>> aria-sort=ascending
>> In grid#2:col headers are in row#2 and I see
>> aria-controls=example
>> aria-label=Age: activate to sort column ascending
>> aria-sort=descending
>>
>> An example of incorrect ARIA use?
>> Thanks,
>> Sailesh
>>
>>
>> On 3/2/15, Devarshi Pant <devarshipant@gmail.com> wrote:
>> > HI All,
>> > Can someone test with a screen reader and determine if it announces the
>> > sort state of the active column header:
>> > http://www.datatables.net/examples/basic_init/scroll_y.html#
>> >
>> > I get the following results:
>> >>JAWS 13 and IE9 convey that headers are sortable but do not announce
>> >> the
>> > states (ascending / descending) once invoked. Note that the active
>> > state gets announced on tabbing and then shift tabbing back.
>> >>NVDA does not announce the headers.
>> > Would be nice to see additional test results.
>> > Thanks,
>> > Devarshi
>> >
>>
>