Website pattern library

Accessibility

Screen reader only class

Where an element conveys meaning through visual representation only (see demo below), we must provide a text alternative for screen readers.

The screen reader text should be placed inside a <span> tag and immediately preceed the described element. When using the 'sr-only' class, the description is positioned out of view on standard browsers:

.sr-only{
    	border: 0;
    	clip: rect(1px, 1px, 1px, 1px);
    	clip-path: inset(50%);
    	height: 1px;
    	margin: -1px;
    	overflow: hidden;
    	padding: 0;
    	position: absolute !important;
    	width: 1px !important;
    	word-wrap: normal !important;
        	}

Icon example

We use the 'external link' icon to inform the user they are about to exit the website. This information is not conveyed in the link text, therefore we provide a screen reader only description for the icon.

<a href="https://example.com" target="_blank">Visit this website
<span class="sr-only">External link opens in a new window</span>
<i class="fas fa-external-link-alt">
</a>

When NOT to use screen reader only text

Avoid using the screen reader only class where an element's meaning is already conveyed in text. This will eliminate repeated information being read by the screen reader.

In the example below the button text already informs the user that they will start an application, so there is no benefit in a text alternative for the 'chevron' icon.