Enhancing Web Accessibility with ARIA Labels: A Gateway to Inclusive User Experiences
In today's interconnected world, the web has become an integral part of our lives. It serves as a gateway to information, communication, and countless digital experiences. However, it is crucial to recognize that not everyone interacts with the digital realm in the same way. Accessibility, or the lack thereof, can pose significant barriers for individuals with disabilities, impeding their ability to access and navigate websites and web applications.
One of the key elements available to a Web Developer to enhance web accessibility is the use of Accessible Rich Internet Applications (ARIA) labels. These labels provide a means to convey important information to assistive technologies, such as screen readers, enabling individuals with visual impairments to perceive and comprehend the content presented on web pages effectively.
At Buildo, we firmly believe in the power of accessibility and its profound impact on the web and its users. For this, we are dedicated to raising awareness and driving positive change in the digital landscape.
In this blog post, we will explore the significance of ARIA labels and their impact on web accessibility. By leveraging ARIA labels, web developers can take a significant step toward ensuring that everyone, regardless of their abilities, can engage with digital content effortlessly.
What are ARIA labels?
The usage of ARIA labels is described in the WAI-ARIA (Web Accessibility Initiative - ARIA) specification, a technical document designed by the W3C to enhance the accessibility of web contents through the usage of attributes, roles, and states added to HTML elements to convey additional information about their purpose, behavior, and interactive features.
Let's start by exploring the simplest example of an ARIA label in action. Imagine a button on a web page that displays a heart icon, representing the action of liking something.
While the visual representation of the heart is clear to sighted users, it may not convey the same meaning to individuals relying on assistive technologies like screen readers. By incorporating an ARIA label, we can provide a concise and meaningful description of the button's purpose, ensuring that all users, regardless of their abilities, understand its function. In this case, the ARIA label "Like" or "Favorite" can be added to the button, making it perceivable and interpretable by assistive technologies. This simple implementation of an ARIA label transforms an otherwise ambiguous icon into a clear and accessible user interface element, improving the overall user experience and inclusivity of the web application.
When ARIA labels are useful to hide content
ARIA labels in form fields
Web forms may offer very frustrating experiences even for users without disabilities. Sometimes it’s very hard to understand what error is blocking us from submitting a form and how to solve it. Even more so, a user with disabilities may encounter even more difficulties in simply understanding the structure of the form or the correspondence between an error and the field it refers to.
For this reason, ARIA labels play a crucial role in enhancing accessibility for form fields, offering a way to provide additional information to understand the form structure.
It's really important, in this case, to recognize the disparities in perceiving and understanding content between users with full sight and those who are visually impaired.
Let’s consider the following example:
In the image above, a user with full sight can easily associate the label (”Nickname”) with the corresponding field and identify the error message (in red) based on their visual proximity and spatial relations.
However, for visually impaired users, it’s not possible to rely on visual cues and spatial positioning. This is where ARIA labels play a vital role in bridging the accessibility gap. By implementing ARIA labels, the screen reader can explicitly convey the label "Nickname" to the user, ensuring they understand the purpose of the text field. Additionally, when the error message is associated with the field using an ARIA label, the screen reader can audibly announce the error message, providing crucial feedback about the specific validation requirement.
Assisting Gruppo San Donato in improving accessibility
Gruppo San Donato is one of the biggest healthcare groups in Italy. Due to the environment in which they operate, they have to take great care in making their applications accessible. For this reason, they asked Buildo to assist them in their path to improve the usability and accessibility of their software.
We started with an assessment of their web application, testing it against the WCAG 2.1 principles and criteria. Following our well-defined and replicable process, we evaluated different aspects of the platform, from its design and copywriting to the underlying code, ensuring that it meets the standards required for accessibility by the European Accessibility Act.
In particular, we focused on providing tips to improve the accessibility of web forms, used for example to collect data about patients. GSD did a great job of providing meaningful errors to the user, putting the error messages near the fields they referred to, and highlighting the wrong field and the error message with an error color:
However, apart from these visual clues, there is no way for the assistive technologies to identify the wrong fields and the related error messages just looking at the HTML code, since the only information added in case of errors is the CSS classnames used to apply the styling:
To know more about the way we helped GSD in improving the accessibility of their apps, have a look at the case study on our website.
We have seen how, by incorporating ARIA labels into web applications, we can significantly improve the experience for users with disabilities. ARIA labels serve as powerful tools to provide alternative text, describe interactive elements, and convey important information to assistive technology users.
Incorporating ARIA labels is just one piece of the broader accessibility puzzle. It is essential to follow accessibility guidelines, perform thorough testing, and involve users with disabilities in the design and development process to create truly inclusive web experiences.
In view of the entry into force of the European Accessibility Act (EEA), which promotes equal access to goods and services for persons with disabilities, it is crucial to start thinking about accessibility now to ensure compliance and to meet the needs of individuals with disabilities proactively.
By making accessibility a priority and embracing technologies like ARIA labels, we can build a web that is accessible to all, breaking down barriers and empowering individuals of diverse abilities to participate in the digital world fully. And this is also what we in Buildo believe: embrace accessibility as a core value, integrating it into our work to create digital solutions accessible to everyone and create a more inclusive and equitable world.