Invisible links on homepage are accessible via keyboard navigation (they shouldn't be)

[david-iterators]

Screengrab/videos (insert file names here) Keyboard, Home page, Invisible Link.mp4

Link https://d8-stg.boston.gov

Node # (if known) 21

Type of User: Anonymous

Environment (Device > OS > Browser) Computer > macOS > Chrome 83

Trusted Tester Test Keyboard

Brief Description Keyboard can reach invisible links

Steps to reproduce 1) 00:00, Click in the URL field and start pressing the tab key until the focus enters the main page 2) 00:08, Note that the focus is not visible and chrome displayed the #skip-link anchor in the bottom left corner. a) BUG: This link should not be accessible through the keyboard. b) Also visible at 00:20, 00:28, 00:33

Desired Result Invisible links are skipped using the keyboard

Actual Result An invisible link is reached using the keyboard Keyboard, Home page, Invisible Link.zip

[subaha-cob]

I had to redo a few things in drupal that was causing this. please test all elements and components carefully.

[subaha-cob]

Testing at: https://d8-uat.boston.gov/

[andrebtlima]

@subaha-cob still seeing this issue on UAT

[subaha-cob]

@andrebtlima So I have reduced this to just one invisible link. That is the one for skipping back to the main menu.

[subaha-cob]

@jill-iterators this is on the live site. So please test there unless I say otherwise. thanks.

[david-iterators]

This was retested on the live site and the skip-link is part of the tab order and shows up as an invisible link when navigating with the keyboard. The following provides an updated bug report. Note that the video is accessible through the link provided.

Screengrab/videos (insert file names here) https://www.loom.com/share/d201737a3fe6456a9bc5b9df23e5dd00

Link https://www.boston.gov

Type of User: Anonymous

Environment (Device > OS > Browser) Computer > MacOS 11.2.3 > Chrome 89

Trusted Tester Test Visible Focus

Brief Description The skip link is able to be tabbed to after the search button on the boston.gov site

Steps to reproduce 1) 00:00, Load the URL 2) 00:03, Start tabbing through the page 3) 00:11, Reach the Search button 4) 00:12, tab to the next element a) Bug: No visible focus is shown. The lower left hand corner of the page shows that the link tabbed to has a href of “https://boston.gov/#skip-link”

Desired Result • The skip link is not able to be tabbed to, and can only be accessed when the “Skip to Main Content” button is pressed

Actual Result • The skip link is able to be tabbed to

[subaha-cob]

@sebastianebarb We need a back to top button/icon for the website. We have a link for it currently, but it is hidden and the user can only navigate to it if using the tab button. I am not sure why it was implemented like that, but I need to fix it because it is part of my work fixing accessibility issues on the website. I can either remove it completely or add it properly, like an actual content that is visible for people to see. The content can be a text or image, it doesn't matter, but it needs to corrected.

[subaha-cob]

[subaha-cob]

@david-iterators I have updated UAT with changes for this ticket. Please test on UAT

[ollie-iterators]

This has been fixed