Assist 1.0

Changelog

Functions for working with assistive technologies.

Speak

A function that causes a screen reader to read a message.

assist.speak('4 Results');

Read the message

For testing, you can try the free screen reader NVDA.

This component requires a u-visuallyhidden class that hides an element while leaving it accessible to screen readers. For example:

.u-visuallyhidden {
	position: absolute;
	clip: rect(0 0 0 0);
	overflow: hidden;
	width: 1px;
	height: 1px;
	padding: 0;
	border: 0;
	margin: -1px;
}

The message is read via the aria-live="assertive" attribute, which means it will interrupt anything currently being read by a screen reader.

If a special message should be read when an element receives focus, consider using the aria-label or aria-labelledby attribute instead.