psammead-visually-hidden-text -

Description

Adds non-visible text to the page, to be utilised by screen-readers and other assistive technology.

Installation

npm install @bbc/psammead-visually-hidden-text

Props

| Argument | Type | Required | Default | Example | | --------- | ---- | -------- | ------- | ------- | | No props. | | | | |

Usage

import VisuallyHiddenText from '@bbc/psammead-visually-hidden-text';

const WrappingComponent = () => (
  <VisuallyHiddenText>Some offscreen text</VisuallyHiddenText>
);

Please bear in mind that if CSS is disabled, any children will be shown inline. Testing your usage of the component should include disabling page styling.

When to use this component

Visually hidden text should be used alongside any component which relies on visual aids or styling to communicate its purpose, as these aids may not be present for users who are relying on assistive technologies.

For example, a source/copyright overlay on an image may seem obvious in purpose when viewed on a page, but the contents of such a component could be jarring or confusing when immediately spoken out following the alt-text of an image. As a result, it utilises this component to provide additional context before reading its main text content.

When not to use this component

Avoid using this component with text that would cause unnecessary repetition. For example, there is no need to add visually hidden text stating "Image" next to an img tag, as assistive tech already explicitly communicates the presence of an image, and this would likely only prove confusing or irritating to users.

Similarly, when adding hidden text that will occur partway through an article, avoid using phrases that may imply that the main body is over. Suddenly hearing a phrase like "Read more on [subject]" may suggest to users that they have finished the article. To mitigate this, you may wish to wrap the content in an aside ARIA landmark or include a "skip link", giving users the option to skip back to the main body before the assistive technology reads the full content of the interjection.

Contributing

Psammead is completely open source. We are grateful for any contributions, whether they be new components, bug fixes or general improvements. Please see our primary contributing guide which can be found at the root of the Psammead respository.

Code of Conduct

We welcome feedback and help on this work. By participating in this project, you agree to abide by the code of conduct. Please take a moment to read it.

License

Psammead is Apache 2.0 licensed.