design-system
design-system copied to clipboard
cfpb
Icons: Are they always decorative?
Are our SVG icons always decorative? If so, we should add aria-hidden="true" to the SVGs' source code. So far, I haven't been able to find an SVG icon on cf.gov that isn't also coupled with a link, heading, etc.
The other option would be to add a hidden parameter to our svg loading function so that imported SVGs can optionally have aria-hidden="true" when desired.
See https://css-tricks.com/accessible-svg-icons/
If we do add an attribute to the SVGs, we should be able to add it via svgo by editing the config at https://github.com/cfpb/design-system/blob/main/svgo.config.js and adding something like https://svgo.dev/docs/plugins/add-attributes-to-svg-elements/
Yes? @willbarton recently generated an SVG icon audit that I can review to check if there are any non-decorative SVGs.
If SVGs are only decorative, then we can add an aria-hidden attribute using perhaps the script mentioned by @anselmbradford in the comment above
@anselmbradford So it looks like there are several instances of the warning icon without an accompanying text label on the site. For just three examples:
https://www.consumerfinance.gov/owning-a-home/conventional-loans/ https://www.consumerfinance.gov/about-us/blog/african-american-and-hispanic-borrowers-harmed-provident-will-receive-9-million-compensation/ https://www.consumerfinance.gov/about-us/blog/new-relief-for-renters/
I'd argue that these warning icons as used here are not decorative, as they're calling attention to information that the writer believes is important, and there is no accompanying text label to indicate as such, like "Warning" or "Note".
@sonnakim It looks like those three cases have vestigial svgs that need to be handled differently post- @willbarton's work. If I view each in the Wagtail admin, the icons disappear, which means they need to be removed anyway, right? Or rather, they'll automatically be removed the next time each of those pages is saved.
That said, if we do keep icons in this way, perhaps we could aria-hidden the icons by default, and add hidden text for the cases where it is not decorative. So something like:
<div>
<svg aria-hidden="true" class="cf-icon-svg … >
<span class="u-visually-hidden">Note:</span>
</div>
If that was done via Wagtail, there would need to be a mechanism to add the hidden text content to accompany the icons.
@sonnakim It looks like those three cases have vestigial svgs that need to be handled differently post- @willbarton's work. If I view each in the Wagtail admin, the icons disappear, which means they need to be removed anyway, right? Or rather, they'll automatically be removed the next time each of those pages is saved.
Nevermind, these are okay. I was not on the main branch and probably need to refresh my local database. I see them on content. The rest of the above comment is still applicable though.
Ok, we discussed and believe we should do an audit of notification svg instances and how they're used (these appear to be the only ones that might need a text label or aria label), and then plan accordingly
Discussed during backlog grooming. Instead of making an exception for the warning svg, we can manually add something like "Note" to signal that this content is important. I'll consult with Chuck as to best label.
Once that's done, we can hide SVG source code as described in the first comment!
Ok, of 57 SVGs listed in Will's audit, I decided that only three really needed "Note" added after the warning SVG: the FHA loans and Conventional Loans page in BAH, and this blog post from 2017. I've gone ahead and published those, but @csebianlander let me know if you have any reservations about doing so and I can unpublish. The remaining instances were decorative, or used in headings where "Note" was either redundant or else awkward to add.
So, this is unblocked and we can proceed with adding the attribute as described in the first couple of comments above.