How to fix common accessibility issues

How to fix

1. 1Identify all images on your page (including background images conveying meaning)
2. 2For each image, determine its purpose: decorative, informative, or functional
3. 3For decorative images, use empty alt: alt=""
4. 4For informative images, describe the content concisely (under 125 characters)
5. 5For functional images (like buttons), describe the action, not the image

Code Example

<img src="product.jpg">

<img src="product.jpg" alt="Blue cotton t-shirt with round neck">

How to fix

1. 1Identify elements with insufficient contrast (check your Inclusiv report for specifics)
2. 2Use a contrast checker tool to test current ratios
3. 3Adjust either the text color or background color to achieve 4.5:1 ratio for normal text
4. 4For large text (18pt+ or 14pt+ bold), the minimum ratio is 3:1
5. 5Test with a color blindness simulator to verify readability

Code Example

color: #767676; /* 4.48:1 ratio - fails */
background: #ffffff;

color: #595959; /* 7:1 ratio - passes */
background: #ffffff;

How to fix

1. 1Ensure every input has a <label> element with matching 'for' and 'id' attributes
2. 2Group related fields with <fieldset> and <legend> (e.g., radio button groups)
3. 3Add clear error messages that identify the field and describe the error
4. 4Use autocomplete attributes for common fields (name, email, address)
5. 5Ensure focus indicators are visible on all form elements

Code Example

<input type="email" placeholder="Email">

<label for="email">Email address</label>
<input type="email" id="email" name="email"
       autocomplete="email" required
       aria-describedby="email-hint">
<span id="email-hint">We'll never share your email.</span>

How to fix

1. 1Test your site using only Tab, Shift+Tab, Enter, Space, and Arrow keys
2. 2Ensure all interactive elements (links, buttons, inputs) receive focus
3. 3Verify focus moves in a logical order (typically left-to-right, top-to-bottom)
4. 4Check that there are no keyboard traps (areas where focus gets stuck)
5. 5Make sure custom widgets (dropdowns, modals) are fully keyboard operable

Code Example

<div onclick="doSomething()">Click me</div>

<button type="button" onclick="doSomething()">
  Click me
</button>

/* Or for custom elements: */
<div role="button" tabindex="0"
     onclick="doSomething()"
     onkeydown="if(event.key==='Enter')doSomething()">
  Click me
</div>

How to fix

1. 1Use only one <h1> per page (typically the main page title)
2. 2Follow a logical hierarchy: h1 > h2 > h3 (don't skip levels)
3. 3Use headings to create an outline of your content
4. 4Don't use headings just for visual styling (use CSS instead)
5. 5Ensure heading text is descriptive of the section content

Code Example

<h1>Our Products</h1>
<h4>T-Shirts</h4>  <!-- Skipped h2, h3 -->
<h2>About Us</h2>   <!-- Inconsistent -->

<h1>Our Products</h1>
  <h2>Clothing</h2>
    <h3>T-Shirts</h3>
    <h3>Jeans</h3>
  <h2>Accessories</h2>
    <h3>Hats</h3>

How to fix

1. 1Never use 'outline: none' without providing an alternative focus style
2. 2Ensure focus indicators have sufficient contrast against the background
3. 3Make focus indicators clearly visible (not just a subtle color change)
4. 4Test focus visibility on all interactive elements
5. 5Consider using :focus-visible for better UX (shows focus only for keyboard users)

Code Example

/* Removes all focus indication */
a:focus, button:focus {
  outline: none;
}

/* Custom focus style */
a:focus-visible, button:focus-visible {
  outline: 3px solid #4f46e5;
  outline-offset: 2px;
}

/* Or ring style */
a:focus-visible {
  box-shadow: 0 0 0 3px rgba(79, 70, 229, 0.5);
}

How to fix

1. 1Add synchronized captions to all video content
2. 2Include speaker identification when multiple people speak
3. 3Describe relevant sound effects and music in captions
4. 4Provide a text transcript for all video and audio content
5. 5For videos with important visual information, add audio descriptions

Code Example

<video src="product-demo.mp4" controls></video>

<video controls>
  <source src="product-demo.mp4" type="video/mp4">
  <track kind="captions" src="captions-en.vtt"
         srclang="en" label="English" default>
  <track kind="descriptions" src="descriptions-en.vtt"
         srclang="en" label="Audio Descriptions">
</video>
<a href="transcript.html">Read full transcript</a>