(Foreword so I can actually sound trustworthy as I write about this: I've been an accessibility developer for the past few years doing things exactly like this.)
We don't actually have to change the appearance of the dice. Since we're dealing with screen readers, we can also make a change that targets screen readers specifically and gets them to read out a number like with every other die.
Old six-sided dice HTML
<div class="six-sided-die">
<div class="dot">•</div>
<div class="dot"></div>
(plus 7 more dots)
</div>
New HTML
<div class="six-sided-die">
<div class="sr-only">d6: rolled a 5.</div>
<div class="dot" aria-hidden="true">•</div>
<div class="dot" aria-hidden="true"></div>
(plus 7 more dots)
</div>
Changes:
- Add a screen-reader only element using Bootstrap's
.sr-only
which describes the die and its result.
- Make each dot
aria-hidden="true"
so that screen readers will ignore them. (If setting this via JavaScript, it's important this is set as a HTML attribute and not a DOM property.) Alternately instead of assigning that attribute to each of them, you can just wrap them all in a <div aria-hidden="true">
element for the same effect.
The result of this is screen readers read out "d6: rolled a 5." while visually all that's shown is the dots. Telling us the size of the dice is important.
The message format is very deliberately constructed: it's the shortest unambiguous phrase I could work out. Consider how you'd speak if you were to read d6: rolled a 5. d10: rolled an 8.
to someone out loud: many would introduce pitch changes and pauses around the colon and full stop they wouldn't add if they weren't there, and good screen readers mimic exactly this behaviour. The full stop is very important so as to separate the descriptions of several dice rolls in a row; the "a"/"an" is also important to disambiguate whether I am rolling 5 d6's or a 5 on one d6. We can disambiguate these things by looking, but this message is for people who can't do that.
I would suggest the same sort of message should be added to disambiguate other kinds of dice. E.g. a d10 would change from this:
<div class="ten-sided-die">
<div class="value">8</div>
</div>
which a screen reader only pronounces as "8" (but on what kind of dice?), to this:
<div class="ten-sided-die">
<div class="value">
<span class="sr-only">d10: rolled an </span>
8
</div>
</div>
which a screen reader pronounces as "d10: rolled an 8."
Note that the values 8, 11, and 18 need the "an" preposition just before them; the other values use "a". (Please don't bludgeon me with a giant N.)