0

I'm using images inside div containers with css(background images). Not just for presentation, they have meanings. I want to provide alternatives to users with disabilities, but not sure how to do this right. I also use them inside links sometimes, this is also needed to be addressed somehow.

With case one(images inside div with css, but without link), I thought of using hidden text inside of div, but not sure if I should specify that this is the image and not just a text. Because when text alternative provided for images, disabled user will see that this text is belong to the image(with aria-labelledby for example), so how should this be done with div and css image?

With the second case, I also not sure how to make it right. I want to use title for the link, so the normal users will also benefit from this by hovering mouse for icons, for example, but I'm not really sure if title will suffice for disabled people.

sorvz
  • 123
  • 8
  • Barring some specfic examples and context (like a web page), these three links may be useful to you: http://webaim.org/techniques/alttext/#background, https://www.paciellogroup.com/blog/2013/01/using-the-html-title-attribute-updated/, http://adrianroselli.com/2016/12/accessible-emoji-tweaked.html – aardrian Apr 05 '17 at 15:45
  • Thanks aadrian, I will take a look at it. You have nice website btw :) Informative. – sorvz Apr 06 '17 at 13:44

1 Answers1

0

That's clearly what role=img is for:

<a href="...">
  <div role="img" class="css_classename"
       aria-label="This information is provided to a screen reader"
       title="This is a tooltip">
  </div>
</a>
Adam
  • 17,838
  • 32
  • 54
  • Thanks Adam, that's great! But what if I want to use also some content inside `role="img"` `div`? Would it be valid? If no, what if I'll use another `div` inside the `role="img"` `div`? – sorvz Apr 06 '17 at 13:47
  • It's valid HTML, but relating to ARIA, the `aria-label` will take precedence on any text contained inside. – Adam Apr 06 '17 at 13:58
  • @sorvz [`role=img`](https://www.w3.org/TR/wai-aria/roles#img) is only a fit if the _entire_ element is to be treated as an image. Avoid using it if you will have nested content unless you have a good understanding how it works and are going to test with screen readers. As I mentioned in my comment above, seeing some examples would help. One code solution rarely works for all scenarios. IMO, this solution has limited utility. – aardrian Apr 06 '17 at 16:33