Screen Reader Support

Ink has basic support for screen readers.

To enable it, you can either pass the isScreenReaderEnabled option to the render function or set the INK_SCREEN_READER environment variable to true.

Ink implements a small subset of functionality from the ARIA specification.

render(<MyApp />, {isScreenReaderEnabled: true});

When screen reader support is enabled, Ink will try its best to generate a screen-reader-friendly output.

Example

For this code:

<Box aria-role="checkbox" aria-state={{checked: true}}>
	<Text>Accept terms and conditions</Text>
</Box>

Ink will generate the following output for screen readers:

(checked) checkbox: Accept terms and conditions

You can also provide a custom label for screen readers if you want to render something different for them.

For example, if you are building a progress bar, you can use aria-label to provide a more descriptive label for screen readers.

<Box>
	<Box width="50%" height={1} backgroundColor="green" />
	<Text aria-label="Progress: 50%">50%</Text>
</Box>

In the example above, the screen reader will read "Progress: 50%" instead of "50%".

ARIA Properties

aria-label

Type: string

A label for the element for screen readers.

aria-hidden

Type: boolean
Default: false

Hide the element from screen readers.

aria-role

Type: string

The role of the element.

Supported values:

button
checkbox
radio
radiogroup
list
listitem
menu
menuitem
progressbar
tab
tablist
timer
toolbar
table

aria-state

Type: object

The state of the element.