Visually hidden

Visually hide content while still allowing it to be exposed to assistive technologies (such as screen readers).

Use the VisuallyHidden component to incorporate important descriptive content not already provided in the UI visual layer to aid assistive technology users.

<Fragment>
  <p>
    <em>Note: The text found below this message is visually hidden, but will be announced by screen readers</em>
  </p>
  <VisuallyHidden>This is screen reader only text</VisuallyHidden>
</Fragment>

Accessibility features

The VisuallyHidden component uses a common cross-browser supported method to visually hide content using CSS.

Keyboard support

No keyboard interaction needed.

Skip link

A fixed position ‘Jump link’ banner that is visually hidden by default. The link becomes visible when focused (e.g. by a keyboard-only user).

Assistive technology users commonly use ‘Skip links’ to quickly navigate to important web page content, ‘jumping over’ irrelevant content; without having to cycle through all page content.

SkipLink requires a href (URL) value pointing to the id attribute value of a target element (anchor) on the current page.

<Fragment>
  <p>
    <em>
      Note: The link found below this message is visually hidden until focused, but will be announced by screen readers
    </em>
  </p>
  <SkipLink href="#content">This is screen reader only text (visible when focused)</SkipLink>
</Fragment>

Accessibility features

• The link is hidden using a method similar to the VisuallyHidden component, it is always visible to assistive technologies
• When the link receives focus it is no longer visually hidden
• The target element receives focus natively (without the use of JavaScript)
• The link is visible in WHCM (when focused)

Accessibility in the HTML

• <h2 id="{ID}" tabindex="-1">: It is recommended to link directly to a heading, its content will be announced when focused. The heading element must have a tabindex attribute as it’s not a ‘focusable element’, otherwise the element will not receive focus and the target content will not be announced by screen readers in some browsers. Generally use tabindex="-1" or tabindex="0" if you also require the target to be focusable during normal keyboard interaction.

Keyboard support

The link is displayed when it receives focus.