Improving Accessibility in HTML

Web accessibility (often abbreviated as "a11y") guarantees that the websites you build can be easily navigated and understood by everyone, regardless of their hardware, software, language, location, or physical abilities. Building accessible HTML is easier than you think.

Most accessibility issues arise simply because developers forget to use the correct HTML tags designed for the job. Below are the three easiest ways to immediately drastically improve your website's accessibility.

1. Use Semantic HTML

Assistive technologies (like screen readers for the visually impaired) rely on the structure of your HTML to read the page aloud to the user. If your entire website is built using generic div tags, the screen reader has no idea what is a menu, what is an article, and what is the footer.

Instead of div id="nav", use the nav tag. Instead of an h1 for everything, nest your headings logically (h1, then h2, then h3 like a textbook outline).

2. Connect Form Labels and Inputs

When creating form fields, visually placing text next to an input box is not enough. Screen readers do not know they are related. You must explicitly connect a label to an input using the matching for and id attributes:

Another benefit of doing this is that clicking the text label itself will automatically place the user's cursor inside the form box, making it much easier for mobile users with small screens to tap!

3. Provide Keyboard Focus Indicators

Many users with motor disabilities rely entirely on their keyboard (specifically the Tab key) to navigate web pages instead of a mouse. Your CSS must clearly highlight which element currently "has focus". Never remove the default focus outline unless you are replacing it with a better one.

4. Add Alt Text to Images

Every img tag must include an alt attribute. Screen readers will read this text aloud so visually impaired users understand what the image shows. If an image is purely decorative, you must still include the attribute but leave it empty (alt="") so the screen reader knows to skip it. For a deeper dive, read How to Use Alt Text Properly.

5. Use ARIA Attributes

Accessible Rich Internet Applications (ARIA) attributes help communicate the state or role of an element to assistive technologies when standard HTML isn't enough. For example, if you build a custom dropdown menu using div tags, a screen reader won't know it's a menu. ARIA attributes bridge that gap.

Here's a simple example:

6. Set the Document Language

Always specify the primary language of your webpage in the opening html tag using the lang attribute. This ensures screen readers load the correct pronunciation rules. If you omit this, a screen reader might try to read English text with a French accent!

Full Working Example

Below is an accessible contact form that demonstrates correct label-to-input binding, semantic structural tags, and highly visible keyboard focus styles. Click inside one of the text boxes, or repeatedly press Tab on your keyboard, to see the focus outlines behave:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Accessible HTML Form Example</title>
<style>
  body {
    font-family: sans-serif;
    margin: 20px;
    line-height: 1.6;
  }
  .form-group {
    margin-bottom: 15px;
  }
  label {
    display: block;
    font-weight: bold;
    margin-bottom: 5px;
  }
  input[type="text"], input[type="email"] {
    padding: 8px;
    width: 100%;
    max-width: 300px;
    border: 1px solid #ccc;
    border-radius: 4px;
  }
  button {
    padding: 10px 20px;
    background-color: #0056b3;
    color: white;
    border: none;
    border-radius: 4px;
    cursor: pointer;
  }
  button:hover {
    background-color: #003d82;
  }
  
  /* Providing clear visual focus states for keyboard users */
  input:focus, button:focus {
    outline: 3px solid #ffbf47;
    outline-offset: 2px;
  }
</style>
</head>
<body>

<main>
    <h1>Contact Support</h1>
    
    <p>Please fill out the form below. All fields are required.</p>
    
    <form action="#" method="post">
      
      
      <div class="form-group">
        <label for="fullName">Full Name</label>
        <input type="text" id="fullName" name="fullName" required aria-required="true">
      </div>
      
      <div class="form-group">
        <label for="emailAddress">Email Address</label>
        <input type="email" id="emailAddress" name="emailAddress" required aria-required="true">
      </div>
      
      
      <button type="submit">Submit Request</button>
      
    </form>
  </main>

</body>
</html>

View Output Full Screen Preview