What, Why, and How of a11y

As we discussed, applications on web consumed all over the world, thats what web applications special, barrier to entry to a huge market of internet users is very low. People from different countries, cultures, ethnic groups, backgrounds have access to what you put out they can be a casual user, power users. consumers of the web includes people with disabilities too, its important we build websites for every user type in mind. Thats where accessibility comes into play. Accessibility is a fundamental aspect of web development, ensuring that web content is usable by as many people as possible, including those with disabilities. The goal is to ensure that everyone, regardless of physical or cognitive abilities, can access and interact with web content.

HTML5 provides various features and best practices to make web content accessible, let take a look at them.

Accessible websites are inclusive, allowing people with disabilities such as visual, auditory, motor, or cognitive impairments, including elderly users and those with temporary impairments (e.g., a broken arm) to navigate and understand content opening it upto broader user base.

Many countries have laws and regulations (such as the Americans with Disabilities Act (ADA) in the U.S.) that require websites to be accessible. Non-compliance can lead to legal consequences. Good accessibility is on website makes it often more understandable to search engines, potentially improving SEO.

ARIA Roles and Attributes

Adding ARIA Roles and Attributes for Better Accessibility

ARIA (Accessible Rich Internet Applications) is a set of attributes that define ways to make web content and web applications more accessible to people with disabilities. ARIA roles and attributes help assistive technologies (like screen readers) interpret complex web components that are otherwise difficult to understand.

Lets look at the detailed how ARIA roles and attribute helps bridge the gap between standard HTML elements and complex web components, making them more accessible to users who rely on assistive technologies.

ARIA Roles

ARIA roles describe the type of UI element (e.g., button, navigation, alert) and its purpose.

Following snippet, indicates that a div should be treated as a button.

<div role="button" tabindex="0" onclick="handleClick()">Click Me</div>

ARIA provides also provides ARIA landmark roles that help in identifying regions of a page (e.g., header, main, footer, navigation). These roles are crucial for users navigating with screen readers.

<nav role="navigation">
  <ul>
    <li><a href="/home">Home</a></li>
    <li><a href="/about">About</a></li>
  </ul>
</nav>

ARIA Attributes

ARIA attributes provide additional properties or states to UI elements, such as whether an element is disabled, checked, or expanded.

Common ARIA attributes

1. aria-hidden
2. aria-label
3. aria-expanded
4. aria-checked

aria-hidden

The aria-hidden attribute tells screen readers to ignore an element when set to “true”. This is useful for decorative elements or content that’s duplicated elsewhere.

<!-- Hide decorative icons from screen readers -->
<span aria-hidden="true" class="icon-star">★</span>

<!-- Hide collapsed content that's not currently relevant -->
<div aria-hidden="true" class="collapsed-menu">
  <!-- Menu content that's currently hidden -->
</div>

<!-- Hide decorative images while keeping visual presentation -->
<img src="decorative-border.png" alt="" aria-hidden="true" />

aria-label

The aria-label attribute provides an accessible name for an element when visible text isn’t available or sufficient.

<!-- Add context to a button with only an icon -->
<button aria-label="Close dialog" class="close-button">✕</button>

<!-- Provide clearer description for a search input -->
<input type="text" aria-label="Search for products" placeholder="Search..." />

<!-- Add meaningful labels to navigation landmarks -->
<nav aria-label="Main navigation">
  <!-- Navigation links -->
</nav>

<!-- Describe the purpose of a section -->
<section aria-label="Featured products">
  <!-- Product listings -->
</section>

aria-expanded

The aria-expanded attribute indicates whether a collapsible element is currently expanded or collapsed.

<!-- Dropdown menu toggle button -->
<button aria-expanded="false" aria-controls="dropdown-menu">
  Settings
  <span class="dropdown-icon">▼</span>
</button>
<ul id="dropdown-menu" class="hidden">
  <!-- Menu items -->
</ul>

<!-- Accordion panel header -->
<h3>
  <button aria-expanded="true" aria-controls="section1content">
    Product Information
  </button>
</h3>
<div id="section1content">
  <!-- Panel content visible when expanded -->
</div>

<!-- Mobile navigation menu button -->
<button aria-expanded="false" aria-controls="mobile-nav" class="hamburger-menu">
  <span class="sr-only">Menu</span>
  <span class="hamburger-icon"></span>
</button>
<nav id="mobile-nav" class="hidden">
  <!-- Navigation items -->
</nav>

aria-checked

The aria-checked attribute indicates the current checked state of checkboxes, radio buttons, and similar elements, especially for custom controls.

<!-- Custom checkbox -->
<div role="checkbox" aria-checked="true" tabindex="0" class="custom-checkbox">
  Remember me
</div>

<!-- Toggle switch -->
<button role="switch" aria-checked="false" class="toggle-switch">
  <span class="switch-thumb"></span>
  <span class="switch-label">Dark mode</span>
</button>

<!-- Custom radio button in a group -->
<div role="radiogroup" aria-label="Subscription plan">
  <div role="radio" aria-checked="false" tabindex="-1" class="radio-option">
    Basic
  </div>
  <div
    role="radio"
    aria-checked="true"
    tabindex="0"
    class="radio-option selected"
  >
    Premium
  </div>
  <div role="radio" aria-checked="false" tabindex="-1" class="radio-option">
    Enterprise
  </div>
</div>

<!-- Menu item with a checkable state -->
<li role="menuitemcheckbox" aria-checked="true" class="menu-item checked">
  Show line numbers
</li>

Best Practices for Accessible HTML5 Content

Creating accessible HTML5 content involves adhering to several best practices.

Semantic HTML

• Use semantic HTML elements (<header>, <nav>, <main>, <section>, <footer>, etc.) to provide meaning to your content. This helps both users and assistive technologies understand the structure of your web page.

<header>
  <h1>My Website</h1>
  <nav>
    <ul>
      <li><a href="/home">Home</a></li>
      <li><a href="/about">About</a></li>
    </ul>
  </nav>
</header>
<main>
  <section>
    <h2>Welcome to My Website</h2>
    <p>Here is some introductory content.</p>
  </section>
</main>
<footer>
  <p>&copy; All rights reserved</p>
</footer>

Alt Text for Images

Always include alt attributes for images. This text is read by screen readers and helps users who cannot see the image understand its content.

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

Keyboard Navigation

Ensure that all interactive elements (links, buttons, forms) are accessible via keyboard navigation. This can be done by ensuring elements have appropriate focus states and are navigable using the tab key.

tabindex

<button tabindex="0">Submit</button>

The tabindex attribute controls whether an element can receive keyboard focus and determines its order in the keyboard navigation sequence. This HTML attribute is fundamental to accessibility and keyboard navigation.

1. Negative values -> tabindex=-1 Makes an element programmatically focusable (via JavaScript’s focus() method), but excludes the element from the natural keyboard tab sequence

2. Zero Values -> tabindex=0 Inserts the element into the natural keyboard tab sequence, element is focused according to its position in the document structure

3. Positive Values -> tabindex=1 Prioritizes elements in the tab order before elements with tabindex="0", elements are navigated in ascending order of their tabindex value.

<div tabindex="1">This will be tabbed to first.</div>
<button tabindex="2">This will be tabbed to second.</button>

Form Labels

Always associate form labels with their corresponding input fields using the for attribute. This helps users understand what input each form element expects.

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

Color Contrast

Ensure sufficient color contrast between text and background colors. This makes content readable for users with visual impairments, including color blindness.

Use ARIA Sparingly

While ARIA is powerful, it should be used to enhance standard HTML, not replace it. Always prefer native HTML elements over custom ones with ARIA.

Responsive Design

Ensure your web content is responsive, meaning it works well on all devices and screen sizes. This can be achieved using media queries, flexible layouts, and scalable typography.

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

Testing for Accessibility

Regularly test your website with tools like WAVE, Axe, or Lighthouse to identify and fix accessibility issues. Additionally, manually test your site using a keyboard and screen reader to ensure that it’s usable without a mouse and that the content is read logically.