Accessibility
Installation
yarn add @spark-web/a11y
@spark-web/a11y
The components in this library have been implemented with accessibility built in. This package aims to provide helpers for other occasions.
Emoji
Emojis can add playfulness to your interface, but require formatting to ensure that they are accessible for all users.
The Emoji
component wraps the provided symbol, defining it as an image. The
provided label will be announced by a screen reader. If no label is provided,
the emoji is assumed to be a decorative element with no semantic meaning and is
hidden from assistive technology.
VisuallyHidden
Content which should be visually hidden, but remain accessible to assistive
technologies such as screen readers, can be implemented using the
VisuallyHidden
component.
This can be useful in situations where additional visual information or cues (such as meaning denoted through the use of icons or colour) need to also be conveyed to non-visual users.
Props
Emoji Props
Prop | Type | Description |
---|---|---|
symbol | string | Emoji symbol. |
data? | DataAttributeMap | Sets data attributes on the component. |
label? | string | Label used to describe the symbol that will be announced to screen readers. |
VisuallyHidden Props
Prop | Type | Description |
---|---|---|
children? | ReactNode: string | number | false | true | {} | ReactElement<any, string | JSXElementConstructor<any>> | Iterable<ReactNode> | ReactPortal | Children elements to be hidden within this component. |
data? | DataAttributeMap | Sets data attributes on the component. |
Additional props are passed to the span
element and are not listed.