“返回顶部”链接可访问性

Question

I am working on a web page where user has to scroll a lot.

For ease of use, I have added the back-to-top link at the bottom of the page, so user can navigate to the top of the page.

Now I have a html markup like this:

<a class="btn-primary" href="#top">
<span class="btn-content link-content">
<svg focusable="false"><use xlink:href="#arrow-upward"></use></svg>
</span>
</a>

How can I make my link more accessible? I have thought of adding aria-label , but other than that nothing crosses my mind

Answer 1

First of all, render your component usable, for example by following NNg's Back-to-Top Button Design Guidelines . This is a solid basis. Thanks to @outis for the hint.

Here are some accessibility concerns that come to mind with regards to such a Back to top component.

Alternative text/accessible name

Every interactive element needs an accessible name. This text is not only what gets read by a screen reader when focussing the element, but also how voice control can identify the button, as in “Click on back to top”.

Accompanying text for sighted users

Adding a tooltip for sighted users via the title attribute is always a good idea as well, but you should never rely on that attribute to provide an accessible name, as implementation in screen readers is not good.

Even better would be having the text always visible for everyone. Not everyone gets icons correctly .

That way you also provide a very visible hint to voice command users. The visible part needs to be included in the accessible name (alt text) for this reason. You should add role="presentation" to the SVG if you have accessible text next to it.

This is an example from the GOV.UK Design System Guidelines , who care a great deal about accessibility. They add it just before the footer on long pages.

Contrast

Since you didn't share your CSS, we don't know what it does with colours. You need to make sure that the icon and text's contrast with the background are still 4.5:1 or above.

Avoid icon-fonts

You already got that right. (:

Since users with reading disorders often make their browser use a font they can read well, icon-fonts will break and remove icons that—ironically—would help them most.

Be careful with animated scroll

Often developers (or designers?) like to fly back to the top instead of the instant jump. This can help users orientate.

Nowadays we can simply specify this with scroll-behaviour: smooth and let the browser do the work.

However you implement this, you should be careful to not cause vertigo in people who are sensitive to these zoom animations. Only apply this if the user can and did not set prefers-reduced-motion

Focus

While it is important to include the button in the tab order, it should probably come right before the footer, even when it's visible all the time.

Focus needs to be visible, of course, as for all interactive elements.

Keyboard users can easily jump back to top by using their Home key, so it's less important to have the button in early in focus order or after each chapter or something.

When the button disappears when arriving on top, focus needs to be put somewhere else, it must not be “lost” (going to body or html).

Refer to the WCAG

I might have missed some criteria in this answer.

If you want to be sure, you can open up the WCAG-EM Report Tool and start creating a report for your component.

All criteria of the Web Content Accessibility Criteria will need to be audited by you. This is the industry standard for accessible web applications, and legally binding in a lot of states.

Answer 2

You can also add the Title attribute in your anchor tag

<a class="btn-primary" href="#top" title="go to top of page">

Answer 3

When working on the in-page navigation links, we should not forget the screen reader users, so we must ensure they know the purpose of the link. A common way is an aria-label attribute specifying a meaningful value, such as 'Go to top' or 'Back to top'. Once the aria-label is specified, the content of the link should be hidden from the screen reader (Exceptions exist) ie: via aria-hidden='true'.

Another detail that should not be forgotten is the focus handling. By default, most of the browsers just scroll the page when using an #Element's_ID for the href if the id does not exist, and SR/Keyboard users will be affected in such a way that after the page is scrolled to top and Tab key is pressed the focus will move to the next focusable element before the page was scrolled up, so, the result will be, an undesired page scroll down.

There is a working implementation in W3C patterns page https://www.w3.org/WAI/ARIA/apg/patterns/ .

Hope this helps in your accessibility journey. The a11y world needs lot of people interested on it.

    <body id="top">
    ...
      <a class="btn-primary" aria-label="Back to top" href="#top">...
      </a>
...
    </body>