10.1 Accessibility
Accessibility of web content is a crucial part of modern web design. It's all about making sure everyone, including folks with disabilities, can easily interact with web pages.
One of the key tools for achieving this is ARIA attributes (Accessible Rich Internet Applications), which enhance the accessibility of web content by making it more understandable and accessible to assistive technologies like screen readers.
What is ARIA?
ARIA (Accessible Rich Internet Applications) is a set of special attributes you can add to HTML elements to boost their accessibility. These attributes provide extra info about the structure and behavior of elements, helping assistive technologies better interpret and interact with web content.
Key ARIA attributes for improving text readability:
The aria-label attribute
The aria-label attribute is used to provide a text label to an element that can be read by a screen reader. This attribute is handy when an element lacks a visible label or when you need a more detailed description.
Usage example:
<button aria-label="Close dialog">X</button>
The aria-labelledby attribute
The aria-labelledby attribute links an element to another label on the page using the label's id. It's useful for providing context and description by associating an element with an existing label.
Usage example:
<h2 id="section-title">Section Title</h2>
<p aria-labelledby="section-title">This is a paragraph of text related to the section title.</p>
The aria-describedby attribute
The aria-describedby attribute hooks an element up with one or more elements that provide a description, using their id. This attribute is great for giving additional info or context to an element.
Usage example:
<input type="text" aria-describedby="input-description">
<p id="input-description">Enter your name.</p>
10.2 Role
The role attribute
The role attribute defines the role of an element, guiding assistive technologies in understanding how to interpret it. There are loads of roles like button, navigation, main, article, and more.
Usage example:
<nav role="navigation">
<ul>
<li><a href="#home">Home</a></li>
<li><a href="#about">About Us</a></li>
<li><a href="#contact">Contact</a></li>
</ul>
</nav>
The aria-live attribute
The aria-live attribute is for content that gets updated dynamically. It tells the screen reader that the content inside the element has changed and should be read out. Values include off, polite, and assertive.
Usage example:
<div aria-live="polite">
<p>Important information will appear here.</p>
</div>
The aria-hidden attribute
The aria-hidden attribute indicates whether an element should be accessible to users via assistive technologies. A value of true hides the element from assistive technologies, while false makes it accessible.
Usage example:
<div aria-hidden="true">
<p>This text will be hidden from screen readers.</p>
</div>
The aria-expanded attribute
The aria-expanded attribute shows whether an element is expanded or collapsed. It's often used in controls like accordions and dropdown menus.
Usage example:
<button aria-expanded="false" aria-controls="menu">Menu</button>
<ul id="menu" hidden>
<li><a href="#item1">Item 1</a></li>
<li><a href="#item2">Item 2</a></li>
<li><a href="#item3">Item 3</a></li>
</ul>
The aria-controls attribute
The aria-controls attribute specifies which element is controlled by the current element. It's used with attributes like aria-expanded to create interactive controls.
Usage example:
<button aria-controls="content" aria-expanded="false">Show/Hide</button>
<div id="content" hidden>
<p>Hidden content.</p>
</div>
GO TO FULL VERSION