Providing an empty state is good practice as it informs people that nothing is present when something could be. They allow actions to be provided so that people can continue their tasks and understand that something might be missing.

The empty state component’s text elements provide a way of clearly indicating what the problem is, why it happened, and what action is best to perform next.

Interactive elements within the empty state follow a logical tabbing order.

Empty state components should be announced by a screen reader if they appear due to another user action on a page. They may constitute a status change on the page so should be announced by a screen region after the change has occurred.

We’ve tested this component against WCAG 2.2 Level AA. It’s been tested with NVDA and VoiceOver, and several different users with different interaction methods.