bootstrap icon indicating copy to clipboard operation
bootstrap copied to clipboard

Datepicker: Accessibility for screen readers and keyboard navigation

Open leslie945 opened this issue 9 years ago • 7 comments

Using UI Bootstrap 1.1.2 and the current 'ui.bootstrap.datepicker' plunker example:

Issues: Navigation instructions are not read when pop-up opens. Cannot use keyboard navigation to get to the top navigation buttons, thus cannot use the quick month/year change ability.

Annoyances: Each day is read as a button, and the row and column numbers are read along with the day number which could lead to confusion.

leslie945 avatar Feb 22 '16 16:02 leslie945

@leslie945, was there a particular reason you removed our issue template and free-formed your response? The reason we have the template is to help us help you better and faster by removing an enormous amount of legwork we were required to do before the template was in place. At first glance, it looks like you've been clear in your description (we'll ask for more info if we need it, but again, this is one of the purposes of the template), but in the future, please adhere to the template. Thanks.

icfantv avatar Feb 22 '16 18:02 icfantv

Sorry about that, I was trying to separate actual bugs from my other suggestions. Also, I was a bit confused by what to fill in the template with, since I was basing my bug on the functionality currently shown for the date picker at https://angular-ui.github.io/bootstrap/

On Mon, Feb 22, 2016, 12:13 PM Adam Gordon [email protected] wrote:

@leslie945 https://github.com/leslie945, was there a particular reason you removed our issue template and free-formed your response? The reason we have the template is to help us help you better and faster by removing an enormous amount of legwork we were required to do before the template was in place. At first glance, it looks like you've been clear in your description (we'll ask for more info if we need it, but again, this is one of the purposes of the template), but in the future, please adhere to the template. Thanks.

— Reply to this email directly or view it on GitHub https://github.com/angular-ui/bootstrap/issues/5520#issuecomment-187300101 .

leslie945 avatar Feb 22 '16 18:02 leslie945

@leslie945, no worries - just info for the future. Cheers.

icfantv avatar Feb 22 '16 18:02 icfantv

For the annoyances section, what would you recommend? Should it only read out the day the user is on?

The UX for the issues part does seem to be wrong, but this may require some thinking as to how we want all of the keypresses to be handled. Do you have any particular recommendations here?

wesleycho avatar Feb 24 '16 14:02 wesleycho

For the annoyances section, I would have it just read day of week, month, day, and year. IE: Friday, February 26, 2016

Best solution I can think of for the UX issues is make those areas tabable or trigger able via single letter keys: n - next, p - previous, y - year view, m - month view, d - day view, etc.

On Wed, Feb 24, 2016, 8:51 AM Wesley Cho [email protected] wrote:

For the annoyances section, what would you recommend? Should it only read out the day the user is on?

The UX for the issues part does seem to be wrong, but this may require some thinking as to how we want all of the keypresses to be handled. Do you have any particular recommendations here?

— Reply to this email directly or view it on GitHub https://github.com/angular-ui/bootstrap/issues/5520#issuecomment-188286597 .

leslie945 avatar Feb 24 '16 15:02 leslie945

Is this still something that can be fixed? This is not "inconvenient" this is a real issue. Put yourself in the position as a blind user and try to set the date with this date picker. I've tested this with all possible screen readers and datepickers and it looks like this particular datepicker behaves the worst. I even posted an issue with ChromeVox screen reader and they found that problem is again with the date picker rewriting nodes that make the screen reader read it. A lot of the markup is rewritten. It's good to have a stable DOM subtree and move focus or aria-activedescendant around that. https://bugs.chromium.org/p/chromium/issues/detail?id=699725 This issue persists with new Bootstrap 4 as well. Please revisit, this is a serious problem.

dadoadk avatar Nov 15 '17 14:11 dadoadk

Can someone tell if this issue has been fixed?

MounikaRMaddhula avatar Sep 04 '18 20:09 MounikaRMaddhula