What is better practice use <a> or <a role="button"> for accessibility?

Question

I have a download link, and I can't find any good accessible solutions for how I should handle this situation.

I have a common rule of thumb I'm following: "Buttons Do Things, Links Go Places"

My scenario is that I have a button which triggers a document download (same page)

I believe that this should be an anchor with a role of a button because its explicitly not triggering a redirect or navigation:

<a role="button" href="download.docx" download>Download File</a>

However, its strongly recommended to not change the native semantics of an element.

My colleague suggests this would be the solution

<a href="download.docx" download>Download File</a>

However: the issue with this is that the Screen reader doesn't (in my opinion) give a clean enough output. It mentions this element is a link, which could be confused with a redirect.

The role="button" solution tells the screen reader to inform the user that this link is acting like a button which I think is more specific for our particular case of the "download button".

Any clarity would be greatly appreciated.

I'm referencing: https://css-tricks.com/building-good-download-button/

Answer 1

UPDATE

It seems that the title may hurt/confuse the screen readers, so according to W3C the best way to improve a11y is by making the anchor text relevant and descriptive

More info about this, you can find here also

---

Old solution (do not use)

You can always use title attribute (with a copy different than the text), something like:

<a href="download.docx" download title="Click here to download the file">Download File</a>

Here's a comparison

See more infohere

Answer 2

Short Answer

A hyperlink is correct and expected behaviour. As your link text contains the word "download" there will be no confusion, you do not need to do anything else.

However there are additional pieces of information for downloads that you should include if you are able such as document type and file size.

Oh and please do not use the title attribute .

Relying on the title attribute is currently discouraged as many user agents do not expose the attribute in an accessible manner as required by this specification (eg, requiring a pointing device such as a mouse to cause a tooltip to appear, which excludes keyboard-only users and touch-only users, such as anyone with a modern phone or tablet).

Source: HTML standard

Long Answer

Firstly, please do not add the title attribute to your download link, it is useless for screen readers on mobile, it is useless full stop on mobile for everyone else, keyboard users do not see it etc. etc.

Instead you should (with all links not just this particular link) provide extra information.

The additional file information that should be provided is:

• File Type ("Word Document" or "docx")
• File Size (in KB)
• Optional - How the link behaves (new window if applicable).

In the examples below I have assumed new window just for an example, as you are downloading a document you do not need to add this information as it is assumed all actions are performed in the same window and you only need to add this if you open a new window.

Quick aside: "Buttons Do Things, Links Go Places"

A hyperlink is correct semantically so don't worry about that.

A slight variation to your phrase (which I like and am stealing by the way!) should be "Buttons Do Things, Links point to URLs". Not quite as "pithy" but better for helping you make decisions. If you can type it into the URL bar then it is a hyperlink, guaranteed.

Now onto your options...

Full information in the "button"

Now if your design and site allows it is recommended to provide the additional file information to everybody not just screen reader users.

The following fiddle shows one way you could do this

 a{ display: block; height: 50px; width: 450px; font-size: 22px; padding: 10px; background-color: #333; border: 2px solid #666; border-radius: 4px; color: #fff; text-decoration: none; font-weight: bold; text-align: center; } a span{ font-size: 16px; font-weight: normal; color: #ccc; }

 <a href="document.docx" download>Download Document<br/><span>Microsoft Word (docx), 246KB (Opens in New Window)</span></a>

A more realistic way to do this

Now in the real world the odds of you being able (or allowed) to show all that information in the button is very slim, but it is still useful to screen reader users even if you can't provide it to everybody.

At this point your best option is "visually hidden text".

Yup, aria-label , aria-labelledby etc still don't have full support sadly and our aim is maximum usability.

So good old visually hidden text works all the way back to IE6, if your site works that far back it would be a miracle anyway (I know mine don't!)

The below example uses my visually hidden text class , as support is better than sr-only and other screen reader only classes and it is futureproofed for the next few years (as clip has been deprecated).

 .visually-hidden { border: 0; padding: 0; margin: 0; position: absolute !important; height: 1px; width: 1px; overflow: hidden; clip: rect(1px 1px 1px 1px); /* IE6, IE7 - a 0 height clip, off to the bottom right of the visible 1px box */ clip: rect(1px, 1px, 1px, 1px); /*maybe deprecated but we need to support legacy browsers */ clip-path: inset(50%); /*modern browsers, clip-path works inwards from each corner*/ white-space: nowrap; /* added line to stop words getting smushed together (as they go onto seperate lines and some screen readers do not understand line feeds as a space */ } a{ display: block; height: 28px; width: 450px; font-size: 22px; padding: 10px; background-color: #333; border: 2px solid #666; border-radius: 4px; color: #fff; text-decoration: none; font-weight: bold; text-align: center; }

 <a href="document.docx" download>Download Document<span class="visually-hidden">Microsoft Word (docx), 246KB (Opens in New Window)</span></a>

aria-describedby - A hybrid approach

If you can't use the first option then we could fall back to a hybrid approach.

We make the button nice and prominent, but underneath add the file size info etc.

For this we use aria-describedby which points to the ID of the paragraph below.

THe only down side is a few browser / screen reader combinations may not support it but hey, life is about compromise and the below is clean and you are more likely to be able to implement it than all the information in the button itself.

 a{ display: block; height: 28px; width: 450px; font-size: 22px; padding: 10px; background-color: #333; border: 2px solid #666; border-radius: 4px; color: #fff; text-decoration: none; font-weight: bold; text-align: center; } p{ margin-top: 10px; font-size: 16px; font-weight: normal; color: #444; }

 <a href="document.docx" download aria-describedby="doc-info">Download Document</a> <p id="doc-info">Microsoft Word (docx), 246KB (Opens in New Window)</p>

What should my link text be?

Your current link text may just be an example, but it should be descriptive.

If the document is about cheese strengths it should be "Download Cheese Strength Report".

If the title is complex then yet again use visually hidden text to give a more descriptive name to your link. This is because screen reader users do not always navigate in a linear fashion. They may decide to loop through all the links on a page, or headings, or sections etc.

For this reason if you had 3 documents on a page and their text was "Download Document" this would be completely useless to a screen reader user.

All links on a page should make sense without any surrounding information to support them.