1

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.

image of True / false example box

What aria should I use to correctly mark these divs.

like Aria-label="Incorrect example"?

Thank you

1
  • 1
    Is it possible to add more context to the question? What is this for content exactly and why are aria attributes needed in this case? When do users see this and how do they interact with it?
    – jazZRo
    Sep 5, 2022 at 13:59

2 Answers 2

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

0

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>

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.