Focus and screen readers

Focus ring

Every focusable element shows an outline when it gets keyboard focus, as WCAG 2.4.7 asks. Mouse clicks show no ring. Buttons, links and form controls draw the ring in their own color. Tab through the example to see it.

A main, section, article or heading with tabindex="-1", such as the target of a skip link, shows no ring. Widgets that move focus with tabindex="-1", such as menus, keep theirs. Every ring has at least 3:1 contrast with the page. The width is --i-focus-ring-width and the neutral color --i-color-focus.

Screen reader only

.sr-only hides content on screen but keeps it for screen readers. .sr-only-focusable does the same until it or something inside it gets focus, for links and controls that should appear for keyboard users.

Skip link

.skip-to-content is a link that shows only on keyboard focus, so keyboard users can jump past the navigation. Put it first in body. This site has one: press Tab right after the page loads.

<body>
  <a href="#content" class="skip-to-content">Skip to content</a>
  <header>...</header>
  <main id="content">...</main>
</body>

Touch and text direction

Links, buttons, form controls and summaries skip the double tap zoom delay on touch screens. dir="rtl" flips the layout, and icons such as the select chevron, the search magnifier, the validation icons and the breadcrumb divider move to the other side. A nested dir="ltr" flips them back.

Variables