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.