ARIA provides patterns for many common interactive widgets. The disclosure pattern pairs a button with aria-expanded (and often aria-controls pointing to the region's id) to control the visibility of a single content region; when the button is activated, screen readers announce "expanded" or "collapsed". The aria-haspopup attribute announces that activating an element opens a popup and can specify its kind: true, "menu", "listbox", "tree", "grid", or "dialog". The accordion pattern extends disclosure to a group of button headers, each controlling a region with role="region" and aria-labelledby pointing back to its header.
The tabs pattern uses a tablist container holding role="tab" elements with aria-controls pointing to their tabpanel and aria-selected indicating the active tab. Each tabpanel has role="tabpanel" and aria-labelledby pointing back to its tab. In a horizontal tablist, the Left and Right arrow keys move focus and selection between tabs, Home and End jump to the first and last tab, and Tab exits the tablist to the next focusable element on the page.
The ARIA menu pattern, with role="menu" containing role="menuitem" (or menuitemcheckbox/menuitemradio) children, is intended for application-style menus where arrow keys navigate items and Enter or Space activates them — not for site navigation. For site navigation, a `
- ` inside `