CodePark/ questions / Accessible widgets
START PRACTICINGPRACTICE
Frontend question · Accessibility › Accessible widgets

Your site header has a "Products" button that opens a dropdown of 6 page links. Which markup fits best?

A <button aria-expanded> that shows and hides a plain list of <a> links (the disclosure pattern)

Site navigation is a set of links, so the simple disclosure pattern fits. A button with aria-expanded shows or hides a list of normal links. Users Tab through them as usual.

role="menu" is the tempting wrong answer. It is meant for app-style menus, like a text editor's File menu. It tells screen reader users to expect arrow-key navigation and other menu keys, and it hides the fact that the items are links. Using it on site navigation usually makes things worse. A hover-only div fails keyboard and touch users.