Jekyll2026-02-02T21:33:47-05:00https://arokem.github.io/a11y4jekyll/feed.xmlAccessible Jekyll TemplateA WCAG 2.1 Level AA and Title II compliant Jekyll templateYour NameBuilding Accessible Websites: A Guide2026-01-30T12:00:00-05:002026-01-30T12:00:00-05:00https://arokem.github.io/a11y4jekyll/blog/2026/01/30/building-accessible-websitesWeb accessibility ensures that websites are usable by everyone, including people with disabilities. This post covers the fundamentals of creating accessible web content.

Why Accessibility Matters

Approximately 15% of the world’s population experiences some form of disability. By making your website accessible, you:

  • Reach a wider audience
  • Improve usability for all users
  • Comply with legal requirements (ADA Title II, Section 508)
  • Enhance SEO and site performance
  • Demonstrate social responsibility

Key Accessibility Principles

1. Semantic HTML

Use proper HTML elements for their intended purpose:

<!-- Good: Semantic HTML -->
<nav>
  <ul>
    <li><a href="/">Home</a></li>
    <li><a href="/about/">About</a></li>
  </ul>
</nav>

<!-- Bad: Non-semantic HTML -->
<div class="nav">
  <span onclick="navigate('/')">Home</span>
  <span onclick="navigate('/about')">About</span>
</div>

2. Keyboard Navigation

Ensure all interactive elements are keyboard accessible:

  • Use semantic elements (button, a, input) instead of div/span with click handlers
  • Provide visible focus indicators
  • Maintain a logical tab order
  • Include skip navigation links

3. Alternative Text

All images should have descriptive alt text:

<!-- Decorative image -->
<img src="pattern.png" alt="" role="presentation">

<!-- Informative image -->
<img src="chart.png" alt="Bar chart showing 40% increase in sales">

4. Color Contrast

Text must have sufficient contrast against its background:

  • Normal text: at least 4.5:1 contrast ratio
  • Large text (18pt+ or 14pt+ bold): at least 3:1 contrast ratio
  • Don’t rely on color alone to convey information

5. ARIA Labels

Use ARIA attributes to enhance accessibility when semantic HTML isn’t enough:

<button aria-label="Close dialog">×</button>
<nav aria-label="Main navigation">...</nav>
<div role="alert" aria-live="polite">Form submitted successfully</div>

Testing for Accessibility

Use these tools to test your website:

  1. Automated Testing:
    • WAVE (Web Accessibility Evaluation Tool)
    • axe DevTools
    • Lighthouse (built into Chrome DevTools)
  2. Manual Testing:
    • Keyboard navigation (Tab, Shift+Tab, Enter, Space)
    • Screen reader testing (NVDA, JAWS, VoiceOver)
    • Browser zoom (up to 200%)
    • Color contrast checkers
  3. User Testing:
    • Test with real users who have disabilities
    • Gather feedback on pain points
    • Iterate based on findings

Common Mistakes to Avoid

  • Using div or span with click handlers instead of buttons
  • Missing alt text on images
  • Poor color contrast
  • Removing focus indicators
  • Auto-playing videos with sound
  • Time limits that are too short
  • Missing form labels
  • Unclear error messages
  • Complex navigation without skip links

Resources

Learn more about web accessibility:

Conclusion

Building accessible websites is not just about compliance—it’s about creating a better web for everyone. By following WCAG guidelines and testing thoroughly, you can ensure your site is usable by all visitors.

Remember: accessibility is an ongoing process, not a one-time fix. Continuously test, learn, and improve your site’s accessibility.

]]>Template Author