Enter and space keys actions + scroll on focus
Olá!
I watched to @robdodson talk about accessibility and started to play around with the shop to learn more about the subject. Turns out that I notice two things that I found a little strange.
1. Enter and space keys actions
I checked the WAI-ARIA Authoring Practices about button and link tags. For buttons, both actions - enter and space - triggers a click. And for the link, just enter executes the link. On the shop, when I'm navigating using just the tab key, everything is ok. But when I tried to access a menu item, the home link or even the shop now button, it just works with the enter key. When I had hit space I got a scroll. The only action that worked with space was the cart button. I'm not sure what should be the correct behaviour on all cases. But I think that at least on the shop now button and on the menu it should have worked, right?
2. Scroll on focus
Again, I'm navigating around, using the tab key. And when the focus goes to an element that it's off the viewport, the page scrolls to a point that I can see what was focused, awesome! But them I hit the end of the page and started to go backwards (using shift + tab). At the point where the focus goes to the cart button the scroll do not respond anymore (gif). I also notice that if the focus is on some menu item - in a point where with the next tab press the focus continues on the menu - and the menu is not visible, the scroll doesn't respond neither. I imagine that it's something that could be improved.
That is it :)
Hi there
- Enter and space keys actions
That is the expected behavior. Some anchors visually look like buttons but they are anchors for SEO purposes.
- Scroll on focus
I can see the issue and I think that could be improved. The header has made it such that the browser thinks that those items are in the viewport, so there's nothing to bring into view.
+1 to Shift+Tab scroll problem. When I use keyboard to focus back up to "Shop", it's out of view. The browser doesn't scroll back up which is expected native behavior. (Tested on Mac Chrome and Mac Firefox.)