search

alphagov / govuk-design-system

One place for service teams to find styles, components and patterns for designing government services.
https://www.gov.uk/design-system
MIT License
488 stars 230 forks source link

Back to top link difficult to use with keyboard only and screen reader #899

Closed NickColley closed 4 years ago

NickColley commented 5 years ago

This issue is from a May 2019 external accessibility audit report.

WCAG Reference: 2.4.1 Bypass Blocks (Level A) Issue ID: DAC_Issue6 URL: https://design-system.service.gov.uk/community/design-system-working-group Page: Design system working group

Screen Shot

There was a ‘back to top’ skip link that was added to the page when a user moved past a certain point of the page. This was confusing to screen reader users as they were not aware that this had occurred. The link was also not situated at the bottom of the page where ‘back to top’ links usually appear.

Current Code Ref(s)

<div class="app-back-to-top" data-module="app-back-to-top"> <a class="govuk-link govuk-link--no-visited-state" href="#top"> <svg class="app-back-to-top__icon" xmlns="http://www.w3.org/2000/svg" width="13" height="17" viewBox="0 0 13 17"> <path fill="currentColor" d="M6.5 0L0 6.5 1.4 8l4-4v12.7h2V4l4.3 4L13 6.4z"></path> </svg>Back to top </a> </div>

Screen reader comments

“I navigated through the page using the arrow and ‘Tab’ keys. I was initially unable to locate the ‘Back to top’ link. A member of the support team advised me that when I navigated into the main content of the page the link appeared above me, but I was not aware of this. I further found with NVDA, when I selected the link my focus did not move to the top of the page, meaning that I needed to move to the top manually. I would find it helpful if the link could be placed at the base of the page and could remain on the page permanently. It would also assist me if once selected, the focus could move to the top of the page as expected. This issue did not occur using JAWS and the link was not present for VoiceOver for iPhone of Mac.”

Keyboard only comments

“I was confused why the skip link called ‘Back to top’ was not situated at the foot of the page rather than at the bottom of the navigation links on the left of the page.”

Solution

Consider placing the ‘back to top’ links at the base of the page as this is where users would expect to locate them. It would also benefit users if this link was present at all times.

NickColley commented 5 years ago

We could make sure that you can tab to this link at all times like the skip to main content link at the top of the page.

I'm not entirely sure the position of the link was a barrier based on this feedback but we can consider moving it to the bottom of the page cc @dashouse

NickColley commented 4 years ago

We've re-opened this as it was raised again by the re-test audit, we want to explore if we can address the usability concerns.

hannalaakso commented 4 years ago

Yes it's not clear from the feedback if the positioning was an issue. As well as making the link tabbable at all times as per @nickcolley's suggestion, we could:

  1. Have the link at the bottom of the page (the traditional approach).
  2. Have the link fixed at the bottom of the screen so it follows as you scroll down.

We could also not hide the link until you've scrolled down the page but have it visible at all times.

We probably need to make a design decision on this before doing any work.

NickColley commented 4 years ago

Just to be clear, I've already made the link tabbable at all times.

I think we should also consider the difference between the visual position and the source order position. Is it more usable for this link to be after the main content when tabbing, or after the navigation when tabbing.

dashouse commented 4 years ago

Had a couple fo thoughts below, it's a tough one for me as it's not really back to top. It's more of a link to the nav.

Thought A:

Is it better to hide the link from screen readers all together?

The reason being is that this link is there to allow people to quickly get back to the navigation after we removed the independently scrollable columns (where the nav was always visible on screen).

If screen readers have access to all of the links in the navigation all the time, as the screenshot shows, there is no reason a user of this technology would need the "back to top" link at all as their primary need for it is already met.

Thought B:

I believe there was another DAC issue that suggested the left hand nav should be sticky (like the service manual). If we did this we also wouldn't need this link.

Thought C:

It would be good to know if how much it's used generally. I seem to remember this had more use than initially expected but don't remember the numbers.

NickColley commented 4 years ago

Is it better to hide the link from screen readers all together?

This would work if the people that use screen readers are all without vision, but many people that use screen readers can see the screen just have difficulty reading e.g. people with poor vision, neurodiverse people.

I believe there was another DAC issue that suggested the left hand nav should be sticky (like the service manual). If we did this we also wouldn't need this link.

Do we know what would happen for some of the larger navigations or on smaller screens, would it be sticky and scrolling? I think we'd introduce the old layout and the issues that came with it...

dashouse commented 4 years ago

I think the behaviour would be similar to I've seen somewhere on GOV.UK (can't find it now)...

Sticky when it hits the top fo the screen, becomes unstuck when the user scrolls beyond the point where the nav is greater than the height of the nav.

It was supposed to be helpful rather than cause any barriers, so might be better without it. It's not really a "back to top", if there even is a traditional position, it's more like "show me the nav". If we were going to implement a "back to top" for real it would be at the bottom of the content, not so much to do with the nav.

NickColley commented 4 years ago

I think we could resolve this by doing the following:

  1. On older browsers that do not support the 'sticky' behaviour, have the back to link at the bottom of the page - or hide it entirely.
  2. Move the link so it's after the main content in source order
  3. Investigate issues with focus being set with NVDA
  4. Investigate having the back to top link visually at the bottom of the screen

I think resolving 1. and 2. would solve the main issues with 3. and 4. making it even better.