Long HTML articles or pages with extensive content benefit from a "Back to Top" link to facilitate navigation. While sighted users may benefit from a fixed-position button, the question arises as to how this can be optimally designed from an accessibility (A11Y) standpoint. The following report discusses the placement and design of such a link, based on the Web Content Accessibility Guidelines (WCAG) and best design patterns.

Accessibility Challenges

Users with screen readers or assistive technologies often navigate web pages non-linearly, jumping over headings (using H keys), links (using K keys), or landmarks. A "Back to Top" or "Back to Navigation" button or link that is only visually placed at the bottom of the page may be inaccessible to them. Additionally, the tab order must not be interrupted, as this could lead to navigation issues.

Best Practices for Placement

  1. Integration into Navigation
    • The "Back to Top" link should be part of the main navigation, especially when a service navigation is used.
    • It can be placed within a `
    • Example implementation: 
      <nav aria-label="Main Navigation">
    <ul>
        <li><a href="#section1">Section 1</a></li>
        <li><a href="#section2">Section 2</a></li>
        <li><a href="#top" class="skip-to-top">Back to Top</a></li>
    </ul>
</nav>
  2. Providing a Hidden but Accessible "Back to Top" Link
    • A hidden but focus-visible link at the top of the page can be helpful for screen reader users:
      • .skip-to-top {
    position: absolute;
    top: 1rem;
    left: 1rem;
    background: #000;
    color: #fff;
    padding: 0.5rem 1rem;
    text-decoration: none;
    z-index: 1000;
}
.skip-to-top:not(:focus) {
    position: absolute;
    left: -999rem;
}
  3. Avoiding JavaScript for Scrolling
    • Modern browsers support `scroll-behavior: smooth;`, allowing for smooth scrolling without JavaScript:
      • html {
    scroll-behavior: smooth;
}

Conclusion

A "Back to Top" link should not only be visually present but also meaningfully integrated for assistive technologies. The combination of a position in the navigation, a hidden skip link, and CSS-based smooth scrolling ensures that all user groups benefit equally. These measures improve accessibility without compromising usability for sighted users.

Further Links