After a week off work (hello again!), here is your daily frequent11y newsletter, brought to you by @ChrisBAshton:

Accessible interactions

• Jeremy Keith describes his approach to building accessible ‘toggled content’: accordions, menus, modal dialogs and tabs.
• The first step is deciding whether the trigger should be a button or an anchor link. Jeremy bases this decision on the distance between the target and the trigger in the DOM:
  • If the target is far away, a link is better, as if your JavaScript doesn’t load then at least you’ll be taken to the right part of the page. You’ll also want to focus the target.
  • If in doubt, use a button, designed for general purpose activity. You probably don’t need to shift the focus.
• At this point there’ll be an addEventListener, tabindex, and optional focus(). You’ll also want a aria-expanded="false" on the trigger and an aria-hidden="true" on the target by default. When you activate your trigger, its attribute should update to aria-expanded="true" and the target to aria-hidden="false".

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.