Header

Web Accessibility: An All Inclusive Service

A guide to web accessibility, covering its importance, best practices, ARIA attributes, and code examples.

Kong Her 2025-2-18

Web Accessibility: An All Inclusive Service

What is Web Accessibility, and Why Does It Matter?

Web accessibility is all about making sure that our websites are usable by everyone, including people with disabilities. This means we need to design and coding sites in a way that allows users with any visual, auditory, motor, or cognitive impairments to navigate and interact with them just as easily as anyone else.

Why Is Web Accessibility Important?

How Do We Make Our Web Pages Accessible?

Here are some key ways to improve accessibility on your website:

  1. Use Semantic HTML: Choose the right HTML elements for their intended purpose (e.g., use <button> for buttons instead of <div>).
  2. Provide Text Alternatives: Use alt attributes for images, captions for videos, and transcripts for audio so users with visual or hearing impairments can still understand the content.
  3. Ensure Keyboard Navigation: Every interactive element (like buttons and forms) should be usable without a mouse.
  4. Use High Contrast Colors: Make sure text is readable for users with low vision or color blindness.
  5. Provide Clear Focus Indicators: Highlight elements when they’re selected via keyboard navigation so users know where they are.
  6. Use ARIA Attributes When Necessary: ARIA (Accessible Rich Internet Applications) helps enhance accessibility for complex UI elements like dynamic content or interactive widgets.

ARIA Attributes: What They Are and How They Help

ARIA (Accessible Rich Internet Applications) help give extra information to assistive technologies like screen readers in helping them interpret and communicate web content more effectively.

Common ARIA Attributes and How to Use Them

1. aria-label - Adds a Label for Screen Readers

Use this when an element (like an icon button) doesn’t have visible text but still needs an accessible name.

<button aria-label="Close Menu">&times;</button>

Why It's Useful: Screen readers will announce the button’s purpose even though it only displays an “X” on the page.

2. aria-hidden - Hides Content from Screen Readers

This keeps an element visible on the screen but prevents screen readers from reading it.

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

Why It's Useful: Decorative icons or non-essential visuals won’t clutter the screen reader’s output.

3. aria-live – Announces Dynamic Content Updates

This tells screen readers how to handle changes to content without requiring user interaction.

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

Why It's Useful: Helps users who rely on screen readers get real time updates without disrupting their workflow.

4. aria-expanded – Indicates Dropdown or Toggle State

This helps screen reader users understand whether an element (like a menu) is open or closed.

<button aria-expanded="false" onclick="toggleMenu()">Menu</button>

Why It's Useful: Users won’t have to guess whether a menu or dropdown is open.

5. aria-describedby

This connects an input field to extra descriptive text for better clarity.

<input type="text" id="username" aria-describedby="username-help">
<span id="username-help">Enter your username.</span>

Why It's Useful: Helps users understand form fields more clearly, especially if they need additional instructions.

Useful Web Accessibility Resources

Here are some solid resources for learning more about web accessibility:

  1. Web Content Accessibility Guidelines (WCAG)
  2. Mozilla Developer Network (MDN) - Accessibility
  3. WAI-ARIA Specification
  4. A11y Project
  5. WebAIM (Web Accessibility in Mind)

Conclusion

Making the web accessible isn’t just about following rules, it’s about creating a better experience for everyone. By using semantic HTML, adding ARIA attributes where needed, and designing with accessibility in mind, we can build websites that work for all users, regardless of their medical and/or physical background.