Chris Ashton

dai11y 08/02/2023

Your daily frequent11y newsletter, brought to you by @ChrisBAshton:

When CSS Isn’t Enough: JavaScript Requirements For Accessible Components

Stephanie Eckles shares those scenarios where you need a sprinkling of JavaScript to make components accessible. The TLDR is that these include “tooltips, modals, tabs, carousels, and dropdown menus”. Components marketed as “CSS-only”, that use methods like the “checkbox hack“, often do more harm than good.

As a quick sense check, ask yourself the following:

  • Does the feature include showing and hiding of content? If so, you need JS to at minimum “toggle aria and enable closing on Esc
  • Is the natural focus order the most ideal? “If the natural order loses the relationship between a trigger and the element it triggered, or a keyboard user can’t even access the content via natural tab order, then you need JS to assist in focus management”
  • Does the effect rely on hover and/or focus? You may need JS to make an alternative solution “for touch screen users and those using desktop zoom of 200%+ or magnification software”

Tooltips should be used as a last resort. Ask yourself why you’re adding this text to the UI, and where else it could go. But if you do use one, make sure it’s dismissable without moving hover or focus, that its contents can be hovered without it disappearing, and that it doesn’t disappear based on a timeout.

Modals, as we’ve covered in previous frequent11y issues, would ideally be implemented with a HTML native <dialog> element, but it isn’t currently accessible. Custom solutions need JS because it should be dismissable with the Esc key, and the keyboard focus should be trapped inside. As to what to focus on when opening the modal, Stephanie’s presented a decision tree.

Tabs need to toggle aria-selected to true for the current tab, create a roving tabindex to “distinguish tab selection from focus”, and move focus by responding to arrow key events, all of which require JavaScript. NB: a roving tabindex is a way of programmatically controlling the focus order of elements, e.g. by setting the selected tab to tabindex="0" and all the others to -1.

Dropdown menus need JS, even though we now have CSS’s :focus-within property, because we still need to toggle aria-expanded, be able to close the open menu button with Esc and implement arrow keys for navigating between menu items.

Carousels are notoriously considered a bad design pattern, but if you’re going to build one, you’ll need JS to provide paginated and prev/next controls, as well as auto play.

Prefer longer newsletters? You can subscribe to week11y, fortnight11y or even month11y updates! Every newsletter gets the same content; it is your choice to have short, regular emails or longer, less frequent ones. Curated with ♥ by developer @ChrisBAshton.