Card header markup should come before media markup

Created on 28 March 2025, 21 days ago

Problem/Motivation

The cards in card groups put the markup for the media element before the markup for the header element. The USWDS accessibility guidance for the card component says to do the opposite and let CSS reorder them visually. I think this probably affects screen readers.

Steps to reproduce

Create a regular card group and add a card to it, then inspect the markup.

Proposed resolution

Reorder the markup to put the header first.

Remaining tasks

User interface changes

API changes

Data model changes

📌 Task
Status

Active

Version

3.1

Component

Code

Created by

Live updates comments and jobs are added and updated live.
Sign in to follow issues

Comments & Activities

  • Issue created by @mwymore
  • The tricky part is making it coexist with the option to make the entire card a link. I have a fix customized for my site that I will try to make more generic and submit.

Production build 0.71.5 2024