←back to thread

Aspects of modern HTML/CSS you may not be familiar with

(lyra.horse)
451 points todsacerdoti | 2 comments | 28 Aug 25 20:49 UTC | HN request time: 0.404s | source
Show context
atomicfiredoll ◴[29 Aug 25 06:11 UTC] No.45060764[source]▶
Okay, but are those radio tabs accessible?

I think that if you want to follow WAI-ARIA practices, the aria-selected, tabindex and aria-controls need to be updated via JS when the active tab changes? I'd love to be wrong about that.

Accessibility is often an afterthought. And, sometimes there's an assumption that by working with HTML/CSS directly, accessibility comes built in. Just Something to keep in mind when choosing an approach.

replies(5): >>45060990 #>>45061332 #>>45062727 #>>45063717 #>>45088409 #
1. Rapzid ◴[01 Sep 25 00:47 UTC] No.45088409[source]▶
I don't know about those radio tabs specifically, but your intuition is correct. Many of the ARIA APG (component)patterns require JavaScript to update tab index and ARIA properties for full implementation. Focus management and key-control are two problem spaces that are common across many patterns and require JavaScript.

Focus management:

Focus scopes and restoring focus requires JavaScript. Complex UI components like combo box, grids, and trees require dynamically adjusting tab index and focus. Combo Box requires managing accessibility tree focus separately from DOM focus. Modals implementing focus scopes and restoring focus scopes requires JavaScript.

Key controls:

The ARIA APG patterns call for differences in tab and arrow key control from what the browser would supply. Patterns that involve list of groups use tab to navigate between groups and arrows to navigate within groups.

replies(1): >>45099459 #
2. atomicfiredoll ◴[02 Sep 25 05:34 UTC] No.45099459[source]▶
Thanks for the input. The keyboard control piece is a good call-out.

Personally, I don't have my access to my normal computer/environment at the moment, so I've just been trying to go by the spec when necessary and hope for the best until I do.