search

ONSdigital / design-system

ONS Design System
https://service-manual.ons.gov.uk/design-system
MIT License
31 stars 21 forks source link

PDF documents should open in a new tab (with warning) (DAC usability) #2252

Closed jrbarnes9 closed 2 years ago

jrbarnes9 commented 2 years ago

Page 82-83 of June 2022 DAC DS report...

Same Page PDF (Usability)

PDF documents open in the same tab. This causes complications for Dragon voice activation users.

Reference: Usability & GOV.UK Design System requirement

Issue ID: DAC_Usability_04

URL: https://ons-design-system.netlify.app/patterns/download-resources/examples/download-resources/ Page title: Service name Journey: Journey 2, Step 2, b

PDF links open in the same tab. This causes Dragon voice activation users difficulties navigating to the previous page. Dragon voice activations cannot speak the command ‘Go back’ or use the keyboard shortcut ‘ALT+Left arrow’ to return to the previous page. Dragon voice activation users need to resort to mouse navigation commands, and this is difficult to some.

Current code ref(s):

adv-filter-gallery > li:nth-child(1) > div.ons-document-listitem-content > div.ons-document-listitem-header > h2 > a

<a href="/patternlib-img/download-resources/documents/Print-Ready-A4GIP1-2021-v1-0-120620.pdf">Census 2021 matters to everyone <span class="ons-u-vh">, PDF document download, 866KB, 1 page </span> </a>

Voice activation comments:

“The PDFs on this page open in the same browser window. This breaks the back button meaning that I become stuck in the document.”

Screen reader comments:

“When testing the ‘Census 2021 matters to everyone pdf, I noticed that the document opens in the same window as the previous page. I will find it helpful if the document opens in a new window as this would help me to return to the previous page more quickly.”

Solution:

We advise that PDF links open a new tab/ window. Opening a new tab/ window greatly helps Dragon voice activation users navigate the page. This can be achieved with the target and a value of _blank

For example:

<a href="/patternlib-img/download-resources/documents/Print-Ready-A4GIP1-2021-v1-0-120620.pdf" target="_blank">Census 2021 matters to everyone <span class="ons-u-vh">, PDF document download, 866KB, 1 page </span> <span class="govuk-visually-hidden"> &nbsp; (Opens new tab)</span> </a>

Additionally, add visually hidden text that tells screen reader users that the link will open a new tab/ window.

jrbarnes9 commented 2 years ago

On hold: I'm not sure we should follow this suggestion because it goes against the best practice of keeping the user in the same tab so the back key can always be used. Need to discuss with DAC to confirm what exactly is happening for a Dragon user, because in theory the browser back button should work.

yatesn commented 2 years ago

Response from ML (DAC) - 'The browser back button usually becomes unavailable if a PDF link opens in the same window. The user is unable to go to the previous page. It may have changed recently, and this is something we can look at when the retest happens. Briefly looking, the back button does not seem to be unavailable anymore if clicking a PDF link'

jrbarnes9 commented 2 years ago

I've asked ML (DAC) if he can retest again as he originally only retested the A and AA issues.

jrbarnes9 commented 2 years ago

ML from DAC happy to resolve this issue due to:

"Telling Dragon voice activation software to press the alt key and left arrow will move the user to the previous page"