diff --git a/docs/src/__examples__/Tooltip/INDICATION.tsx b/docs/src/__examples__/Tooltip/INDICATION.tsx index 0b3f1f3b0f..a7216e37f8 100644 --- a/docs/src/__examples__/Tooltip/INDICATION.tsx +++ b/docs/src/__examples__/Tooltip/INDICATION.tsx @@ -25,8 +25,10 @@ export default { An open source design system for your next travel project. } + aria-label="Orbit design system" + aria-labelledby="orbit-success" > - Orbit + Orbit {" "} a try. @@ -41,15 +43,21 @@ export default { An open source design system for your next travel project. } + aria-label="Orbit design system" + aria-labelledby="orbit-success" > - Orbit + Orbit a try. } type="warning"> You - Check with your embassy.}> - may need a visa + Check with your embassy.} + aria-label="You may need a visa" + aria-labelledby="orbit-warning" + > + may need a visa for your trip. @@ -65,8 +73,10 @@ export default { An open source design system for your next travel project. } + aria-label="Orbit design system" + aria-labelledby="orbit" > - Orbit + Orbit diff --git a/docs/src/documentation/03-components/04-overlay/tooltip/03-accessibility.mdx b/docs/src/documentation/03-components/04-overlay/tooltip/03-accessibility.mdx new file mode 100644 index 0000000000..9888196435 --- /dev/null +++ b/docs/src/documentation/03-components/04-overlay/tooltip/03-accessibility.mdx @@ -0,0 +1,50 @@ +--- +title: Accessibility +redirect_from: + - /components/tooltip/accessibility/ +--- + +# Accessibility + +## Tooltip + +The Tooltip component has been designed with accessibility in mind. + +It can be used with keyboard navigation, and it includes the following properties that allow to improve the experience for users of assistive technologies: + +| Name | Type | Description | +| :-------------- | :------- | :---------------------------------------------------------------------------------------- | +| aria-label | `string` | Adds `aria-label` attribute to the rendered tooltip element. Announced by screen readers. | +| aria-labelledby | `string` | Id(s) of elements that announce the component to screen readers. | + +Mentioned props are optional, but highly recommended to use to ensure the best accessibility experience for all users. + +The `aria-label` prop can be used to provide a label for the tooltip that is announced by screen readers. + +The `aria-labelledby` prop can reference multiple ids, separated by a space. Value of the attribute is not announced by screen reader, content of connected +element does. + +The conjugation of these properties allows to provide a content of tooltip component to users of assistive technologies. + +For example, the following code snippet shows how to use these properties: + +```jsx + +

Lorem ipsum dolor sit amet

+ + } + aria-label="Tooltip label" + aria-labelledby="tooltip-labelledby" +> + Hello world. +
+``` + +Note that attribute `aria-labelledby` is connected with `id` attribute of the component that is the base for the Tooltip. Without that connection, the `aria-labelledby` attribute is ignored and not read by screen reader. + +The content of attribute `aria-labelledby` is prioritized before the content of `aria-label`. In case `aria-labelledby` is not filled in, +then the content of `aria-label` is read by screen reader. + +Be sure to include all relevant information on all of the properties that are announced by screen readers.