Web Accessibility Reference

 # page header section

role="banner" # site header
role="navigation" # nav menu
role="main" # main content
role="complementary" # supporting info
role="contentinfo" # footer info
role="button" # clickable element
role="alert" # important message

aria-label="Close menu" # accessible name
aria-labelledby="title-id" # reference label
aria-describedby="desc-id" # additional info
aria-hidden="true" # hide from screen readers
aria-live="polite" # announce updates
aria-expanded="false" # collapse state
aria-current="page" # current item

tabindex="0" # add to tab order
tabindex="-1" # remove from tab order
button.addEventListener("keydown", (e) => {
  if (e.key === "Enter" || e.key === " ") { # handle keys
    handleClick();
  }
});

element.focus(); # set focus programmatically
:focus { outline: 2px solid blue; } # visible focus
:focus-visible { } # keyboard focus only
a[href="#main"] # skip link

# Trap focus in modal
const focusable = modal.querySelectorAll("button, a");
firstElement.focus();