Accessibility is an important aspect of web design, as it ensures that everyone, including people with disabilities, can access and use your website.
One way to improve the accessibility of your website is by using semantic HTML elements, as discussed in our previous blog posts. Another way is by using ARIA attributes. These can provide additional information to assistive technologies and make your website more accessible.
ARIA (Accessible Rich Internet Applications) attributes are a set of HTML attributes that improve the accessibility of web content. Particularly for users with disabilities. ARIA attributes provide additional information about the purpose and structure of HTML elements. Making it easier for assistive technologies, such as screen readers, to navigate and interpret the content.
Here are some common ARIA attributes that improves the accessibility of your website:
aria-label
The aria-label
attribute is used to provide a label or description for an HTML element that doesn’t have any visible text. For example, if you have an icon that doesn’t have any text associated with it, you can use aria-label
to provide a description of what the icon represents.
Example usage of aria-label
attribute:
<button aria-label="Search"><i class="fas fa-search"></i></button>
aria-labelledby
The aria-labelledby
attribute is used to provide a label or description for an HTML element by referencing the ID of another element on the page. This is useful when you want to associate a label with an input field or form control.
Example usage of aria-labelledby
attribute:
<label id="name-label">Name:</label>
<input type="text" id="name-input" aria-labelledby="name-label">
aria-describedby
The aria-describedby
attribute is used to provide additional information about an HTML element. This is to provide a description or instructions for a form field or button.
Example usage of aria-describedby
attribute:
<label for="email">Email:</label>
<input type="email" id="email" aria-describedby="email-help">
<p id="email-help">Please enter a valid email address.</p>
aria-expanded
The aria-expanded
attribute is used to indicate whether an element that can be expanded or collapsed, such as a dropdown menu or accordion, is currently expanded or collapsed.
Example usage of aria-expanded
attribute:
<button aria-expanded="false" aria-controls="menu">Menu</button>
<ul id="menu" hidden>
<li><a href="#">Home</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Services</a></li>
<li><a href="#">Contact</a></li>
</ul>
ARIA attributes in addition to semantic HTML elements, can greatly improve the accessibility of your website. They provide additional information about the purpose and structure of HTML elements. Making it easier for assistive technologies to interpret the content. Implementing them can ensure you that your website is accessible to as many users as possible, including those with disabilities.