TCCP: Tooltip accessibility improvements #8506
Conversation
Using Axe inside our Cypress tests lets us check a11y compliance at any desired state of the app. It's installed globally so that other Bureau products can use it. https://www.npmjs.com/package/cypress-axe
The contrast fails WCAG 2.0 AA at normal-sized text. The text size in wells is debatably "large" text but because the color change is visually imperceivable, IMHO it's worth changing. Pacific: https://webaim.org/resources/contrastchecker/?fcolor=0072CE&bcolor=F0F7F6 Pacific mid-dark: https://webaim.org/resources/contrastchecker/?fcolor=0061C1&bcolor=F0F7F6
Predictably and concisely list all the card details to screen readers as they move between cards on the results page.
| {%- set card_purchase_apr = apr_range( | ||
| card.purchase_apr_for_tier_min, | ||
| card.purchase_apr_for_tier_max, | ||
| asterisk=true |
There was a problem hiding this comment.
How is the asterisk read by a screen reader when this is used in the aria-label? If it sounds weird, I was going to suggest using an asterisk=false version in the aria-label. But if it's also read awkwardly in the card content, maybe we can update the apr_range macro to make the asterisk aria-hidden everywhere so it's never read.
There was a problem hiding this comment.
Great point, the asterisk does not read well either on the results page or the card detail pages. I'm thinking we should either migrate to a footnote format (e.g. [1]) that links to the explanatory text or we can try replacing the asterisks with the full explanatory text for screenreaders only. I'll experiment and open another PR.
| href="{{ card.url }}" | ||
| data-js-hook="behavior_ignore-link-targets" | ||
| data-ignore-link-targets="[data-tooltip]" | ||
| aria-label="{{ card.product_name }} from {{ card.institution_name }} with {{ card_purchase_apr }} purchase APR, {{ card_account_fee }} account fee, {{ card_rewards(card) }} card rewards{%- if card.requirements_for_opening or card.issued_by_credit_union -%}, eligibility requirements{%- endif -%}" |
There was a problem hiding this comment.
Should we add the data published date in the description so it reads something like "9.99% purchase APR as of December 31, 2023"? That might be overkill and make for a too long summary, though.
There was a problem hiding this comment.
I was originally including the date in the aria label but it felt very repetitive and obnoxious to repeat "as of December 31, 2023" over and over again as the user tabs through the cards. I figure the card detail page has all the juicy details so it's okay to keep the card summaries concise.
Adds some code to close tooltips when
esckey is pressed per digital.gov guidance. Also adds anaria-labelto card results that summarizes all the card details to assistive technologies.How to test this PR
escto close it.yarn cypress run --spec test/cypress/integration/consumer-tools/credit-cards/explore-cards.cy.jsChecklist
/docsfolder) – for basic, close-to-the-code docs on working with this repoBrowser testing
Check the current browser support cutoff list](https://cfpb.github.io/consumerfinance.gov/browser-support#current-browser-support-metrics) for browsers that are advisable
to prioritize for testing.
Accessibility
Other