HTML/CSS - 18

HTML/CSS - 18: Accessibility Best Practices

Accessibility means designing websites so more people can use them successfully, including people who navigate with keyboards, screen readers, or other assistive technologies.

Accessible HTML often starts with the same things you have already learned: clear headings, meaningful page structure, useful image descriptions, and properly labelled form fields.

You do not need complicated code to improve accessibility. Small HTML choices can make a big difference.

Your challenge: Build a simple page that uses clear headings, semantic HTML, useful alt text, labelled inputs, and an accessible button.

What should you notice?

Accessibility is not one special HTML tag. It comes from many small decisions that make the page easier to understand and operate.

Use a clear heading structure: The main page title will usually use <h1>. Major sections can then use <h2>, with smaller subsections underneath if needed.

Try not to choose heading levels only because you prefer their size. Headings should describe the structure of the content.

Write useful alt text: If an image adds meaningful information, its alt text should briefly describe what matters about the image.

For example: <img src="space-waffles.webp" alt="Three waffles floating against a starry background"> is more useful than: alt="image".

Connect labels to form fields: A visible <label> helps people understand what information belongs in an input.

For example: <label for="nickname">Nickname</label> and <input id="nickname" type="text"> are connected because the for and id values match.

Try keyboard navigation: Click somewhere on the page, then press the Tab key. You should be able to move between interactive elements such as inputs and buttons without using the mouse.

The focus outline helps show which element is currently selected. Avoid removing focus outlines unless you replace them with another clear visual indicator.

About aria-label: ARIA can add accessibility information when normal HTML does not already provide it, but it should not be added everywhere automatically.

For example, a button containing only a symbol might need: <button aria-label="Close menu">X</button>

But a button that already says <button>Send Message</button> usually does not need an extra aria-label because its visible text already gives it a clear name.

Good accessibility habit: Start with the correct HTML element first. Use a real button for a button, a real heading for a heading, a label for a form field, and meaningful HTML structure whenever possible.

<header>
  <h1>The Tiny Space Café</h1>
  <p>A fictional café somewhere beyond Earth.</p>
</header>

<main>

  <section>
    <h2>Today's Special</h2>

    <img
      src="space-waffles.webp"
      alt="Waffles floating against a starry background"
      width="500">

    <p>
      Today's special is the Zero-Gravity Waffle.
    </p>
  </section>

  <section>
    <h2>Join the Guest List</h2>

    <form>

      <label for="guest-name">Name</label>
      <input
        type="text"
        id="guest-name"
        name="guest-name"
        required>

      <label for="guest-email">Email</label>
      <input
        type="email"
        id="guest-email"
        name="guest-email"
        required>

      <button type="submit">Join Guest List</button>

    </form>
  </section>

</main>

<footer>
  <p>Thanks for visiting the Tiny Space Café.</p>
</footer>