# Link

A Link visually represents clickable text or elements that navigate users to other pages, sections, or resources. It appears colored to indicate interactivity and follows accessibility and design standards for clarity and usability.

Used for navigation to a different page, an external URL, or to trigger a secondary action within a sentence. Not to be used for primary form submissions.

import Anatomy from "../../../../../components/Anatomy.astro";
import VariantMatrix from "../../../../../components/VariantMatrix.astro";
import MotionPattern from "../../../../../components/MotionPattern.astro";
import AccessibilityRefs from "../../../../../components/AccessibilityRefs.astro";
import PageMetadata from "../../../../../components/PageMetadata.astro";
import StubFooter from "../../../../../components/StubFooter.astro";
import DoDont from "../../../../../components/DoDont.astro";
import Callout from "../../../../../components/Callout.astro";
import TermList from "../../../../../components/TermList.astro";
import ComponentTabs from "../../../../../components/ComponentTabs.astro";
import ConfidenceChip from "../../../../../components/ConfidenceChip.astro";
import MediaAsset from "../../../../../components/MediaAsset.astro";

<PageMetadata
  slug="components.link.accessibility"
  source="components/dist/registries/dskit.json#link"
  schema={1}
  updated="2026-05-14"
/>

<ComponentTabs component={"link"} activeTab={"accessibility"} />

## Accessibility

<AccessibilityRefs resolvedRefs={[{"ref":{"ref":"keyboard-focus","note":"must be operable with Enter and Space (button) or Enter (link)"},"section":{"slug":"keyboard-focus","title":"Keyboard & Focus","wcag":[],"body_excerpt":"- All interactive elements are keyboard accessible - No keyboard traps - Logical focus order - Use Tab for forward and Shift+Tab for backward - Only focusable items that are visually visible should be"}},{"ref":{"ref":"color-contrast"},"section":{"slug":"color-contrast","title":"Color & Contrast","wcag":[],"body_excerpt":"Check Ratio -------------- Body text (< 18pt) 4.5:1 minimum Large text (≥ 18pt or 14pt bold) 3:1 minimum UI components, icons, focus indicators 3:1 minimum Rules: - Use accessible color palettes and t"}},{"ref":{"ref":"interactions"},"section":{"slug":"interactions","title":"Interactions","wcag":[],"body_excerpt":"- Dragging interactions should also provide single-pointer or keyboard alternative. A single-pointer alternative means the action can be done with simple clicks or taps (no holding, no dragging). - Av"}},{"ref":{"ref":"feedback-errors","note":"loading + disabled states must be announced; do not rely on color alone"},"section":{"slug":"feedback-errors","title":"Feedback & Errors","wcag":[],"body_excerpt":"- Explain what happened and how to fix it - Error messages appear near the field they relate to - Use aria-live=\"polite\" for non-critical status updates - Use aria-live=\"assertive\" only for critical,"}},{"ref":{"ref":"aria-guidance"},"section":{"slug":"aria-guidance","title":"ARIA Guidance","wcag":[],"body_excerpt":"- Visible Labels: Every interactive element has a visible text label. - Label Persistence: Labels remain visible when the field is focused or filled (no placeholder-only labels). - The 1:1 Rule: The a"}}]} />

## Cross-cutting accessibility

See the full <a href={`${import.meta.env.BASE_URL.replace(/\/?$/, '/')}accessibility`}>WCAG 2.2 AA guidance</a> for criteria that apply to every component.