Show file type and size for links to non-HTML content.

[JessicaMarine1]

To comply with USWDS guidance, we need to: Show file type and size for links to non-HTML content.

When possible, create HTML pages instead of linking to files like PDFs. If you do link to a file, tell users ahead of time if the link may trigger a file download, and show the size and format of that file.

We recommend including this information at the end of the link, in the format [FILE_TYPE, SIZE]. We recommend using the file type rather than a product name. Use uppercase for the file type and a comma for the separator. For file size, use the number of pages in the document or the size in MB or KB if the document is not paginated.

Example 1:

GSA published a report, Transforming the American Digital Experience [PDF, 18 pages]

Example 2:

Download the Revised 508 Standards Applicability Checklist [DOCX, 2 pages]

Example 3:

Download the USWDS 2.11.2 Design Kit for Sketch [ZIP, 13.3 MB]

[weiwang-gsa]

which way we are using, total pages or file size?

[JessicaMarine1]

I would say page count if we have one.

For file size, use the number of pages in the document or the size in MB or KB if the document is not paginated.

[mark-meyer]

Wei and I chatted a bit about automating this today. I was able to write an Astro component that does this automatically for local PDFs (those we are hosting) when we build the site. This might be preferable to manually entering the size when the content is added.

However, there are places on the site where we link to external PDFs like OMB Memoranda, this will be problematic to automate because we would need to download these files every time we build a version of the site. In those cases it probably makes more sense to do this manually. This makes me think it might be easier to do them all manually so it's not confusing, but this will be some up-front work to go through all the doc.

[weiwang-gsa]

@JessicaMarine1 just double check if the update also include the link button? e.g. change "View Full Audit" to "View Full Audit [PDF, 22 pages]"?

[JessicaMarine1]

@weiwang-gsa I don't know. USWDS provided guidance for links; I'm not sure if the same applies to buttons.

Adding our designers @actuallyjenn @klohman to see if they know what USWDS would recommend here.

[klohman]

@weiwang-gsa I don't know. USWDS provided guidance for links; I'm not sure if the same applies to buttons.

Adding our designers @actuallyjenn @klohman to see if they know what USWDS would recommend here.

There isn't the same guidance for buttons, but we'll run into the same screen-reader issue with the button as with the link (i.e., not realizing it has opened a PDF viewer).

I'm thinking we use a link here instead of a button - and use text "View full audit [PDF, 22 pages]"?

[weiwang-gsa]

@JessicaMarine1 @klohman another question, for all business line under publications, is type column still needed if we add [PDF, x pages] in title?

[JessicaMarine1]

@weiwang-gsa i think that column becomes redundant and could be deleted. @brentryanjohnson thoughts?

[brentryanjohnson]

If we're labeling all non-HTML documents (including Word and Excel), I think we can get rid of the column.

[weiwang-gsa]

@brentryanjohnson @klohman

I removed Type column for all business line, purchase publications, then come to travel publications page, should I move the online flip book to title column if we going to remove "Type" column?

@klohman For individual audits, i just checked, those buttons are actually links, we just using CSS class make it looks like a button. Just double check you don't want it looks like button as in screen shot below, but normal link instead?

[klohman]

@weiwang-gsa I thinking moving the "Online Flipbook" to the title column makes sense. It should remain in the same row.

For the audit - we can keep the current link styling. One note, the text should be sentence case so it should read "View full audit [PDF, 26 pages]"

[weiwang-gsa]

@klohman "View Full Audit" is the original text there, I think Ryan worked on those audits files previously, I have a feeling it followed smartpay style guide, just double check with @brentryanjohnson if I should make it "View full audit [PDF, 26 pages]"

[brentryanjohnson]

@weiwang-gsa @klohman Let's use sentence case for the link buttons, as Kristen mentioned. Title case in the style guide is specifically used for headings. I should have used sentence case for the audit links!

[weiwang-gsa]

@rebekahperillo the excel file is this one: https://demo.smartpay.gsa.gov/files/ao-approval-tracking-log.xlsx , not sure if you still want to double check and remove the empty tab/sheets for it, per discussion, we will not use [XLSX, 1 sheet] but use [XLSX, 10 KB] for it.

[rebekahperillo]

@weiwang-gsa Looks like there were two empty sheets. Here's the new file with one sheet. If you have any questions, please let me know. Thank you!

ao-approval-tracking-log.xlsx

[weiwang-gsa]

@klohman this is ready for design review: https://demo.smartpay.gsa.gov/

[JessicaMarine1]

@weiwang-gsa @klohman I took a look at this too because...it's a lot.

• [ ] Do we need to add the file size to the xlsx links on https://demo.smartpay.gsa.gov/about/statistics/
• [ ] Also, should it be XLSX instead of xlsx
• [ ] For the full audits that route to other sites, should we have the external link icon in the button? E.g., https://demo.smartpay.gsa.gov/policies-and-audits/audits/2020-dot-purchase/ and https://demo.smartpay.gsa.gov/policies-and-audits/audits/2019-nsa-travel/)If so, I can log as another issue and list all the ones that need it.

[klohman]

@weiwang-gsa @klohman I took a look at this too because...it's a lot.

• [ ] Do we need to add the file size to the xlsx links on https://demo.smartpay.gsa.gov/about/statistics/ Yes, good catch!

• [ ] Also, should it be XLSX instead of xlsx It should be XLSX. I see that on some of them, but it should be across the board.

• [ ] For the full audits that route to other sites, should we have the external link icon in the button? E.g., https://demo.smartpay.gsa.gov/policies-and-audits/audits/2020-dot-purchase/ and https://demo.smartpay.gsa.gov/policies-and-audits/audits/2019-nsa-travel/)If so, I can log as another issue and list all the ones that need it.

Yes, I think we should include the external link icon there as well

[JessicaMarine1]

Yes, I think we should include the external link icon there as well

Done. I added #311

[klohman]

@weiwang-gsa

Not sure if you were working on these as well, but I agree with what Jessica found.

• On stats page, it should be XLSX. I see that on some of them, but it should be across the board.

• Add the file size to the xlsx links on https://demo.smartpay.gsa.gov/about/statistics/

[weiwang-gsa]

@klohman @JessicaMarine1 update is made, it is ready for review, by the way, one of the excel file is older version, which is xls. : https://demo.smartpay.gsa.gov/about/statistics/

[klohman]

@A-L33 @rebekahperillo Ready for QA

[rebekahperillo]

Wowsers. That was a lot. Nice job everyone. Moving to DONE!