USWDS-Site: Add icon accessibility tests page

[amyleadem]

Summary

Added icon accessibility test page.

Note

These tests for this component are all marked as conditional. This is because there are different methods for including an icon on a page, each with different levels of accessibility. This variability made the icon tests feel different from the other components in the system, and the team felt like there should be extra emphasis on testing icon implementation in each project.

The team drafted a sample explanation that we can include on the page, if desired. It is not included on the page yet, but we can work to include something like this now or as a quick follow-on:

Icons can be decorative or functional. How you check an icon for compliance depends on how it's used. This is why the the checks below are marked as conditional. Our icon library is accessible to 2.1 AA standards. Follow the checks below to determine if your use of an icon passes each success criteria.

Important

We need to confirm the changelog dates before merge.

Resources

• Creating accessibility checklists process doc (Google docs 🔒)
• Accessibility checklist spreadsheet (Google sheets 🔒)

Related issue

Closes #2535

Preview link

• Icon - accessibility test page
• Icon main page

Testing and review

1. Confirm that both the main component page and the accessibility tests page has the correct compliance tag at the top.
2. Confirm that the main component page links to the accessibility tests page in the side navigation.
3. Confirm that the main component page links to the accessibility tests page in the accessibility section.
   1. Confirm that this text references the correct component. For example "Test the icon in your own project."
4. Check that accessibility tests page provides the correct counts for each test status type.
5. Confirm the test checklist summaries and data are accurate.
6. Confirm no visual issues.
7. Confirm there is an appropriate changelog entry on both the main component page and the accessibility tests page.

[sarah-sch]

Adding @finekatie and me as reviewers on this PR.

[amyleadem]

@amycole501 @alex-hull @finekatie @sarah-sch

I've added some comments about the content for these checklist items. Happy to meet up to discuss if that is simpler!

[amyleadem]

Note

I did a first pass at the summary elements here because I didn't see them in the spreadsheet. I've also added these summaries to Column L in the spreadsheet.

If a test for the same WCAG criterion was already added to an existing accessibility tests page, I tried to match the language and sentence structure whenever possible. For example, "Color is not the only method used to convey icon information." here matches the structure of "Color is not the only method used to indicate links." on the link accessibility tests page.

Please feel free to provide suggestions for alternative summaries!

[amyleadem]

Note

I added this line about ANDI/color analyzer because we added it on the button tests page. Let me know if I should remove it.

[amyleadem]

@sarah-sch @finekatie @amycole501 @alex-hull
I have incorporated the changes discussed in our conversation yesterday and this is ready for review. I've added a couple of comments in purple to Column L of the checklist spreadsheet highlighting items I didn't include on the page at this time. Please review any open comments in the issue above and let me know if you need any changes.

[alex-hull]

@amyleadem Did we plan to not add the little blurb about why these items are marked as conditional? I feel like there will be questions related to that, so we would maybe need to add it in at some point.

[sarah-sch]

Along with my in-line suggestions, please change the text above the table (at top of page) to read as follows: "The USWDS team did five tests based on WCAG 2.1 AA success criteria." (Spell out five instead of using a numeral because it's less than 10.)

[amycole501]

I like Sarah's comments; the page looks good to me.

[amyleadem]

@sarah-sch Your requested updates should now be live. Let me know if you need any more changes!

[sarah-sch]

Looks good to publish as an MVP after fed review

[amyleadem]

@thisisdano @annepetersen This is ready for your review. FYI - I am able to get pa11y tests to pass locally, but they are still crashing here. Going to keep trying to get them to pass here 🏄

[thisisdano]

Merging over crashing pa11y test