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.

WebAIM recommendation for screen reader-only content

"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 content

Using a screen reader, verify that there is a second paragraph.

Loading...

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.

Loading...

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.

Loading...

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.

Loading...

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.

Loading...

Styles helpers

.euiScreenReaderOnly className

This utility class allows you to apply the screen reader only CSS styles directly to your component.

The next paragraph is hidden except for screen readers.

I am hidden except for screen readers

✄𐘗
tsx code block:
✄𐘗<p className="euiScreenReaderOnly" />

euiScreenReaderOnly() function

This function allows you to apply the screen reader only CSS styles directly to your component.

The next paragraph is hidden except for screen readers.

I am hidden except for screen readers

✄𐘗
tsx code block:
✄𐘗css`
  ${euiScreenReaderOnly()}
`

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'];

✄𐘗
tsx code block:
✄𐘗css`
  &:focus {
    ${useEuiFocusRing('center', euiTheme.colors.accent)}
  }
`

Props

EuiScreenReaderOnly

𐘂𐘂

✄𐘗✄𐘗

Prop ↦	Description and type ↦	Default value ↵
Prop children# ↦	Description and type ReactElement to render as this component's content Type: 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. Type: boolean ↦	Default value ↵
Prop className# ↦	Description and type Type: string ↦	Default value ↵

𐘂𐘂

EuiScreenReaderLive

𐘂𐘂

✄𐘗✄𐘗

Prop ↦	Description and type ↦	Default value ↵
Prop isActive# ↦	Description and type Whether to make screen readers aware of the content Type: boolean ↦	Default value true ↵
Prop children# ↦	Description and type Content for screen readers to announce Type: ReactNode ↦	Default value ↵
Prop role# ↦	Description and type role attribute for both live regions. https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/ARIA_Live_Regions#roles_with_implicit_live_region_attributes Type: AriaRole ↦	Default value status ↵
Prop aria-live# ↦	Description and type aria-live attribute for both live regions Type: "off" | "assertive" | "polite" ↦	Default value ↵
Prop focusRegionOnTextChange# ↦	Description and type On children/text change, the region will auto-focus itself, causing screen readers to automatically read out the text content. This prop should primarily be used for navigation or page changes, where programmatically resetting focus location back to a certain part of the page is desired. Type: boolean ↦	Default value false ↵

𐘂𐘂

EuiSkipLink

Extends AnchorHTMLAttributes

𐘂𐘂

✄𐘗✄𐘗

Prop ↦	Description and type ↦	Default value ↵
Prop destinationId# ↦	Description and type Typically an anchor id (e.g. a11yMainContent), the value provided will be prepended with a hash # and used as the link href Type: string ↦	Default value Required ↵
Prop position# ↦	Description and type Change the display position of the element when focused. If 'fixed', the link will be fixed to the top left of the viewport Type: "fixed" | "absolute" | "static" ↦	Default value static ↵
Prop fallbackDestination# ↦	Description and type If no destination ID element exists or can be found, you may provide a query selector string to fall back to. For complex applications with potentially variable layouts per page, an array of query selectors can be passed, e.g. ['main', '[role=main]', '.appWrapper'], which prioritizes looking for multiple fallbacks based on array order. Type: string | string[] ↦	Default value main ↵
Prop overrideLinkBehavior# ↦	Description and type If default HTML anchor link behavior is not desired (e.g. for SPAs with hash routing), setting this flag to true will manually scroll to and focus the destination element without changing the browser URL's hash Type: boolean ↦	Default value ↵
Prop tabIndex# ↦	Description and type When position is fixed, this is forced to 0 Type: number ↦	Default value ↵
Prop fill# ↦	Description and type Make button a solid color for prominence Type: boolean ↦	Default value ↵
Prop color# ↦	Description and type Any of the named color palette options. Type: "primary" | "text" | "accent" | "accentSecondary" | "success" | "warning" | "danger" ↦	Default value ↵
Prop size# ↦	Description and type Use size s in confined spaces Type: "s" | "m" ↦	Default value ↵
Prop isDisabled# ↦	Description and type disabled is also allowed Type: boolean ↦	Default value ↵
Prop style# ↦	Description and type Type: CSSProperties ↦	Default value ↵
Prop className# ↦	Description and type Type: string ↦	Default value ↵
Prop css# ↦	Description and type Type: Interpolation<Theme> ↦	Default value ↵
Prop element# ↦	Description and type Type: "a" | "button" | "span" ↦	Default value ↵
Prop isSelected# ↦	Description and type Applies the boolean state as the aria-pressed property to create a toggle button. Only use when the readable text does not change between states. Type: boolean ↦	Default value ↵
Prop fullWidth# ↦	Description and type Extends the button to 100% width Type: boolean ↦	Default value ↵
Prop minWidth# ↦	Description and type Override the default minimum width Type: false | MinWidth<string | number> ↦	Default value ↵
Prop isLoading# ↦	Description and type Force disables the button and changes the icon to a loading spinner Type: boolean ↦	Default value ↵
Prop contentProps# ↦	Description and type Object of props passed to the wrapping the button's content Type: CommonProps & EuiButtonDisplayContentType ↦	Default value ↵
Prop type# ↦	Description and type Type: "button" | "reset" | "submit" ↦	Default value ↵
Prop iconType# ↦	Description and type Any type accepted by EuiIcon Type: IconType ↦	Default value ↵
Prop iconSide# ↦	Description and type Can only be one side left or right Type: ButtonContentIconSide ↦	Default value ↵
Prop textProps# ↦	Description and type Object of props passed to the <span> wrapping the content's text/children only (not icon) This span wrapper can be removed by passing textProps={false}. Type: false | (HTMLAttributes<HTMLSpanElement> & CommonProps & { ref?: Ref<HTMLSpanElement>; 'data-text'?: string; }) ↦	Default value ↵
Prop iconSize# ↦	Description and type Type: "s" | "m" ↦	Default value ↵
Prop aria-label# ↦	Description and type Defines a string value that labels the current element. @see aria-labelledby. Type: string ↦	Default value ↵
Prop data-test-subj# ↦	Description and type Type: string ↦	Default value ↵
Prop href# ↦	Description and type Type: string ↦	Default value ↵
Prop onClick# ↦	Description and type Type: MouseEventHandler<HTMLAnchorElement> ↦	Default value ↵
Prop buttonRef# ↦	Description and type Type: Ref<HTMLAnchorElement> ↦	Default value ↵

𐘂𐘂