Structure, alt text and sr-only content shape the non-visual experience.
The guidance#
Use landmarks (header, nav, main, footer), one h1, descending heading levels, alt on meaningful images and alt="" on decorative ones. sr-only carries labels that design hides.
In markup#
<button aria-label="Delete project" class="grid size-10 place-items-center rounded-lg hover:bg-red-50">🗑</button>
<p class="sr-only">3 unsaved changes</p>Checklist#
- Tested with keyboard only
- Screen-reader spot check
- Contrast verified for new pairs
- Reduced-motion behavior confirmed
- Zoomed to 200% without loss
Related#
accessibility/index|Accessibility hub · utilities/interactivity/sr-only|sr-only