Accessibility
Screen reader only
Using
EuiScreenReaderOnly
hides the wrapped element from the page, but keeps it accessible for screen readers to provide more context. It should be used primarily to mask text and requires the child to be a single React element for cloning."In most cases, if content (particularly content that provides functionality or interactivity) is important enough to provide to screen reader users, it should probably be made available to all users."
Learn more about invisible contentUsing a screen reader, verify that there is a second paragraph.
Showing on focus
If the wrapped element is focusable, you must use the showOnFocus
prop to visibly show the element to all users when focused.
Tab through the following example with your keyboard to verify the element is visible on focus.
Screen reader live region
Using EuiScreenReaderLive
to announce dynamic content, such as status changes based on user interaction.
The configurable role
and aria-live
props default to status
and polite
respectively for non-intrusive but timely update announcements. When not using the default values, be sure to follow ARIA guidelines for role
to aria-live
mapping.
Also consider other live region guidelines, such as that live regions must be present on initial page load, and should not be in a conditional JSX wrapper.
Auto-focusing the live region on text change
The focusRegionOnTextChange
prop will automatically focus the EuiScreenReaderLive
region (causing screen readers to read out the text content) whenever children
changes.
This is primarily useful for announcing navigation or page changes, when programmatically resetting focus location back to a certain part of the page (where the EuiScreenReaderLive
is placed) is desired.
Using a screen reader, click the following navigation links and notice that when the new page is announced, focus is also set to the top of the body content.
Skip link
The EuiSkipLink
component allows users to bypass navigation, or ornamental elements, and quickly reach the main content of the page. It requires a destinationId
which should match the id
of your main content. If your ID does not correspond to a valid element, the skip link will fall back to focusing the <main>
tag on your page, if it exists.
Tab through the following section to verify the Skip to content button is visible on focus.
Styles helpers
.euiScreenReaderOnly
className
This utility class allows you to apply the screen reader only CSS styles directly to your component.
euiScreenReaderOnly()
function
This function allows you to apply the screen reader only CSS styles directly to your component.
useEuiFocusRing(offset?, color?)
hook
By default, all interactive elements will inherit the outline
property from the reset file. However, some instances require adjustment to the offset
and color
of this outline. This helper function allows that customization of the focus outline.
offset: 'inset' | 'outset' | 'center' | CSSProperties['outlineOffset'];
color: CSSProperties['outlineColor'];
Props
EuiScreenReaderOnly
Prop | Description and type | Default value |
---|---|---|
Prop children# | Description and type ReactElement to render as this component's content ReactElement<any, string | JSXElementConstructor<any>> | Default value Required |
Prop showOnFocus# | Description and type For keyboard navigation, force content to display visually upon focus/focus-within. boolean | Default value |
Prop className# | Description and type Type: string | Default value |
EuiScreenReaderLive
Prop |
---|