CODEWITHSUNDEEP
htmlaccessibilitywcagwcag2.0
user7544737
user7544737

Reputation:

Can the empty Heading pass the accessibility test

Currently we are working on a AEM project where it requires for us to have a cards component with some kind of image a heading a description.

This component is used for different variations of the cards where in some case there will be only a Image and some text, in other cases a description and heading.

So to maintain the same structure we incorporated an <img> tag, <h3> tag and a <p> tag.

In the case of a card with no heading the <h3> tag will be left empty.

When we test for the accessibility with tools like wave and axe the error pops up for an empty heading, so I have used the aria-hidden="true" to bypass the screen reader from picking it up.

However if we test using this way the wave tool still picks the error, whereas axe does not.

How do I solve this issue or what is the right thing to do in such a situation.

Upvotes: 2

Views: 3079

Answers (1)

GrahamTheDev
GrahamTheDev

Reputation: 24825

wave tool error

There is nothing wrong with having an empty <h3> provided you hide it with aria-hidden="true" as aria-hidden="true" should remove an element from the accessibility tree entirely. (You should remove it really to save on wasted bytes but that is just the issue with templating systems!)

I think the wave tool is misreporting here but would have to check your source code to confirm.

What to do instead.

In your circumstances I would argue that you should always have content within your <h3>s for consistency

This is down to how screen reader users navigate pages. If a user sees a pattern of heading level 3s on cards they would expect this to continue. This is because screen reader users tend to navigate by headings, links or regions. If you show them that each card has a h3 they would expect that to continue and by making the h3s invisible they miss important articles / information.

decorative images

For decorative images I would recommend putting your images within a <h3> and making them invisible to screen readers with alt="" (you can add role="presentation" as well as I have done below but it is not needed).

Then add some visually hidden text within the heading so that screen reader users get a consistent experience.

putting an image within a <h3> is valid HTML so that is fine.

images that convey important information (non decorative)

There is nothing wrong with simply adding an image with an alt attribute to a heading as it is well supported, it all depends on whether your images are for decorative purposes or are to convey meaning.

You just need to decide whether an image is decorative or not.

example

The below example demonstrates both techniques in their simplest form.

.card{
  padding: 10px;
  margin: 20px;
  border: 2px solid #333;
}


.visually-hidden { 
    border: 0;
    padding: 0;
    margin: 0;
    position: absolute !important;
    height: 1px; 
    width: 1px;
    overflow: hidden;
    clip: rect(1px 1px 1px 1px); /* IE6, IE7 - a 0 height clip, off to the bottom right of the visible 1px box */
    clip: rect(1px, 1px, 1px, 1px); /*maybe deprecated but we need to support legacy browsers */
    clip-path: inset(50%); /*modern browsers, clip-path works inwards from each corner*/
    white-space: nowrap; /* added line to stop words getting smushed together (as they go onto seperate lines and some screen readers do not understand line feeds as a space */
}
<div class="card">
<h3>this card has a heading</h3>
<p>The user would hear "heading level 3 - this card has a heading"</p>
</div>

<div class="card">
<h3><img src="https://placehold.it/150"/ alt="" role="presentation"><span class="visually-hidden">This heading has an image but it is for presentation</span></h3>
<!--notice how this version does not announce there is an image-->
<p>The user would hear "heading level 3 - this heading has an image but it is for presentation"</p>
</div>


<div class="card">
<h3><img src="https://placehold.it/150"/ alt="Important image that converys information"></h3>
<p>The user would hear "heading level 3 - image - Important image that converys information"</p>
</div>

Upvotes: 3

Related Questions