A11y

import { ... } from '@ag.ds-next/react/a11y';

VisuallyHidden

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

<TextLink href="#">
	Read more<VisuallyHidden> about how to visually hide content</VisuallyHidden>
</TextLink>

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

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

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 />
</TextLink>

Related components

• 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.