Building Accessible Web Applications with HTML and ARIA

By Anastasia K.3 min readMarch 2, 2026

Understanding Accessibility and ARIA

Accessibility ensures that all users, regardless of their abilities or disabilities, can interact with web applications. ARIA is a set of attributes that can be added to HTML elements to improve accessibility, particularly for dynamic content and advanced user interface controls.

Key ARIA Roles and Properties

Before diving into examples, it's essential to understand some key ARIA roles and properties that will be used in our examples:

ARIA Role	Description
`button`	Represents a clickable button.
`navigation`	Denotes a navigation section of the page.
`alert`	Indicates that an element will contain an important message.
`dialog`	Represents a dialog window that requires user interaction.

Example 1: Accessible Navigation Bar

Creating an accessible navigation bar is crucial for helping users find their way around your application. Below is an example of a simple navigation bar using HTML and ARIA.

<nav role="navigation" aria-label="Main Navigation">
    <ul>
        <li><a href="#home" role="link">Home</a></li>
        <li><a href="#about" role="link">About</a></li>
        <li><a href="#services" role="link">Services</a></li>
        <li><a href="#contact" role="link">Contact</a></li>
    </ul>
</nav>

In this example, the role="navigation" attribute indicates that this section of the page is a navigation area, while aria-label provides a label for screen readers.

Example 2: Accessible Modal Dialog

Modals are commonly used in web applications for displaying content without navigating away from the current page. Here’s how to make a modal dialog accessible:

<div role="dialog" aria-labelledby="dialogTitle" aria-modal="true" style="display:none;">
    <h2 id="dialogTitle">Important Information</h2>
    <p>This is an important message that requires your attention.</p>
    <button onclick="closeDialog()">Close</button>
</div>

In this example, the role="dialog" attribute indicates that this is a dialog, and aria-labelledby associates the dialog with its title. The aria-modal="true" attribute specifies that the dialog is modal, meaning it prevents interaction with the rest of the page until it is closed.

Best Practices for Using ARIA

Use Native HTML Elements First: Always prefer native HTML elements over ARIA roles when possible. For example, use <button> instead of a <div> with role="button".

Don’t Overuse ARIA: Use ARIA attributes only when necessary. Overusing ARIA can lead to confusion and decreased accessibility.

Test with Screen Readers: Always test your application with screen readers to ensure the ARIA attributes are functioning as intended.

Provide Context: Use aria-describedby to provide additional context for elements that may need further explanation.

Example 3: Accessible Form Elements

Forms are essential for user interaction but can often be inaccessible. Below is an example of an accessible form using HTML and ARIA.

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

In this example, the form is labeled with aria-labelledby, and the aria-required attribute indicates that the fields are mandatory.

Conclusion

Building accessible web applications with HTML and ARIA is not only a best practice but also a legal requirement in many jurisdictions. By following the examples and guidelines provided in this tutorial, developers can create applications that are usable by everyone, regardless of their abilities.