🖼️ Alt Text Best Practices

• Avoid vague labels like “a picture of…”
• Example: Use "save" as alt text for a floppy disk icon

🧭 Semantic Navigation

<nav aria-labelledby="tocTitle">
  <ol role="list">
    ...
  </ol>
</nav>
<p id="tocTitle">On this page</p>

• Use aria-labelledby to associate navigation sections with headings
• role="list" improves structure for assistive technologies

📄 ARIA Roles for Tables

• For interactive tables → role="grid"

• For expandable/collapsible grids → role="treegrid"

• Include summaries:

  <p id="summary">Summary content here</p>
  <table aria-describedby="summary">
    ...
  </table>
  

🫥 Accessible Hidden Content

aria-hidden=true - remove from a11y tree but keep for normal users

Hide from users, show to screen readers

<span class="sr-only">Accessible text</span>