Accessibility - document download could be improved

Jul 11, 2023

When interacting with the document download component using JAWS screen reader, each of the individual elements of the component are read separately using a screen reader, for example, in my example I have uploaded a PDF named "JAWS Keystrokes.pdf". When I navigate the component, I hear the following:

  1. Link graphic, PDF file (This is the PDF icon)
  2. Link JAWS Keystrokes dot PDF (This is the PDF document name)
  3. 220.1 KB (This is the PDF file size)
  4. Link graphic download (This is a small download icon)

This seems like a lot of separate pieces of information to navigate through for a single item. I think this could be a much better experience if the information was on a single label (aria-label) and there was only one element to navigate into.

For example:

  1. JAWS Keystrokes.pdf (PDF, 220.1kb)

This would be my recommended approach which would cut down on the keyboard navigation required for a single document link:

<a aria-label="JAWS Keystrokes.pdf (PDF, 220.1KB)" download="JAWS Keystrokes.pdf" href="JAWS%2520Keystrokes.pdf" rel="noopener noreferrer" target="_blank">
<div>
<div><svg aria-hidden="true" role="presentation" focusable="false"> </svg></div>
<div>
<div>
<div aria-hidden="true">JAWS Keystrokes.pdf</div>
</div>
<div aria-hidden="true">220.1 KB</div>
</div>
</div>
<div aria-hidden="true"><svg aria-hidden="true" role="presentation" focusable="false">
<title>Download</title>
<desc>Arrow down with horizontal line beneath it</desc>
</svg></div>
</a>
4 Replies
Marvie Mulder

Hey Sam!

Thanks for your feedback! I agree we can streamline the screen reader experience of the attachment block. The initial intention was to ensure that all visible elements that are meaningful are announced, to give an equitable experience for users who have visual disabilities. But it doesn't have to be piece by piece. Tying these information together will indeed optimize the experience overall! I'll get a ticket going.

Best regards,
Marvie