Agriculture Design System
Design System for the Export Service


Utilities for improving accessibility.

View in StorybookView in Github
import { ... } from '@ag.ds-next/react/a11y';


Use the VisuallyHidden component to hide an element visually without hiding it from screen readers.

Open in Playroom, opens in a new tab
<TextLink href="#">
	Read more<VisuallyHidden> about how to visually hide content</VisuallyHidden>

Alternatively you can use the visuallyHiddenStyles style object directly.

import { visuallyHiddenStyles } from '@ag.ds-next/a11y';
function Example() {
return (
<span css={visuallyHiddenStyles}>This element is visually hidden</span>


ExternalLinkCallout announces to a screen reader user that a link will open in a new tab.

Please use the TextLinkExternal component from @ag.ds-next/text instead.

As a rule, links that open in a new tab should indicate this visually with an icon. This is why we recommend using the TextLinkExternal component instead.

// A screen reader will read this out load as:
// 'link, "Visit the Design System, opens in a new tab"'
<TextLink href="#" target="_blank">
Visit the Design System
<ExternalLinkCallout />
  • Skip link Skip links are internal page links that aid navigation around a page. They are accessible by screen reader and keyboard users, and help users quickly jump to and over content on the page.