Login

team@digitalaccessibilitytraining.org


SR-Only

Public Article

Article is certified Certified Article

The content of this article is certified for accuracy by the Digital Accessibility Centre.

What is SR-Only and How to use it.

What is SR-Only

The ‘sr-only’ class stands for ‘Screen Reader Only’. The class hides elements that only screen readers can see and thus read. It creates a container that hides content visually but retains its keyboard and mobile accessibility. When navigating in context, the element remains navigable.

The sr-only class works because Screen Readers on mobile and desktop work by reading HTML elements while ignoring CSS elements. As long as an HTML element is in sequence, accessible by the keyboard and contains information, Screen Reading Software can find it.

How to use SR-Only

Setting a width and height of 1px (so it retains presence) and taking it out of the usual visual flow with ‘position: absolute’ and moving off the document edge by 1 pixel is hidden from view. Ensuring that there is no overflow by removing the border and setting a clip and rectangle of 0 (to integrate with frameworks) eliminates all visual presence of the element.

Use the following code to create the class for yourself:

.sr-only {
position:    absolute !important;
overflow:    hidden   !important;
white-space: nowrap   !important;
width:   1px !important;
height:  1px !important;
margin: -1px !important;
padding: 0   !important;
border:  0   !important;
clip: rect(1px 1px 1px 1px) !important;
-webkit-clip-path: inset(50%) !important;
clip-path: inset(50%) !important;
}

Tools Required, How to Test and Other Important Information

Tool Required to test SR-Only

  • Screen Reader
  • Keyboard

How to Test SR-Only

  1. Open the webpage to be tested.
  2. Activate the Screen Reader and interact with the page using it.
  3. Verify that the following is working correctly:
    • That the screen reader is reading the hidden content as intended
    • The content is presented logically and understandable when read by the screen reader
    • That critical information, e.g. navigation labels, form fields, etc., is accessible to the screen reader and is being read

WCAG 2.1/2 Guidelines Related to the SR-Only Class

Further Reading

SR-Only was posted on 20/07/2023 @ 15:26