HTML Accessibility & Best Practices

Published 1 month ago

Introduction

Web accessibility ensures that websites are usable by everyone, including people with disabilities. Accessible web design benefits users who rely on assistive technologies such as screen readers, keyboard navigation, and other tools. This blog will explore best practices for writing accessible HTML, including ARIA attributes, semantic HTML, keyboard navigation support, and maintaining readable and maintainable code.

Writing Accessible HTML (ARIA Attributes)

What is ARIA?

Accessible Rich Internet Applications (ARIA) is a set of attributes that enhance HTML accessibility for users with disabilities. ARIA provides additional information about elements that might not be conveyed naturally through semantic HTML.

Common ARIA Attributes

aria-label: Provides an accessible name for an element.

<button aria-label="Close Menu">X</button>

aria-labelledby: Associates an element with another element’s ID for descriptive purposes.

<label id="desc">Full Name</label>
<input type="text" aria-labelledby="desc">

aria-hidden: Hides content from screen readers.

<span aria-hidden="true">★</span>

aria-live: Announces updates dynamically without losing focus.

<div aria-live="polite">Loading...</div>

Best Practices for ARIA

Use ARIA only when necessary; prefer semantic HTML whenever possible.
Avoid using aria-hidden="true" on interactive elements.
Keep ARIA attributes updated dynamically when content changes.

Screen Readers & Semantic HTML

Importance of Semantic HTML

Semantic HTML uses elements that convey meaning, making content easier to understand for both developers and assistive technologies. Examples include:

<header> instead of <div class="header">
<nav> instead of <div class="navigation">
<article> instead of <div class="post">

Screen Reader-Friendly HTML

Use Proper Headings: Ensure headings follow a logical order (<h1> to <h6>).
Provide Alternative Text for Images: Use alt attributes for images.

<img src="logo.png" alt="Company Logo">

Ensure Form Accessibility: Always associate labels with input fields.

<label for="email">Email Address</label>
<input type="email" id="email" name="email">

Use Descriptive Links: Avoid generic text like "Click Here."

<a href="/about">Learn more about us</a>

Keyboard Navigation Support

Why Keyboard Navigation Matters

Many users rely on keyboards or alternative input methods to navigate websites. Ensuring full keyboard support improves usability for people with mobility impairments and power users who prefer keyboard shortcuts.

Best Practices for Keyboard Accessibility

Ensure All Interactive Elements Are Focusable<button tabindex="0">Click Me</button>

Use Logical Tab Order: Arrange content so that users can navigate it naturally using the Tab key.
Provide a Visible Focus Indicator: Use CSS to highlight focused elements.

button:focus {
    outline: 2px solid blue;
}

Implement Skip Links: Allow users to bypass repetitive content.

<a href="#main-content" class="skip-link">Skip to main content</a>

Ensure Dropdowns and Modals Are Accessible: Ensure they can be opened/closed using the keyboard.

document.addEventListener('keydown', function(event) {
    if (event.key === 'Escape') {
        closeModal();
    }
});

Best Practices for Readability & Maintainability

Readable Code

Use meaningful class names (e.g., .nav-menu instead of .nm).
Follow consistent indentation (2 or 4 spaces).
Write self-explanatory comments where necessary.

Maintainable Code

Use CSS variables for reusable styles.
Follow the DRY principle (Don't Repeat Yourself).
Group related HTML elements inside landmark elements (e.g., <main>, <aside>).

Accessibility Testing Tools

Lighthouse (Chrome DevTools)
axe DevTools (browser extension)
WAVE (Web Accessibility Evaluation Tool)
NVDA (screen reader for Windows)

Conclusion

Ensuring accessibility in HTML is essential for providing an inclusive user experience. By following best practices like using semantic HTML, incorporating ARIA attributes responsibly, supporting keyboard navigation, and maintaining clean code, developers can create more user-friendly websites for everyone.

Obafemi Emmanuel