sr-only utility only shows an element to screen readers. It is hidden on all other devices.
clip:rect(0, 0, 0, 0);
Sr Only Focusable
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
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
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
C Prefers Letter Spacing 1
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
c-prefers-expanded-text expands all truncated text to be visible.
C Prefers Focus
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.