w3c / aria-practices

WAI-ARIA Authoring Practices Guide (APG)
https://www.w3.org/wai/aria/apg/
Other
1.21k stars 344 forks source link

Keyboard mappings on feed example "restaurant" #3144

Open OliKei opened 6 days ago

OliKei commented 6 days ago

https://www.w3.org/WAI/ARIA/apg/patterns/feed/examples/feed/

Recommendations for lists require to use arrow keys, home and end keys and optionally "type ahead" to efficiently navigate among list items. Lists gain focus with a single TAB key and often also loose focus on use of the TAB key. Additionally the list may also offer group skipping. See keyboard best practices. https://www.w3.org/WAI/ARIA/apg/practices/keyboard-interface/

The sample does use of the recommended keystrokes, instead the user has to press TAB many times to get from one item to the next (with an invisible stop where the focus is not visible, which does not conform to WCAG2.2 2.4.7 Focus visible).

mcking65 commented 5 days ago

Hi @OliKei, since a feed article can contain interactive widgets that consume arrow keys, the feed example uses page up/down. That way, it doesn't matter where focus is inside of an article, the user can immediately jump to next/prior.

When focus is on the article, the focus ring should be drawn around the entire article. If that is not happening, that is a bug.

JAWS-test commented 5 days ago

In current versions of Chrome, Edge and Firefox, the focus is clearly visible for all TAB steps

JAWS-test commented 5 days ago

since a feed article can contain interactive widgets that consume arrow keys,

I don't think this is the main reason, because the navigation also applies if the feed only contains text. It seems more important to me that a feed is not a selection list, but contains individual page areas and that screen reader users use the arrow keys to read the page content. The screen reader does not switch to form mode for a feed.

A change is only possible when ARIA implements something like interactive lists. There are already several proposals for this: https://github.com/w3c/aria/issues/1325 and https://github.com/w3c/aria/issues/2036

OliKei commented 5 days ago

In current versions of Chrome, Edge and Firefox, the focus is clearly visible for all TAB steps

true, it only happened on macOS Safari, however, it is not always reproducible. Today it was also working OK on Safari. Fascinating.

Yes, interactive lists would be a great enhancement.