Digital Design System

Downloads

While it’s preferred that content be on the web page itself (for user experience, accessibility, usability, and search), occasionally content (in the form of brochures, stylized design pieces, etc) may need to be featured on a page.

The Download component uses a table format to allow for clear display of data. The arrow indicates a download and is a good visual indicator (for sighted users). The link uses our standard paragraph link format.

There’s always the possibility that we need to provide the ability for content to be downloaded. This can be in any file format, so our download component provides relevant data in the form of the name of the content, the file type, and the file size. This information is key for accessibility and usability and should never be removed.

The preferred design for the download module:

Downloads example

This is the current HTMl used on wtwco.com. The module is being refactored to match the design documented in the design section above.

<div class="download-content mb-5">
    <h5>Downloadable content title here (e.g. Download) </h5>
    <div class="table-responsive">
        <table class="table">
            <!--Table head-->
            <thead>
                <tr>
                    <th>Title</th>
                    <th nowrap="">File Type</th>
                    <th nowrap="">File Size</th>
                </tr>
            </thead>
            <!--Table head-->
            <!--Table body-->
            <tbody>
                <tr>
                    <th class="" data-title="Title">
                        <span class="download-icon"></span>
                        <span class="download-file">
                            <a href="url-of-document" aria-label="Link, download, click to download STAR RW: Real-world economic modelling, Size 2.8 megabytes. File type PDF" target="_blank" data-eventaction="Downloaded File" data-eventcategory="Page Interaction - Downloaded File" data-eventlabel="Title: STAR RW: Real-world economic modelling" download="">
                                Name of document to download
                            </a>
                        </span>
                    </th>
                    <td data-title="File Type">PDF</td>
                    <td data-title="File Size">8mb</td>
                </tr>
                <tr>
                    <th class="" data-title="Title">
                        <span class="download-icon"></span>
                        <span class="download-file">
                            <a href="url-of-document" aria-label="Link, download, click to download STAR RW: Real-world economic modelling, Size 2.8 megabytes. File type PDF" target="_blank" data-eventaction="Downloaded File" data-eventcategory="Page Interaction - Downloaded File" data-eventlabel="Title: STAR RW: Real-world economic modelling" download="">
                                Name of document to download
                            </a>
                        </span>
                    </th>
                    <td data-title="File Type">PDF</td>
                    <td data-title="File Size">8mb</td>
                </tr>
            </tbody>
            <!--Table body-->
        </table>
    </div>
</div>

While PDFs are one method of communicating content and providing something for the user to “take with them,” keep in mind that PDFs do not contribute to SEO and have accessibility concerns. It is best to represent as much content as possible on the web page.

Do not use multiple terms when referring to downloads on a page. For example, do not have two download modules following each other using different terminology to describe the same action.

img alt text

Adding content to a page via a download does not remove accessibility requirements. All content added to a web page should be accessible, so, for example, PDFs are also required to be compliant per WCAG 2.1 Level AA requirements.

Links within the download component need to be accessible. You may want to use this when placing the download component within the body text (vs. at the end of the page or separate from content).

The download module should go in the main column of pages (e.g. not in the right column) due to the accessibility requirements around our download module.

Analytics Code

If using this code on wtwco.com in a rich text editor instead of using the Sitecore component, the data attributes within the <a> tag are crucial for analytics tracking and must be correctly available in each <a> and that the data is filled in properly:

Attribute Action
href="url-of-document" change the href to the URL in the media library
aria-label="Link, download, click to download STAR RW: Real-world economic modelling, Size 2.8 megabytes, File type PDF" leave the term “link, download, and click to download” and replace the highlighted items with the proper information (title, size, and file type)
data-eventaction="Downloaded File" leave as-is
data-eventcategory="Page Interaction - Downloaded File" leave as-is
data-eventlabel="Title: STAR RW: Real-world economic modelling" replace highlighted text with the exact title name of the document
download="" leave as-is