There's a very common misconception that pure HTML with no JS is somehow more accessible. Unless you're building a very basic content site with no interactivity, that's just plain false!

Until the platform improves, you need JS to properly implement keyboard navigation.

Thread.
Building a great keyboard navigation experience requires understanding composite components and the tab sequence. Composite components represent a single tab stop, which contain child elements that are navigable typically using the arrow keys.

This is impossible without JS.
Examples of composites include lists, grids (tables), trees, selects, comboboxes, tabs, etc. The individual items within these should not be tabbable. This helps users more quickly navigate without needing to tab through every item.

See https://www.w3.org/TR/wai-aria-practices-1.2/#kbd_general_within for more info.
Another example is the focus ring. It's very important for keyboard users to know which element is focused as they navigate around the page. But, we usually don't want to show focus rings when using a mouse or touch screen. This requires JS today (until :focus-visible).
Let's take a look at an example: Hey. Some problems:

1. No focus rings on some elements.
2. Invisible elements are receiving focus (action menus).
3. All elements within email list are tabbable (even though they also have arrow key support).
4. Grid navigation is not supported.
Now let's take a look at it with a screen reader. A few issues:

1. Many elements are missing labels (e.g. selection checkboxes).
2. Improper use of <details> to open a menu.
3. Impossible to navigate to individual parts of a mail (sender, subject, time). Hard to distinguish.
There's also the fake combobox for the search field that's completely unusable with a screen reader. The search results aren't announced at all.

Please, don't try to implement this if you're not going to put the effort in to make it accessible. Use a library.
Building web apps without JS is a nice idea, but it's definitely not better for accessibility. Remember, ARIA is a contract: it's only supplies semantics, not behavior. Until the web platform has higher level widgets built in, you must bring the corresponding JS!
You can follow @devongovett.
Tip: mention @twtextapp on a Twitter thread with the keyword “unroll” to get a link to it.

Latest Threads Unrolled:

By continuing to use the site, you are consenting to the use of cookies as explained in our Cookie Policy to improve your experience.