Usage

Tabs organize content across different screens and views

People should be able to:

  • Undertake actions or invoke navigation to a new destination with assistive tech
  • Select an action or destination from an off screen tab with assistive tech
  • main-contenttain access of primary actions when the content is in a scrolled state

Icons inside buttons

Decorative images inside a button also containing visible text are never read to the screen reader.

For example, when a screenreader encounters a “Send message” button with a decorative paper airplane, the icon must be ignored.

Pitfalls

Do not rely on an image’s alternative accessibility text label to name an icon button. Directly encode the name into the button component itself. The icon should be ignored by the screen reader.

Material guidance

Related tabs entries