I'm curious how to make an accessible button for screen readers which downloads PDF.

I know that there is an option using href and pass there an URL to the pdf file, and even a download attribute inside an anchor to open a download window.

But it's not a good way for a screen reader. The screen reader reads it as a link but actually, this is not a link because it triggers downloading a pdf file rather than redirect to another page. So this can be confusing for people with vision disorders who rely on their screen readers.

Is it a good accessibility way to create such a button? Or relying on <a href='path-to-pdf'>...</a> is completely enough and not confusing for people with disabilities ?

CodePudding user response：

General answer and basics of file download

Both a link and a button are perfectly fine, it doesn't make much difference.

IN any case, it's very important to explicitly indicate that the link or button is going to download a file rather than open a page, to avoid surprise.

The simplest and most reliable is just to write it textually, i.e. "View the report (PDF)". You may also put a PDF icon next to the link to indicate it, but make sure to use a real image, i.e. <img alt="PDF" /> and not CSS stuff, since the later may not be rendered to screen readers and/or don't give you the opportunity to set alt text (which is very important).

A good practice is also to indicate the file size if its size is big (more than a few megabytes), so that users having a slow or limited connection won't get stuck or burn their mobile data subscription needlessly.

It's also good to indicate the number of pages if it's more than just a few, so that people can have an idea on how big it is, and if they really can take the required time to read it. Example: "View the report (PDF, 44 pages, 17 MB)"

Note that similarly, that's a good practice to indicate the duration of a podcast or video beforehand.

Additional considerations with PDF

First of all, you should make sure that your PDF is really accessible. Most aren't by default, sadly. You should easily find resources on how to proceed to make a PDF accessible if you don't know.

Secondly, for an accessible PDF files to be effectively read accessibly, it has to be opened inside a real PDF reading program which supports tagged PDFs, like Adobe Reader.

The problem is that nowadays, most browsers have an integrated PDF viewer. These viewers usually don't support tagged PDFs, and so, even if you make an accessible PDF, it won't be accessible to the user if it is open inside that integrated browser viewer.

So you must make sure that your link or button triggers an effective download or opening in a true PDF reading program, rather than opening in an integrated viewer of the browser. Several possibilities that may or may not work depending on OS/browser to bypass the integrated viewer. They have to be tested to make sure they work:

• Send a header Content-Disposition: attachment; filename="something.pdf"
• Send a Content-Type different than "application/pdf" or "text/pdf", e.g. "application/octet-stream" to fake out basic type detection
• Make the link don't ends with .pdf
• Use the download attribute of <a>

The most reliable are response headers. Most browsers don't rely only on file extension alone to decide what to do.