CODEWITHSUNDEEP
accessibilitywai-ariascreen-readerswcag
sorvz
sorvz

Reputation: 123

CSS background images with and without links and accessibility

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.

Upvotes: 0

Views: 684

Answers (1)

Adam
Adam

Reputation: 18807

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>

Upvotes: 0

Related Questions