Correct example, incorrect example (true/false box) as div, what aria to use?

Question

so on website I'm building I have these div blocks, one block is for "correct example", and the other is for "Incorrect examples" (like Info & warning kinda thing)

I have the color, I have the "icon" (background image), but I don't know what I should use for screen readers.

What aria should I use to correctly mark these divs.

like Aria-label="Incorrect example"?

Thank you

Answer 1

If you're asking for program help (typically when you're asking about specify HTML attributes), that's more of a stackoverflow.com question rather than this ux.stackexchange.com, but I'll continue on.

Is your correct/incorrect <div> an interactive element? It doesn't sound like it but just in case it is and you're not using a native true/false checkbox (<input type="checkbox">), then you should follow the checkbox design pattern.

If your correct/incorrect <div> is just static text (not interactive), then aria-label should probably not be used. It's mainly for interactive elements, although it can also be used on landmarks and is sometimes used on lists and tables. There are some limitations on aria-label found here: https://www.w3.org/TR/using-aria/#label-support. Pay particular attention to the third last bullet point:

Don't use aria-label or aria-labelledby on a span or div unless its given a role.

So your question might be more about what role should the <div> have in addition to the aria-label.

Is your info block associated with an interactive element? If so, the block should be tied to the interactive element with aria-describedby.

<!-- some interactive element -->
<input aria-describeby="goodID">
...
<div id="goodID">
  something good
  <img src='good.jpg' alt='good'>
</div>

Of course, after saying all this, you might have a simple situation where you're just trying to convey the meaning of the green checkmark or the red x to indicate good or bad. If you have literal text of "something good" or "something bad" next to the icon, then the icon itself is essentially decorative doesn't need alt text. It can be alt="".

Answer 2

I believe the answer might lie very simply in the use of the icon.

Purely decorative icons should be hidden via aria-hidden="true", but any other icon needs an accessible name.

<img alt="Bad example" src="cross.svg" width="20" height="20">
or
<svg role="img" aria-label="Bad example" …>
or
<i class="icon icon-cross" aria-hidden="true"></i>
<span class="visually-hidden">Bad example</span>

How exactly you provide the alternative name depends on the icon library. It might be worth mentioning that icon-fonts are not a good practice for accessibility, since user-defined fonts will render icons unusable.

Since the two boxes are demonstrations, and might also contain images, you could also consider using the <figure> element.

<figure>
    <!-- <img> or text here -->
    <figcaption><svg role="img" aria-label="Bad example for X">…</figcaption>
</figure>