Accessibility
Sr Only
The sr-only utility only shows an element to screen readers. It is hidden on all other devices.
| Utility | Value |
|---|---|
| sr-only | border:0; clip:rect(0, 0, 0, 0); height:1px; margin:-1px; overflow:hidden; padding:0; position:absolute; white-space:nowrap; width:1px; |
Sr Only Focusable
The sr-only-focusable utility should be used with sr-only. It only displays an element when focused by a keyboard.
<a class="btn btn-link sr-only sr-only-focusable" href="#skip-to-content"
>Skip to Content</a
>C Prefers Reduced Motion
The class c-prefers-reduced-motion should be added to the body tag to remove all CSS animations and transitions even if the user's system setting does prefer motion.
C Prefers Link Underline
The class c-prefers-link-underline should be added to the body tag to force all hyperlinks to be underlined. It does not apply underline to links with role="button" or the disabled class.
C Prefers Letter Spacing 1
The class c-prefers-letter-spacing-1 provides more space between characters to make it easier to read. It adds letter-spacing: 1px to the document.
C Prefers Expanded Text
The class c-prefers-expanded-text expands all truncated text to be visible.
C Prefers Focus
The class c-prefers-focus should be added to the body element to show the focus outline on mouse click. This is an accessibility feature for users who prefer this style of navigation.
Focus Visible is now supported in all major browsers. We have enabled it by default in Clay CSS. Using the mouse to click on links, buttons, checkboxes, and other elements no longer show the focus outline. The focus outline will be shown when interacting with elements via keyboard.