Skip to main content

This is a new service - your feedback will help us to improve it.

File download


About

What does it do?

  • Allows users to download an offline version of the on-page content
  • Allows users who rely on assistive technology to access an offline version of the on-page content.
  • Shows users how big the file is so they can decide if they want to download it.



Accessible file

When to use it?

  • When you have an accessible, offline version of the on-page content.
  • When you have additional information within an accessible document.

When not to use it?

  • If the download document is not accessible to users with assistive technology. In that instance, use the non-accessible file component.

Component example

HTML Markup

<div class="wmcads-file-download">
    <svg class="wmcads-file-download__icon">
      <use xlink:href="#wmcads-general-icon-file" href="#wmcads-general-icon-file"></use>
    </svg>

    <div class="wmcads-file-download__desc">
        <a href="#" download="file_name.filetype" class="wmcads-link">
            Download 'file name' (filetype, filesize)
        </a>
        
    </div>
</div>



Non-accessible file

What does it do?

  • Shows the user that the file is not accessible
  • Offers the user a way to get the file in a different format

When to use it?

  • When you have an offline version of the on-page content which is not accessible
  • When the file cannot be made accessible. For example, complex maps.

When not to use it?

  • If the document is accessible to users with assistive technology. In that instance, use the accessible file component.
  • You still need to make the document accessible as soon as possible.¬†Ideally before publishing it.

Component example

Download 'file name' (filetype, filesize)

This file may not be suitable for users of assistive technology.
Request an accessible format.

HTML Markup

<div class="wmcads-file-download wmcads-file-download--non-accessible">
    <svg class="wmcads-file-download__icon">
      <use xlink:href="#wmcads-general-icon-file" href="#wmcads-general-icon-file"></use>
    </svg>

    <div class="wmcads-file-download__desc">
        <a href="#" download="file_name.filetype" class="wmcads-link">
            Download 'file name' (filetype, filesize)
        </a>
        <p class="wmcads-file-download__warning">
            This file may not be suitable for users of assistive technology. <br>
            <a href="#" class="wmcads-link">Request an accessible format.</a>
        </p>
    </div>
</div>