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=""
.