TCCP: Consolidate card detail headings into macro #8416
Conversation
| <span class="u-visually-hidden">{{ heading }}</span> | ||
| </div> | ||
| <div | ||
| {%- if subheading_classes %} class="{{ subheading_classes }}"{% endif %} | ||
| aria-hidden="true" | ||
| > | ||
| {{- heading -}} |
There was a problem hiding this comment.
How come there's a visually hidden heading directly above an aria-hidden heading of the same heading value?
There was a problem hiding this comment.
@niqjohnson? This came from your code. Is this for screenreader support?
There was a problem hiding this comment.
I think that came from @contolini's improvements after an accessibility audit. And looking back at older chats, we'd also talked about changing the markup from divs to spans to help a screenreader read the text more naturally. @contolini, when you're back, do you want to take a look at this one?
There was a problem hiding this comment.
Yeah, it's for assistive technologies. TCCP has a novel visual hierarchy that isn't great for screen readers. Each card's data point has its value appear larger and on a new line above its descriptor, e.g. annual fee:
A screenreader reads "$99" and then stops because it's a block level element with no relationship to the next line, "Annual fee". I first tried term and definition roles to improve things but the template ended up rather messy and screenreaders don't have great support for those roles. @niqjohnson had the smart suggestion to use spans but because there's CSS that makes the spans block level, it didn't change the situation. So ultimately the cleanest solution was to add invisible text next to the value so that screenreaders read "$99 Annual fee" when they reach the section.
This commit creates a new `data_section` macro in the TCCP card details page template, removing some boilerplate used repeatedly to render this page. See internal https://github.local/Design-Development/Design-Thinking-and-User-Research/issues/306 for context. To test, run a local server with the latest data and visit pages like: http://localhost:8000/consumer-tools/credit-cards/explore-cards/cards/vinton-county-national-bank-consumer-credit-card/
chosak
force-pushed
the
tccp/details-heading-macro
branch
from
5445542
to
8f8379b
Compare
This commit creates a new
data_sectionmacro in the TCCP card details page template, removing some boilerplate used repeatedly to render this page.See internal https://github.local/Design-Development/Design-Thinking-and-User-Research/issues/306 for context.
How to test this PR
To test, run a local server with the latest data and visit pages like: http://localhost:8000/consumer-tools/credit-cards/explore-cards/cards/vinton-county-national-bank-consumer-credit-card/
Checklist