Accessibility

Sr Only

The sr-only utility only shows an element to screen readers. It is hidden on all other devices.

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 className="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.