The Project | About Us | Contribute | Donations | License
HOME My courses Completed
◄ Previous
◄

Using ARIA Roles

Next ►
►

Introduction

ARIA (Accessible Rich Internet Applications) roles are attributes that define ways to make web content and web applications more accessible to people with disabilities. ARIA roles help assistive technologies, like screen readers, understand the purpose and structure of web elements.

Key Concepts

  1. ARIA Roles: Define the type of element (e.g., button, navigation, main content).
  2. ARIA States and Properties: Provide additional information about the element's current state (e.g., expanded, disabled).
  3. ARIA Landmarks: Help users navigate through the page by defining regions (e.g., banner, main, complementary).

Common ARIA Roles

Role: banner

Defines the header of the page or section.

<header role="banner">
  <h1>Website Title</h1>
</header>

Role: navigation

Defines a section of the page intended for navigation.

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

Role: main

Defines the main content of the document.

<main role="main">
  <article>
    <h2>Main Article</h2>
    <p>This is the main content of the page.</p>
  </article>
</main>

Role: complementary

Defines a supporting section of the document, often a sidebar.

<aside role="complementary">
  <h2>Related Content</h2>
  <p>This is additional content related to the main article.</p>
</aside>

Role: contentinfo

Defines the footer of the page or section.

<footer role="contentinfo">
  <p>&copy; 2023 Your Website</p>
</footer>

Practical Example

Let's create a simple webpage using ARIA roles to enhance accessibility.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Using ARIA Roles</title>
</head>
<body>
  <header role="banner">
    <h1>My Accessible Website</h1>
  </header>

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

  <main role="main">
    <article>
      <h2>Main Article</h2>
      <p>This is the main content of the page.</p>
    </article>
  </main>

  <aside role="complementary">
    <h2>Related Content</h2>
    <p>This is additional content related to the main article.</p>
  </aside>

  <footer role="contentinfo">
    <p>&copy; 2023 My Accessible Website</p>
  </footer>
</body>
</html>

Exercise

Task

Create a webpage with the following structure using ARIA roles:

  • A header with a site title.
  • A navigation menu with links to "Home", "Services", and "Contact".
  • A main section with an article containing a heading and a paragraph.
  • A sidebar with related links.
  • A footer with copyright information.

Solution

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>ARIA Roles Exercise</title>
</head>
<body>
  <header role="banner">
    <h1>My Website</h1>
  </header>

  <nav role="navigation">
    <ul>
      <li><a href="#home">Home</a></li>
      <li><a href="#services">Services</a></li>
      <li><a href="#contact">Contact</a></li>
    </ul>
  </nav>

  <main role="main">
    <article>
      <h2>Welcome to Our Services</h2>
      <p>We offer a wide range of services to meet your needs.</p>
    </article>
  </main>

  <aside role="complementary">
    <h2>Related Links</h2>
    <ul>
      <li><a href="#link1">Link 1</a></li>
      <li><a href="#link2">Link 2</a></li>
    </ul>
  </aside>

  <footer role="contentinfo">
    <p>&copy; 2023 My Website</p>
  </footer>
</body>
</html>

Conclusion

Using ARIA roles is essential for creating accessible web content. By defining roles, states, and properties, you can significantly enhance the user experience for people with disabilities. Remember to always test your web pages with various assistive technologies to ensure accessibility.

In the next section, we will cover Testing for Accessibility, where we will learn how to verify that our web pages are accessible to all users.

◄ Previous
◄
Next ►
►
The Project | About Us | Contribute | Donations | License
© Copyright 2024. All rights reserved