Academy HTML CSS JavaScript TypeScript SQL MongoDB Python NumPy Pandas PHP Java C C++ C# Bootstrap Tailwind CSS jQuery React Vue.js Node.js Git
❮ ❯

HTML Accessibility

Build pages everyone can use.

✍️ 3 exercises + code challenge in this lesson
❮ Previous Next ❯

Accessibility (often written a11y) means people with disabilities can use your website, including people using screen readers, keyboards or zoom.

Checklist

  • Give every image meaningful alt text (use alt="" for purely decorative images).
  • Use real headings in order, and semantic elements for layout.
  • Connect every form field to a <label>.
  • Use <button> for actions and <a> for navigation.
  • Make sure text has enough colour contrast against its background.
  • Set the page language: <html lang="en">.
  • Check that everything works using only the keyboard (Tab, Enter, Space).

Key Takeaways: HTML Accessibility

Mastering HTML Accessibility helps you write clean and reliable HTML code. Follow standard conventions, test edge cases, and keep logic simple. Try running the code example below and complete the exercises to build confidence.

HTML Accessibility Code Example

HTML 
<html lang="en">
<body>
  <nav aria-label="Main">
    <a href="#">Home</a> | <a href="#">Courses</a>
  </nav>
  <main>
    <h1>Accessible sign-up</h1>
    <img src="https://picsum.photos/id/1/200/100" alt="Student working on a laptop" width="200" height="100">
    <form>
      <label for="email">Email address</label>
      <input id="email" type="email" required>
      <button type="submit">Sign up</button>
    </form>
  </main>
</body>
</html>
Free sign-in required · Google login available

HTML Accessibility Practice Exercises

Check what you learned in “HTML Accessibility”.

/ 3 solved
Fill in the blank

Set the language of the page.

<html ="en">
✓ Correct! Not quite. Try again.
Multiple choice

What alt text should a purely decorative image have?

✓ Correct! Not quite. Try again.

An empty alt tells screen readers to skip the image.

Code challenge

The input has no label. Add a <label> "Email" connected to it with the for attribute.

Write the code in the live editor. Your answer is checked automatically.

Free sign-in required · Google login available

to save your exercise progress.
Finished this lesson?
Mark it complete to track your progress.
❮ Previous
HTML Media: Video & Audio
Next ❯
HTML Canvas API

Stuck on something?

Ask the community in the CodesInTech forum.

Need a developer?

Learning on your own is great — and when you need professional help, our team builds custom software, websites and mobile apps for clients worldwide.

Explore Our Services