Design

Research and rationale

Arrow icon

This component comes directly from the DTA which states that arrow icons are used for direction links, rather than chevrons or triangles because they better articulate their purpose and separate the direction links from other elements that use chevron icons such as accordions or call to action links (Digital Transformation Agency, 2018).

One of the most popular direction cues comes directly from the physical world. Perhaps, there is no more obvious and universal way to show the direction than with an arrow.

Applying arrows as pseudo elements

If someone used a screen reader (a tool that speaks out what's on the screen for those who can't see well), it would announce something like, "[Link] skip to footer down arrow".

The arrow is more of a visual hint for those who can see it, and not something crucial for a screen reader to announce (Digital Transformation Agency, 2018).

So, we've updated how we insert the arrow, to separate the arrow (a supporting element) from the core content of the link, we've also started using a CSS ::before pseudo-element.

The benefit is that screen readers typically skip content in these pseudo-elements, focusing only on the important text. This method ensures that screen readers concentrate on the text which carries the primary action or information, rather than the visual hint (the arrow).