A practical guide to building accessible navigation menus using the native HTML popover API, updating a 2019 pattern that relied on ARIA disclosure widgets. The approach uses a link plus a button trigger with `popovertarget`, eliminating the need for JavaScript to show/hide submenus. Key benefits include free Esc and click-to-close support, automatic `aria-expanded` state, and proper semantics. The post covers HTML structure, button naming with `aria-labelledby`, focus order considerations, CSS anchor positioning challenges across browsers, and styling tips including forced-colors and logical properties support.
Table of contents
popover vs. Disclosure Widgets # anchorThe Pattern # anchorPattern History # anchorWrap Up # anchorTagsOther PostsNo comments? Be the first!861 Impressions