I am struggling with understanding what content should belong to a Heading, in case of a Card that also has a certain 'status'.
This situation occurs for a page with Django templates that generate multiple Cards. Each Card stands for a request for a permit. So each Card has a category, which I've now set as the Heading (not sure about that actually), and under that there is a specification in a Paragraph that shows status changes for these permit-applications. But... All the way in the top of the card we are showing 'status-bar' with an Icon with a color background that communicates an extra status bar. That colored status-bar is apparently what is causing an accessibility issue.
I received an accessibility report on my code and I actually am not sure if the report is 100% correct with this 'Meaningful Sequence': “...Each application-request consists of a header and a number of texts. Some permit-applications have been given additional labels with texts such as "Action required", and "Information". These labels currently appear above the headings, but properly structured, everything associated with a heading should appear below the heading. Please note that visual representation may differ, but adjust the HTML structure to conform to the hierarchy of the content...”
I do not quite understand why the sequence changes the 'meaning' of the content here.
Is it possible solve this without actually changing the order?
The cards have a lot of flexboxes and ways to control their spacing depending on whether they have status-texts or not, so it is not so easy to just put the status-bar below the heading and shift everything around with CSS. (Although of course accessibility is more important than the pain of refactoring).
I do also wonder if any of the elements in these Cards actually qualify as a true Heading.
I have a simplified styled example in Codepen here: https://codepen.io/jirosworld/full/ZEZZxzE
<a href="http://example.com" class="card card--status card--status--warning">
<div class="STATUS-BAR userfeed__marker userfeed__marker--warning">
<span aria-hidden="true" class="material-icons-outlined ic--outline-warning-amber">warning_amber</span>
<span class="card__status_indicator_text">Status: action required! </span>
</div>
<div class="card__body card__body--tabled">
<h3 class="HEADING tabled__value">Driver's license</h3>
<p class="userfeed-card__p">
<span class="status">Your request has changed in status from 'processing' to 'upload photo'.</span>
</p>
<span class="button button--icon-before button--transparent">
<span aria-hidden="true" class="material-icons-outlined ic--outline-arrow-forward">east</span>
</span>
</div>
</a>
<a href="http://example.com" class="card card--status card--status--info">
<div class="STATUS-BAR userfeed__marker userfeed__marker--info">
<span aria-hidden="true" class="material-icons-outlined ic--outline-info">info</span>
<span class="card__status_indicator_text">Info notification </span>
</div>
<div class="card__body card__body--tabled">
<h3 class="HEADING tabled__value">Building permit</h3>
<p class="userfeed-card__p">
<span class="status">Your request has changed in status from 'received' to 'processing'.</span>
</p>
<span class="button button--icon-before button--transparent">
<span aria-hidden="true" class="material-icons-outlined ic--outline-arrow-forward">east</span>
</span>
</div>
</a>
</section>```
You can think of a webpage as a text document. With the current source order, if you remove the styling from the text it will seem like the "status" content is part of the previous card's section because it falls under that card's heading instead of the proper heading.
This is a good analog test for how users that rely on assistive devices might interpret the structure of a webpage. This is why conforming to a meaningful sequence of content is important.
You'll need to refactor the source order of the markup so that the "status" comes after the heading of each card in order to comply with accessibility standards. If you want the "status" to visually appear above the heading of each card to sighted users, you can shift the position with CSS. Using flexbox can make this easy, as you can use the order property—but you'll need to refactor the HTML first.
.card {
display: flex;
flex-direction: column;
margin: 1rem;
padding: 1rem;
border: 1px solid black;
}
.card * { margin: 0; }
.card__title { order: 2; }
.card__status-list { order: 1; }
.card__description { order: 3; }
.sr-only { border: 0 !important; clip: rect(1px, 1px, 1px, 1px) !important; -webkit-clip-path: inset(50%) !important; clip-path: inset(50%) !important; height: 1px !important; margin: -1px !important; overflow: hidden !important; padding: 0 !important; position: absolute !important; width: 1px !important; white-space: nowrap !important; }<article class="card">
<h3 class="card__title"><a href="#">Card Title</a></h3>
<dl class="card__status-list">
<dt class="sr-only">Status</dt>
<dd>Attention Required</dd>
</dl>
<p class="card__description">Lorem ipsum dolor amit</p>
</article>