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  href="#top">
<span >
<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

CodePudding user response：

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.

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

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.

CodePudding user response：

You can also add the Title attribute in your anchor tag

<a  href="#top" title="go to top of page">