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.