508-defect-4 [COGNITION]: Consider making the "back to top" label text visible in mobile, not sticky, and a link

[joshkimux]

508-defect-4

Feedback framework

• ❗️ Must for if the feedback must be applied
• ⚠️ Should if the feedback is best practice
• ✔️ Consider for suggestions/enhancements

Definition of done

1. Review and acknowledge feedback.
2. Fix and/or document decisions made.
3. Accessibility specialist will close ticket after reviewing documented decisions / validating fix.

Point of Contact

VFS Point of Contact: Josh

Details

Not all Veterans may not understand what the up arrow means on its own. Also, having a text label would make for a larger touch target which would help users with hand tremors, in public transit, or have difficulty with fine motor movement.

Usually, not having a visible text label would warrant a higher defect level. However in this particular instance:

• back to top is more of an enhancement
• keyboard users can use home, shift+ space, or tab to the navigation
• voice input users usually have commands that allow them to return to the top of the page (e.g. dragon naturally speaking allows for go to top)

Sticky elements

Making the visible target larger by having a visible label increases the risk of hiding content on mobile due to its sticky behavior. When paired with other sticky elements on a small mobile screen, it can create unnecessary clutter.

Button or link?

Skip to content, back to top, and on this page links perform similar functions:

• jump to a section on the page
• set focus to an element

Because these functions are navigational, using a link instead of a button is more materially honest.

My best guess as to why back to top became a button instead of a link is due to its stickiness as links look awkward when they hover on top of a page (they need a background color to set them apart from the content below them, which makes them look like buttons).

Recommendation

It may be worth exploring if the back to top button could be written and styled as a link that isn't sticky and flows with content. Some benefits include:

• remove the need to adjust pagination styles
• reduce the styling needed for the back to top functionality
• mitigate the risks associated with stickiness for accessibility
• create consistency with other navigation methods
• more materially honest

For example:

Before

After

Acceptance Criteria

• "back to top" label isn't visibly hidden on mobile
• "back to top" button is not sticky