How to make pages more accessible

Start with semantic HTML

Native headings, landmarks, links, buttons, and form controls provide names, roles, and keyboard behavior. Add ARIA only when native HTML cannot express the needed pattern.

Provide names and alternatives

• Set the correct document lang
• Give meaningful images useful alt text and decorative images alt=""
• Connect every form control to a visible label
• Use descriptive link and button text
• Caption video and provide audio transcripts

Support keyboard and vision needs

All interactive controls must be reachable and operable by keyboard in a logical order. Keep focus indicators visible, use sufficient color contrast, do not rely on color alone, and allow text to zoom without lost content.

<a class="skip-link" href="#main">Skip to main content</a>
<main id="main">
  <h1>Course catalog</h1>
  ...
</main>

Test, do not guess

Navigate with Tab, Shift+Tab, Enter, Space, and Escape; zoom to 200%; run an automated checker; and sample a screen reader. Automated tools catch only part of the problem, so include manual and disabled-user testing when possible.