Accessibility improvement : "back to top" icon

[tfrancart]

Accessibility audits have reported that the "bask to top" button is too small and with improper "role" attribute:

<p role="navigation" id="back-to-top">
    <a href="#title"><abbr title="Back to Top">↑</abbr></a>
</p>

Excerpt from accessibility audit:

the “back to top” link is too small and hard to see. It is difficult to click with a mouse or tap with a finger on mobile phones and tablets.
The link's source code contains role="navigation", but this role should only be used for a group of navigation links that help users move around the website (like the main menu, footer, or breadcrumbs). Also, the link text is just an arrow inside an tag. Some screen readers ignore this tag, meaning they might only read "link, up arrow" or "link, empty".
How-to fix

• Increase the size and visibility: Make the button larger (at least 44x44 pixels for a good touch target) and improve its colour contrast.
• Clean up the code: Remove role="navigation" from the <p> tag.
• Add an accessible name: Use an aria-label on the link so screen readers know exactly what it does, and hide the visual arrow from assistive technologies using aria-hidden="true".

updated code example:

<p id="back-to-top"> 
      <a href="#title" aria-label="Back to top"> <span aria-hidden="true">↑</span> </a> 
</p>