How to Make a Website Accessible

Actions to Take:

• •Run automated testing tools (axe DevTools, WAVE, Lighthouse)
• •Test keyboard navigation (Tab through all interactive elements)
• •Test with a screen reader (NVDA, VoiceOver, or Narrator)
• •Check color contrast ratios using our contrast checker
• •Review form labels and error messages
• •Check heading hierarchy (H1 → H2 → H3)

Related Resources:

Actions to Take:

• •Add alt text to all images (descriptive, not decorative)
• •Fix color contrast (minimum 4.5:1 for normal text, 3:1 for large)
• •Ensure all interactive elements are keyboard accessible
• •Add visible focus indicators
• •Fix form labels (every input needs a label)
• •Add skip links for main content

Related Resources:

Actions to Take:

• •Use proper heading hierarchy (H1 for main title, H2 for sections, etc.)
• •Use semantic elements (nav, main, article, section, aside, footer)
• •Use button for buttons, not div or span
• •Use label elements for form inputs
• •Use list elements (ul, ol) for lists
• •Ensure proper form structure

Code Example:

<button>Click me</button>
<!-- Not: <div onclick="...">Click me</div> -->

<label for="email">Email</label>
<input type="email" id="email" name="email" />
<!-- Not: <input type="email" placeholder="Email" /> -->

Related Resources:

Actions to Take:

• •Test Tab order (should follow visual order)
• •Ensure focus is visible (add focus styles)
• •Remove keyboard traps (users can navigate away)
• •Add keyboard shortcuts for common actions
• •Ensure dropdowns work with keyboard
• •Test modal dialogs with keyboard only

Code Example:

/* Add visible focus styles */
button:focus {
  outline: 2px solid #0066cc;
  outline-offset: 2px;
}

/* Ensure focusable elements are in tab order */
.skip-link {
  position: absolute;
  top: -40px;
  left: 0;
}
.skip-link:focus {
  top: 0;
}

Related Resources:

Actions to Take:

• •Add labels to all form inputs (use label element)
• •Associate error messages with inputs (use aria-describedby)
• •Provide clear instructions and examples
• •Mark required fields clearly
• •Group related fields (use fieldset and legend)
• •Provide helpful error messages

Code Example:

<label for="email">Email Address <span aria-label="required">*</span></label>
<input 
  type="email" 
  id="email" 
  name="email"
  aria-required="true"
  aria-describedby="email-error email-help"
/>
<span id="email-help">We'll never share your email</span>
<span id="email-error" role="alert" aria-live="polite"></span>

Related Resources:

Actions to Take:

• •Use ARIA labels for icon-only buttons
• •Use ARIA live regions for dynamic content
• •Use ARIA roles for custom components
• •Use aria-expanded for collapsible content
• •Use aria-hidden for decorative content
• •Test ARIA with screen readers

Code Example:

<button aria-label="Close dialog">
  <span aria-hidden="true">×</span>
</button>

<div role="alert" aria-live="polite">
  Form submitted successfully
</div>

<button aria-expanded="false" aria-controls="menu">
  Menu
</button>

Related Resources:

Actions to Take:

• •Run automated tests again (compare before/after)
• •Test with multiple screen readers
• •Test with keyboard only (unplug mouse)
• •Test with browser zoom (200%)
• •Test with high contrast mode
• •Get feedback from users with disabilities

Related Resources:

Actions to Take:

• •Include accessibility in your development workflow
• •Train your team on accessibility best practices
• •Conduct regular accessibility audits (quarterly)
• •Monitor for new issues when adding content
• •Stay updated with WCAG guidelines
• •Create an accessibility statement

Related Resources: