HTML Accessibility Basics

Accessible HTML works for people who use screen readers, keyboards, voice control, or zoom. Give every form control a label, give meaningful images alt text that says what the image shows, and use real buttons and links instead of clickable divs. A skip link lets keyboard users jump past repeated navigation, and aria-label names controls that have only an icon. Declare the page language on the html element with lang so that screen readers use the right pronunciation. Native elements are accessible by default, and ARIA is only for filling gaps.

<a class="skip-link" href="#content">Skip to content</a>
<main id="content">
  <h1>Contact</h1>
  <form>
    <label for="name">Name</label>
    <input id="name" name="name" autocomplete="name" required>
    <button type="submit">Send</button>
  </form>
  <img src="chart.png" alt="Bar chart: sales rose 20% in 2025">
  <button type="button" aria-label="Close dialog">&times;</button>
</main>