Direction links


Direction links are accompanied by arrows to help users move quickly to other parts of the page or through a process.


View changes
npm i
  • Simon Pascal Klein avatar picture
  • Hannah J. Nicdao avatar picture
  • Dominik Wilkowski avatar picture
  • Gary Broadbent avatar picture
  • Alex Page avatar picture
  • Patrick De Young avatar picture
  • Julian Fleetwood avatar picture
  • Kiri Hoy avatar picture
  • Petra Gulicher avatar picture
  • Trevor Brennan avatar picture
  • Alexander Sadleir avatar picture

Arrows icons

Arrow icons are used for direction links, rather than chevrons or triangles, to better articulate their purpose and separate the direction links from other elements which use chevron icons such as accordions or call to action links.

Arrows as a visual cue

Previous versions of the direction links component added the arrow icon as content using the css :after selector to the anchor/button tag. In this example, a screen reader would read:

"[Link] skip to footer down arrow".

The arrow icon is a visual cue and not necessary information for a screen reader user.

Because of this, the arrow icon is now added by css inside a <span> attribute with an aria-hidden attribute set to true. This prevents the arrow icon from being read by a screen reader.