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>```