Web Accessibility (A11y) means ensuring that websites, tools, and technologies are designed and developed so that people with disabilities can use them. This includes visual, auditory, physical, speech, cognitive, and neurological disabilities.
1. The Foundation: Semantic HTML
The single most important step for accessibility is using semantic HTML correctly. By using the right tag for the right job, you give meaning to your content that assistive technologies can understand.
| Accessible (Semantic) | Inaccessible (Non-Semantic) | Rationale |
<h1> (Heading) | <div style="font-size: 24pt;"> | <h1> tells a screen reader that this is the main title; the <div> is just big text. |
<button> | <div onclick="doAction()"> | The browser automatically handles keyboard focus, hover states, and pressing Enter for a <button>. |
<img> with alt | Background CSS image | The alt text is essential for describing the image content to a non-visual user. |
<label> with for | Plain text next to an input | Links the descriptive text to the input field for screen reader announcement. |
2. What is ARIA?
ARIA (Accessible Rich Internet Applications) is a specification that defines a set of special attributes that can be added to HTML elements.
- Purpose: ARIA is used when native HTML semantics are not sufficient, typically for custom-built, highly interactive UI components (like complex menus, tab interfaces, image carousels, or dynamic alerts).
- Rule 1 of ARIA: Don’t use ARIA if you can use native HTML. If a semantic HTML element exists for the job (e.g.,
<button>for a button), use that instead.
3. Key ARIA Attributes
ARIA attributes primarily fall into three categories:
A. Roles (Defining What an Element Is)
The role attribute defines the purpose of an element when native HTML doesn’t suffice.
| Role | Purpose | Native HTML Equivalent |
role="alert" | Indicates a crucial, time-sensitive message that should be announced immediately. | None |
role="navigation" | Defines a list of links as a navigation area. | <nav> |
role="tablist" | Defines the container for a set of tab controls. | None |
B. Properties (Describing States)
Properties provide the element with essential characteristics that don’t change frequently.
| Property | Purpose | Example Use |
aria-label | Provides a visible label when the element has no descriptive text (e.g., an icon-only button). | <button aria-label="Close">X</button> |
aria-describedby | Points to the ID of another element that provides a descriptive label or instruction. | Linking form instructions to the input. |
aria-expanded | Indicates whether a component (like a dropdown) is currently open (true) or closed (false). |
C. States (Describing Dynamic Status)
States describe the current, dynamic condition of the element (often changed by JavaScript).
| State | Purpose | Example Use |
aria-hidden | Indicates that the element is not visible or perceivable to any user, including screen readers. | Hiding content that is animated off-screen. |
aria-invalid | Indicates that the user’s input is invalid. | <input aria-invalid="true"> after a failed validation. |
aria-current | Indicates the element that represents the current item within a set (e.g., the current page in a pagination list). |
Example: An Icon Button
A common accessible mistake is an icon button that has no visible text. ARIA provides a way to label it for screen readers:
<button class="icon-button" aria-label="Search">
[Image of Magnifying Glass Icon]
</button>
