Paste

Design System

Screen Reader Only

Utility for visually hiding content to provide an accessible experience for users of assistive technology.

Status
beta
Version
1.1.9
Sources
Install
yarn add @twilio-paste/screen-reader-only — or — yarn add @twilio-paste/core

Guidelines#

About Screen Reader Only#

The Screen Reader Only component should be used to visually hide content that is necessary to provide appropriate context to users who experience a page using assistive technology.

When wrapped with the Screen Reader Only component, content is visually hidden but still available to assistive technology. This can be useful when information or relationships between UI controls are only communicated visually. By being able to visually hide some content you are able to provide clarifying information to non-sighted users without adding redundancy to the visual design.

Examples#

Providing visually hidden headings to sectioned content#

All sectioning elements, such as Cards, should contain a heading to provide a clear document outline and form of navigation to assistive technology users. However, there may be times a heading is not required (or even redundant) in a particular UI for sighted users. By using the Screen Reader Only component you can provide a visually hidden heading to give additional context and heirarchy. In the example below, we've added "Flex" as a heading that is accessible to assistive technology, but hidden visually.

Flex

Deploy an omnichannel contact center within minutes and customize every element of the experience, including the agent desktop, channels, interaction routing, and reporting using common web frameworks like React.js and REST APIs.

View all projects

Providing clear actions while still reducing visual repetition#

Each column in a table is required to have a column header. Sometimes those column headers can be visually hidden from sighted users if desired. To do so use the Screen Reader Only component to hide the cell content for that column header.

Another common use case is for providing correct context to repetitive actions. In the example below, the "Buy" button is clearly visually associated with the phone number via row highlighting. However, to a screen reader user, this association may not be as clear. To provide additional clarification we can add what you would be buying (Buy ) as visually hidden text to the button. This way, we can keep the same level of context for all users.

NumberTypeMonthly FeeActions
+1 (903) 603-9469
Mabank, TX
local$1.00
+1 (470) 309-0026
Adairsville, GA
local$1.00
+1 (484) 662-4088
Hamburg, PA
local$1.00

When to use Screen Reader Only#

Use the Screen Reader Only component when you are required to provide additional or contextual information to a screen reader user which a sighted user maybe able to infer and when you cannot do so via semantic HTML.

Do

Use to provide additional text content to users of assistive technology

Don't

Don't use to hide interactive content


Usage Guide#

API#

Installation#

yarn add @twilio-paste/screen-reader-only - or - yarn add @twilio-paste/core

Usage#

import {ScreenReaderOnly} from '@twilio-paste/screen-reader-only';
const Component = () => (
<Button variant="secondary" size="small">
Buy <ScreenReaderOnly>+1 (484) 662-4088</ScreenReaderOnly>
</Button>
);

All the regular HTML attributes (role, aria-*, type, and so on) including the following custom props:

PropTypeDescriptionDefault
as?keyof JSX.IntrinsicElementsA custom HTML tagspan

Change Log

All notable changes to this project will be documented in this file. See Conventional Commits for commit guidelines.

1.1.9 (2020-05-01)

Note: Version bump only for package @twilio-paste/screen-reader-only

1.1.8 (2020-04-15)

Note: Version bump only for package @twilio-paste/screen-reader-only

1.1.7 (2020-03-24)

Note: Version bump only for package @twilio-paste/screen-reader-only

1.1.6 (2020-03-20)

Note: Version bump only for package @twilio-paste/screen-reader-only

1.1.5 (2020-03-17)

Note: Version bump only for package @twilio-paste/screen-reader-only

1.1.4 (2020-03-17)

Note: Version bump only for package @twilio-paste/screen-reader-only

1.1.3 (2020-02-26)

Bug Fixes#

  • package dependencies and deprecation warnings (#334) (0e88338)

1.1.2 (2020-02-14)

Bug Fixes#

  • screen-reader-only: add missing peer deps (1259bad)

1.1.1 (2020-02-11)

Note: Version bump only for package @twilio-paste/screen-reader-only

1.1.0 (2020-02-08)

Features#

  • website: create the screen-reader-only documentation page (#291) (a8bc513)

1.0.0 (2019-11-11)

Features#

  • icons: delete old icons, add new streamline icons (#129) (571791d)

0.3.0 (2019-10-29)

Features#

0.2.0 (2019-09-16)

Features#

  • website: add theme switcher and theme switching (#82) (a3b400d)

0.1.0 (2019-08-15)

Features#

  • ComponentHeader component, component overview fixes, more (#20) (875e124)
  • website: Add text color token accessibility rating to the token page (#28) (74f12d1)

Support

If you need support, please open a new issue in our GitHub repository. Please try to provide as much detail as possible in your issue.

Contributing

The Paste design system is open source and contributions are welcome. Check out the project on GitHub to learn more about contributing.

Copyright © 2020 Twilio, Inc.