Why care about accessibility?

  • Too much bright light—using a mobile device on a beach or in the sun
  • Very low display brightness in dark environments
  • Not perfectly calibrated glasses or just tired eyes
  • Non-quality displays in foreign countries
  • Non-stable environment, like a bus or subway where you’re balancing in a crowd and need to find information quick

Quick overview of accessibility guidelines

What we offer and what you can do

React ComponentWhat Orbit offersWhat you need to do
BadgeScreen reader supportFill ariaLabel if there is a need for more information than you can fit in content
ButtonScreen reader/keyboard navigation supportRead about Button’s multiple accessibility properties
ButtonLinkScreen reader/keyboard navigation supportRead about ButtonLink’s multiple accessibility properties
CardScreen reader/keyboard navigation supportUse the dataA11ySection property when needed
HeadingScreen reader supportUse the dataA11ySection property when needed
NotificationBadgeScreen reader supportFill ariaLabel if there is a need for more information than you can fit in content

Screen readers (assistive technologies)

dataA11ySection property


Ensure proper color contrast

  • Minimum requirement: Level A according to WCAG The contrast ratio between the background and foreground should be at least 3:1 as this ratio is recommended for users with any vision.
  • Recommended requirement: Level AA according to WCAG We should have a contrast ratio of at least 4.5:1 between the background and foreground. There is an exception for larger text over 24px (or 18px bold): the contrast ratio in such cases should be at least 3:1. This color contrast ratio should be used for any color used to show important information (icon and text).

Convey information with more than just color


Font size

Line spacing

Line length


Bi-directionality (RTL)


Media queries

Target sizes

Things to keep in mind while developing

  • Make sure your HTML uses proper semantics and is well-structured so the application is understandable and usable with CSS disabled (or when read by screen readers).
  • Any text in ALL CAPS should be typed in its proper casing and capitalization should be achieved using CSS.
  • All non-text content (photo, icons, illustrations, and so on) need to have alternative text.
  • All major functionality should be accessible by keyboard.

Hooked on accessibility?