search

Polymer / old-docs-site

Old Polymer site. Replaced by these repos: polymer-project.org, polymer-library-docs
https://www.polymer-project.org
1.02k stars 2.44k forks source link

[Accessibility - across multiple pages] Keyboard navigation on left panel #1137

Open lpalmaro opened 9 years ago

lpalmaro commented 9 years ago

On Chrome OS with ChromeVox, the left panel isn't keyboard navigable. I cannot access this with a screen reader or keyboard.

Across all platforms, I should be able to tab to this, and use just the arrow keys and enter to navigate up and down, with a clear focus state.

arthurevans commented 7 years ago

Keyboard navigation is definitely improved now—you can get to everything, the order is more or less logical, and there also appears to be clear focus state on all of the links.

However navigating the left menu is a matter of tabbing between links rather than using the arrow keys. I don't have a great feeling for how usable the site is at present compared to the rest of the world... For example, it appears that by default Chrome Vox starts reading the left menu to you rather than the page content. Again, not sure how that compares with best practices. @robdodson @lpalmaro wonder if you have input on this?

robdodson commented 7 years ago

@arthurevans are you testing ChromeVox on ChromeOS or the Chrome extension on Mac? ChromeVox has two flavors now. The Chrome extension doesn't really handle shadow dom and is kind of in maintenance mode.

I was able to tab through the menu which is 'OK'. Since the menu itself is just using anchor tags I guess that's to be expected as far as default behaviors go. It'd be nice if we could do up/down arrow key support as a next step enhancement but I think it's less critical now that you can at least get around using Tab

arthurevans commented 7 years ago

@keanulee could we handle up/down arrow keys in the left nav?

How would that work usually, @robdodson? Arrow key moves highlight, enter or space selects? Or does arrow key navigate immediately?

robdodson commented 7 years ago

arrow key moves focus to the next menu item, space/enter select.

keanulee commented 7 years ago

(I'm assuming you're referring to the left sidebar for desktop, not mobile. Let me know if that's incorrect.)

Currently, there is no JS controlling the links in the sidebar - they are just a series of links stacked vertically. We could consider adding a wrapper custom element that allows focusing items with up/down arrows (would act similar to paper-listbox). This would act in addition to the default tab behavior.

I don't consider this high priority though given that the links are already tab-able (like any other non-customized links).