Aria Label & Aria Hidden

What is ARIA-Label

Aria-label is an HTML attribute that provides an accessible label or text alternative for an element, typically for user interface components like buttons, links, and form elements. The purpose of aria-label is to improve the accessibility of web content for people with impairments, especially those using screen readers or other assistive technologies.

What is ARIA-Hidden

Aria-hidden is an HTML attribute that indicates whether an element and its descendants should be visible and accessible to assistive technologies, such as screen readers. It plays a crucial role in web accessibility by allowing developers to control what content is exposed to screen readers or remains hidden from them.

How and When to Use Aria-Label

Developers use the aria-label attribute in HTML to enhance the accessibility of web content by providing a label or text alternative for an element. Here's how and when developers typically use aria-label:

1. Custom Controls: When developers create custom controls or user interface elements using HTML, CSS, and JavaScript, they often use an aria-label to provide a meaningful description of the control's purpose or function. This labelling helps users with impairments understand how to interact with the control.
2. Icons and Images: When using icons or images that don't have descriptive text, developers can use an aria-label to provide a text description for screen reader users. For example, if an icon represents "Save," the aria-label attribute can convey that information.
3. Buttons and Links: In cases where a button or link doesn't have sufficient text content to explain its purpose, developers can use an aria-label to provide a concise and meaningful label. This labelling is particularly useful for icons used as buttons.
4. Interactive Elements: When there are interactive elements like form inputs, sliders, or widgets, developers use aria-label to clarify their function. For instance, a slider that adjusts volume can have an aria-label like "Volume Control."

How and When to Use Aria-Hidden

Developers use the aria-hidden attribute in HTML to control the visibility and accessibility of content for assistive technologies like screen readers. Here's how and when developers typically use aria-hidden:

1. Hiding Decorative Content: Developers use aria-hidden to hide content that is purely decorative or redundant for screen reader users. Decorative content includes decorative images, icons, or decorative text that don't convey meaningful information and would only add unnecessary noise to the user's experience. For example, if there's a decorative border image around a heading. In that case, you might set aria-hidden= "true" on the <img> element to hide it from screen readers while preserving its visual appearance.
2. Managing Visibility of Dynamic Content: When developers create interactive web applications that dynamically show or hide content based on user actions, they use aria-hidden to control the visibility of hidden content. Hiding content like this ensures that screen readers do not announce or interact with hidden content until it becomes relevant. For instance, if you have an accordion with collapsible sections, you might set aria-hidden= "true" on the hidden sections by default and change it to aria-hidden= "false" when a user expands the section.
3. Enhancing Focus and Navigation: Developers use aria-hidden to improve keyboard navigation for screen reader users. When the developer hides content with aria-hidden= "true," it's skipped during keyboard navigation, allowing users to focus on visible and relevant content more efficiently.
4. Screen Reader-Only Content: Sometimes, developers want to provide additional information exclusively to screen reader users. They can use aria-hidden to hide this content from sighted users while making it available to assistive technologies. This technique is known as "screen reader-only" content, and developers often use this for accessibility notes or instructions.

Tools Required to Test Aria-Label and Aria-Hidden

Tools Required to Test Aria-Label

• Screen Reader
• Keyboard
• Accessibility Evaluation Tool
• Web Developer Extension

Tools Required to Test Aria-Hidden

• Screen Reader
• Accessibility Evaluation Tool
• Web Developer Extension

How to Test, Potential Accessibility Issues and Other Important Information

How to Test Aria-Label

1. Open the web page to be tested.
2. Using the Web Development Extension and keyboard, locate and navigate to an element that uses the aria-label attribute.
3. Use the Screen Reader to listen to the announcement of the aria-label
4. If the element is interactive (button or link, for example), interact with it using the keyboard to ensure it works as intended.
5. If multiple elements utilise aria-label, repeat steps 2. to 4. as required until testing is complete.

How to Test Aria-Hidden

1. Open the web page to be tested
2. Using the Web Developer Extension, identify an aria-hidden element, checking the value to see whether it is 'True' or 'False'.
3. Navigate to the section with the Screen Reader and observe if the Screen Reader reads out the value. The value is set to 'True' if the Screen Reader skips over the content. If, on the other hand, the Screen Reeder announces the content correctly, then the value is 'False'.
4. If multiple elements use aria-hidden, repeat steps 2. and 3. as required until testing is complete.

Potential Accessibility Issues

Multiple accessibility issues could potentially arise from using aria-label and aria-hidden. Here are a few of them:

Aria-Label

• Redundant or Confusing Labels: Providing an aria-label that duplicates or contradicts an existing visible label or content can confuse users, especially those who rely on screen readers. Ensure that the aria-label adds clarity and doesn't create confusion.
• Overuse: Using aria-label excessively on elements with visible text can clutter the screen reader output and make it harder for users to understand the content's structure and purpose. Reserve it for cases where the visible text is insufficient or ambiguous.
• Inadequate Labels: Providing vague or insufficient labels with aria-label can be unhelpful. Always aim to provide concise, descriptive labels that effectively convey the element's purpose or function.

Aria-Hidden

• Ineffective Hiding: Misusing aria-hidden by setting it to "true" on elements that should be accessible can cause content to become entirely hidden from assistive technologies, making it impossible for users to access critical information.
• Content Trapping: Overusing aria-hidden to hide content can trap users with impairments in an isolated part of the page or prevent them from accessing important content or functionality.
• Hidden Interactive Elements: Hiding interactive elements like form fields or buttons with aria-hidden="true" can prevent keyboard and screen reader users from interacting with them when they should be accessible.
• Screen Reader Confusion: Incorrectly using aria-hidden may confuse screen readers. Developers can accidentally do this by hiding content or when an attribute's value changes unexpectedly. These cases can lead to a disjointed and confusing user experience.

WCAG Guidelines Surrounding Aria-Label and Aria-Hidden

Aria-Label

• 1.1.1. Non-Text Content
• 2.1.1. Keyboard
• 2.4.6. Heading and Labels
• 3.3.2. Labels or Instructions
• 4.1.2. Name, Role, Value
• 4.1.3. Status Messages

Aria-Hidden

• 1.1.1. Non-Text Content
• 1.3.1. Info and Relationships
• 2.4.3. Focus Order
• 4.1.2. Name, Role, Value
• 4.1.3. Status Messages

Further Reading

• Aditus has an article on how to use aria-label effectively. It provides examples and best practices.
• The A11y-101 website has articles on both aria-label and aria-hidden. Both articles have video examples to show how to set them up properly.
• Mozilla Web Document has an article about aria-hidden and how to use it effectively.