Screen Reader Only Code versus ARIA Labels
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.
ARIA Labels: Enhancing Accessibility with Roles and Properties
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.