NVDA reads out datepicker's current cell selection postion

Question

I've set up a fiddle here https://jsfiddle.net/j49gz3g3

<div class="container">
    
    <div class="row">
        <div class="form-group">
            <label for="dt">Birth Date</label>
            <input type="text" name="dt" id="dt" placeholder="" class="nl-datepicker" />            
        </div>
    </div>
</div>

While navigating between dates using the keyboard arrow keys, NVDA reads out

Friday, May 12 2016 row 3

Thursday, May 4 2016 column 5

whereas the expected output is

Friday, May 12 2016

Thursday, May 4 2016

Is there a way in which the reading out of the cell position (row 3, column 5) be avoided? Or is this a standard behavior with tables involving data?

This is happening in all major browsers (viz IE, FF, Chrome)

PS: Also attached a screenshot for reference.

score 2 · Accepted Answer · answered May 13 '16 at 15:48

2

This is standard screen-reader behavior when you are using a data table.

An alternative would be to program a widget with role="application" but accessible widgets are tricky things so I suggest you just leave it this way. Those using screen readers are used to this behavior.

I recently created a page about accessible table best practices. Here it is if you are interested: http://haltersweb.github.io/Accessibility/tables.html

answered May 13 '16 at 15:48

haltersweb

3,001
2
13
14

Thanks for that information. I went through the link. Informative indeed. Just wanted to ask, do you happen to know of a accesible datepicker which works with a `role="application"` instead of `role="grid"`? – asprin May 13 '16 at 16:43
I only know of data-table ones. Below are two date pickers to share from people well-known in the accessibility space but their both table-based... – haltersweb May 13 '16 at 17:48
This first example is based on jQuery UI's date picker but with additions for accessibility. Here is a version done by Deque (http://www.deque.com/blog/accessible-jquery-ui-datepicker/) and here is a version done by Hans Hillen who is now with the Paciello Group (https://hanshillen.github.io/jqtest/#goto_datepicker). They are from 2013 though. – haltersweb May 13 '16 at 17:49
The second example is by the OpenAjax Alliance Accessibility Task Force. I think this is a more recent one: http://oaa-accessibility.org/example/15/ – haltersweb May 13 '16 at 17:50
If you enjoy accessibility I suggest you become a member of the IAAP (International Association of Accessibility Professionals). There is a great forum on the site called IAAP Connections where people in the a11y industry post and answer questions on accessibility issues: http://www.accessibilityassociation.org/ – haltersweb May 13 '16 at 17:52
Thanks. That might help me in the future. Anyhow, I found a solution to my issue. Will post it as an answer soon – asprin May 14 '16 at 11:16

score 0 · Answer 2 · answered May 14 '16 at 11:18

0

OK, for folks out there who would want this to happen, here's how you do it:

Go to NVDA's "Document Formatting" option and uncheck "Report table cell coordinates". The row and column position will no longer be read out then.

answered May 14 '16 at 11:18

asprin

9,579
12
66
119

NVDA reads out datepicker's current cell selection postion

2 Answers2