HTML5 Download Attribute

HTML5 download attribute is new in HTML5 specifications. This attribute allows content authors to allow users to download the file just by clicking the link. HTML5 download attribute is used in <A> and <area> elements.

 

Using HTML5 download attribute

Many websites allow the users to download an image, a PDF file or a MP3 file. Different browsers allow users to download the file differently or different users may be comfortable with different techniques such as right click and say “save as” the file. This HTML5 download attribute allows the users to directly download the file by clicking or pressing enter on the link instead of navigating to it.

Along with the “href” attribute use the “download” attribute s mentioned in the examples below. Content authors even can specify a different file name for the downloading file. If the file name is not specified along with the download attribute the file will be downloaded with the original file name. Also in the download attribute along with the file name the format is not required to be specified. The format of the original file will be appended to the downloading file automatically.

 

Values of HTML5 download attribute

The value of the download attribute is the download file. There are no restrictions on the value. If the extension is not specified, the browsers will take the extension from the original file. Similarly if the value of the download attribute is omitted the original file name will be taken by the browser.

 

Screen reader support for HTML5 download attribute

HTML5 download attribute does not provide any additional hint to a screen reader users as of this date. I have tested with NVDA 2018.2 and JAWS 2018 the latest popular and most update screen readers as of this writing. I wish to have an additional hint directly from the attribute that speaks out to the user to hint “the link will download a file instead of navigating to a different page”. Until the screen reader  provide an additional support to the download attribute, content authors must provide the additional hint when this attribute is used.

Example with PDF

The example below downloads a PDF file with WCAG Level A and Level AA checklist

<br /> <a href="/wp-content/uploads/2017/09/WCAG-20-checklist.pdf" download="Level-A-and-AA-standards">WCAG Checklist</a><br />
WCAG Checklist

Example with image

<br /> <a href="/wp-content/uploads/2017/07/Seeing-AI-menu.png" download="IOSappmenu">download here</a><br />

download here

Comments are closed.