Screen Reader Only Code versus ARIA Labels

Quick Links

Screen Reader Only Code versus ARIA Labels
sr-only Code: Hiding Content for Screen Readers
ARIA Labels: Enhancing Accessibility with Roles and Properties
When to Use sr-only Code and When to Opt for ARIA Labels
Best Practices for Digital Accessibility

sr-only Code: Hiding Content for Screen Readers

Screen readers are one of the most popular technologies used by people with disabilities. They convert the information and content within digital environments to audio. Screen readers and most other assistive technologies rely heavily on the source code of a website or application to function correctly.

When the screen reading order of a website or application follows a logical flow, similar to how the eye would read it, then using that website or application becomes an equitable experience. However, there may be times when a developer or designer would like to make certain information available only to screen reader users. This is where sr-only code comes in.

sr-only code is a technique that uses CSS to visually hide content while ensuring it remains accessible to screen readers. It is commonly used to provide additional context that may be redundant for sighted users, such as instructions on how to navigate a carousel or extra information about an infographic or data table.

While there are several benefits to sr-only code, an important thing to remember is that websites should be designed for the benefit of all users. Information that developers believe is useful only to screen reader users may in fact be needed by everyone.

ARIA Labels: Enhancing Accessibility with Roles and Properties

The Accessible Rich Internet Applications (ARIA) specification provides roles, properties, and states that can be added to HTML elements to improve accessibility. Similar to sr-only code, ARIA can convey additional information to assistive technology and screen reader users without changing the visual look of a website or application.

For example, ARIA attributes like a label and role can add meaning to div elements and make them interactive for users, while ARIA live can notify users about changes in the content of a live region of a page or enable form hints and error messages. There are also attributes like ARIA hidden that can completely hide purely decorative content from screen readers.

But ARIA must supplement HTML, not replace it. Developers and designers are cautioned against using ARIA when it is unnecessary, and whenever possible, should stick with native HTML elements that already have built-in accessibility. If used incorrectly, ARIA labels will override existing content and result in a poor user experience.

When to Use sr-only Code and When to Opt for ARIA Labels

sr-only code and ARIA labels can be used in similar ways. For example, if a user would like to add additional context to a link labelled “learn more”:

With sr-only code, a developer may add more information so screen reader users hear this link as “learn more about us”.
Alternatively, a developer may add an ARIA label that overrides the visible text completely, and so screen reader users hear this link as “about us”.

It is important to choose the right technique based on the accessibility requirements of the content. Completely changing the link label with ARIA may cause issues for voice control users, so in this case, sr-only code would be preferable. Skip to main content links that appear to sighted users when they receive keyboard focus are often implemented using sr-only code instead of ARIA.

However, elements implemented with icons or graphics such as X buttons to close pop-up windows or + buttons to open submenus will opt for ARIA labels.

Best Practices for Digital Accessibility

sr-only code and ARIA labels can help improve the accessibility of your website and application, but they won’t bring you the whole way. Relying too much on these techniques may cause you to forget about the importance of universal design.

Semantic HTML code is preferred above all when designing a website, and having proper heading structure, readable content, keyboard accessibility, descriptive labels and meaningful text alternatives will ensure you stay ahead of the curve as the internet continues to evolve. sr-only code and ARIA should be used in conjunction with these techniques and best development practices to create an inclusive user experience.

Contact Vially today and embark on a journey to make the web a space that truly welcomes and empowers every user.

Is your website accessible?

Scan your website