nav-bar: Screen readers can't properly interact with a button inside an option inside a listbox.

[MarcoZehe]

Bug, enhancement request, or proposal:

Bug

CodePen and steps to reproduce the issue:

CodePen Demo which demonstrates the issue:

Sorry, due to the inaccessibility of CodePen's editors, I cannot actually provide a codePen example for this. What I've done is change the ARIA roles to my proposed roles via the Firefox dev tools to prove that these work better with a screen reader.

Detailed Reproduction Steps:

1. Open any example that uses the md-nav-bar and md-nav-item elements.
2. Try to interact with them using the NVDA screen reader and current Firefox on Windows.

What is the expected behavior?

NVDA should see the buttons and be able to select each.

What is the current behavior?

NVDA sees the listbox, but nothing in it. Only if I press Enter while the virtual (browse mode) cursor is on the list box, do I get focus to the buttons and can select each. The reason is that a button inside an option inside a listbox is totally non-standard and not expected by any current design pattern.

What is the use-case or motivation for changing an existing behavior?

Better accessibility for blind screen reader users.

Which versions of AngularJS, Material, OS, and browsers are affected?

• AngularJS: Version used by Material.
• AngularJS Material: Current Master.
• OS: Windows 10
• Browsers: Firefox, Chrome.

Is there anything else we should know? Stack Traces, Screenshots, etc.

The design pattern from the WAI-ARIA Authoring Practices no longer exists and thus should be re-thought. The closest pattern is:

• Change the role on the md-nav-bar from "listbox" to "tablist".
• Change the role of the li inside the md-nav-item template from "option" to "presentation".
• Add the role "tab" to the button in the button template for the li element.
• Set aria-selected on the button directly instead of the li element, since that is now presentational.

That way, the widget becomes a tab list with true tabs as children in the accessibility layer, which is a totally valid pattern and supported by screen readers. The one piece that is missing, since it is not part of this compound widget, is the correllation to a tabpanel object.

The alternative would be to use toolbar and buttons that are turned into toggle buttons, or alternatively, radio buttons of which only one can be selected at a time, but since visually these often look like tabs anyway, using the tablist and tab roles is the closest match.

[Splaktar]

@MarcoZehe thank you for reporting this and for posting the PR! Do you know if the Stackblitz editor's accessibility is any better?

If not, I can open a bug with that team.
If it is, then I can start working on moving our site over to Stackblitz instead of CodePen.
Please let me know.

Based on https://www.w3.org/TR/wai-aria-1.0/complete#tablist and https://www.w3.org/TR/wai-aria-1.0/complete#tab, it does seem like the pattern you are proposing would be more likely to be widely supported.

Note that I can reproduce this problem on macOS Mojave with Chrome 69. Moving through the tabs just doesn't seem to be possible when using a screen reader.

[MarcoZehe]

@MarcoZehe thank you for reporting this and for posting the PR! Do you know if the Stackblitz editor's accessibility is any better?

If not, I can open a bug with that team.

Unfortunately not. It has lots of unlabeled buttons in the editor area, and the editor itself suffers from the same problem that CodePen's does: The actual textarea is only used for capturing input, the text contents is somehow drawn over it using Canvas or some other method that renders the text contents inaccessible. With this editor, it's even worse than with CodePen's, as there, I at least see the text in read-only mode in some divs outside the textarea, whereas here, I don't see it at all with a screen reader. That won't be easily fixable. I know CodeMirror are working on an accessible version, and it's not easy work to get WYSIWYG and accessibility together like this on the web.

[Splaktar]

OK, thank you for trying it out and providing some feedback! I've opened an issue in Stackblitz's GitHub repo.