How do I describe an image created using CSS?

Question

So for images, there's the alt attribute to tell people who can't view it what it is.

What if I have a bunch of divs styled in such a way that it creates an image? (Like a bunch of divs styled to look like a dice using CSS perspective and transforms).

How do I tell screen readers that "Hey! this is a dice".

Answer 1

I don't know so much about accessibility but perhaps the <figure> element could be used?

You could use it together with the <figcaption> element for a a visible caption. If you use Bootstrap and don't want it visible, you can use the .sr-only (screenreader only class).

You could also use the global attribute title.

Example:

<figure>
  <!-- your div elements with CSS here -->
  <figcaption>Hey, this is a dice!</figcaption>
</figure>

With invisible description (using Bootstrap):

<figure>
  <!-- your div elements with CSS here -->
  <figcaption class="sr-only">Hey, this is a dice!</figcaption>
</figure>

Using the title attribute.

<figure title="Hey, this is a dice!">
  <!-- your div elements with CSS here -->
</figure>

But I don't know which is the most semantic or proper way in terms of accessibility.