Can we make the dice bot more accessible?

Question

I've recently learned that d4, 8, 10, 12, and 20 interface well with screen readers, but that the d6 reads as "bullets." Presumably, that's the interpretation given to pips.

Can we change the d6 to be numerically-represented, rather than displaying pips? This strikes me as a no-brainer as it disadvantages no-one but makes the service accessible to some for whom it currently isn't.

Answer 1

Yes, let's do this. Make the d6 use numbers instead of pips.

1. Theory background. Using text to represent graphics isn't really accessible, and tends to be done primarily because it “works” for people without accessibility needs. Using layout tricks to move “U+2022 BULLET” around the screen is a tidy example of how visual-centric design accidentally defeats accessibility.

   Even putting aside accessibility, tricks like that are clever, but break the purpose of HTML being a information-oriented medium instead of a visually-oriented medium (unsurprisingly, tricks that break HTML semantics also break accessibility). The whole point of modern HTML is to not make assumptions about how the content is rendered or consumed. (That's a job reserved for independent layers like CSS, even when they can't achieve all the same visual tricks as “breaking” HTML can.)

2. Therefore, we should just use numbers in the 6-sided dice's output HTML, like the rest. It will work properly for screen readers and visual browsers.

   A numbered d6 is even the standard used in polyhedral dice sets, so it's appropriately RPG-centric to use numbered instead of pipped d6s and respects the way accessible way HTML is supposed to be written.

Answer 2

(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.)