Building Accessible Web Applications: A Frontend Developer’s Guide

2. Proper Heading Structure

Headings provide a hierarchical structure to your content, which is crucial for users of assistive technologies to navigate your page.

<h1>Main Page Title</h1>
<h2>Section 1</h2>
<p>Content for section 1...</p>
<h2>Section 2</h2>
<h3>Subsection 2.1</h3>
<p>Content for subsection 2.1...</p>

Ensure that you use heading levels correctly and don’t skip levels (e.g., don’t jump from <h1> to <h3>).

3. Accessible Forms

Forms are a common point of frustration for users with disabilities. Here are some tips for creating accessible forms:

<form>
<div>
<label for="name">Name:</label>
<input type="text" id="name" name="name" required aria-required="true">
</div>
<div>
<label for="email">Email:</label>
<input type="email" id="email" name="email" required aria-required="true">
</div>
<button type="submit">Submit</button>
</form>

Key points:

• Use <label> elements and associate them with inputs using the for attribute.
• Use the required attribute and aria-required="true" for required fields.
• Provide clear error messages for form validation.

4. Keyboard Navigation

Ensure that all interactive elements on your page can be accessed and operated using only a keyboard.

// Example of managing focus in a modal
const modal = document.querySelector('.modal');
const closeButton = modal.querySelector('.close-button');

// Trap focus within the modal
modal.addEventListener('keydown', (e) => {
if (e.key === 'Tab') {
const focusableElements = modal.querySelectorAll('button, [href], input, select, textarea, [tabindex]:not([tabindex="-1"])');
const firstElement = focusableElements[0];
const lastElement = focusableElements[focusableElements.length - 1];

if (e.shiftKey && document.activeElement === firstElement) {
e.preventDefault();
lastElement.focus();
} else if (!e.shiftKey && document.activeElement === lastElement) {
e.preventDefault();
firstElement.focus();
}
}
});

// Ensure the close button is focusable
closeButton.setAttribute('tabindex', '0');

This example demonstrates how to trap focus within a modal, ensuring keyboard users can navigate all elements within it.

5. ARIA (Accessible Rich Internet Applications)

ARIA attributes can enhance the accessibility of dynamic content and advanced UI controls.

<button aria-expanded="false" aria-controls="menu">
Menu
</button>
<ul id="menu" aria-hidden="true">
<li><a href="/">Home</a></li>
<li><a href="/about">About</a></li>
</ul>

const button = document.querySelector('button');
const menu = document.getElementById('menu');

button.addEventListener('click', () => {
const expanded = button.getAttribute('aria-expanded') === 'true';
button.setAttribute('aria-expanded', !expanded);
menu.setAttribute('aria-hidden', expanded);
});

This example shows how to use ARIA attributes to create an accessible dropdown menu.

6. Color Contrast and Visual Cues

Ensure that your text has sufficient contrast with its background. You can use tools like the WebAIM Contrast Checker to verify your color choices.

/* Good contrast */
.text {
color: #333;
background-color: #fff;
}

/* Poor contrast - avoid */
.low-contrast {
color: #777;
background-color: #eee;
}

<p>Required fields are marked with an asterisk (<span aria-hidden="true" style="color: red;">*</span><span class="sr-only">asterisk</span>)</p>

7. Responsive Design and Zoom

Ensure your website is responsive and works well at different zoom levels. This benefits users with visual impairments who may need to enlarge the content.

@media screen and (max-width: 600px) {
body {
font-size: 16px;
}
}

@media screen and (min-width: 601px) {
body {
font-size: 18px;
}
}

Use relative units like em or rem for font sizes and spacing to ensure the layout scales properly when zoomed.

8. Alternative Text for Images

Always provide alternative text for images. This helps users who can’t see the images understand their content.

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

Use empty alt attributes for decorative images that don’t convey important information.

9. Accessible Video and Audio

Provide captions and transcripts for video and audio content.

<video controls>
<source src="video.mp4" type="video/mp4">
<track kind="captions" src="captions.vtt" srclang="en" label="English">
Your browser does not support the video tag.
</video>

10. Testing for Accessibility

Regular testing is crucial to ensure your web application remains accessible. Here are some tools and techniques:

• Use browser extensions like WAVE or axe for quick accessibility checks.
• Test with a screen reader like NVDA (Windows) or VoiceOver (Mac).
• Use keyboard navigation to ensure all interactive elements are accessible.
• Conduct user testing with individuals who have disabilities.

Conclusion

Building accessible web applications is not just a nice-to-have feature; it’s an essential aspect of responsible web development. By incorporating these practices into your workflow, you can create more inclusive, user-friendly, and legally compliant web experiences.

Remember, accessibility is an ongoing process. As you develop new features or update existing ones, always consider how they impact users with different abilities. By making accessibility a core part of your development process, you’re not only improving your applications but also contributing to a more inclusive web for everyone.

As we continue to advance in web technologies, let’s ensure that we’re creating a digital world that’s truly accessible to all.