20
\$\begingroup\$

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.

\$\endgroup\$
  • \$\begingroup\$ I just used the dice roller while being in the main chat as well, and the short “other rooms you're in” summary in the main chat listed the dice roller's post in the dice roller chat as “• • • • • • • • • • • • •”. Not helpful, either. “4d10” gave a nice “Dice Service: 10 9 9 2” instead. \$\endgroup\$ – Anaphory Aug 24 '16 at 20:56
18
\$\begingroup\$

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.

\$\endgroup\$
  • \$\begingroup\$ So, if we really want pips for some reason, we can convert numbers to pips in css? \$\endgroup\$ – Adeptus Aug 18 '16 at 1:46
  • 3
    \$\begingroup\$ @Adeptus CSS can do some fancy things, but I think the conditional logic necessary to generate multiple bullet characters when it sees a 5 or whatever is beyond what it's capable of. Maybe in CSS3, but that's not widely supported. The mention of CSS in there is in the context of what HTML is and isn't supposed to be used to convey, not necessarily that CSS can fill in for anything that HTML can be (ab)used to do. \$\endgroup\$ – SevenSidedDie Aug 18 '16 at 1:56
  • 1
    \$\begingroup\$ There are d6 dice symbols in unicode (⚀ ⚁ ⚂ ⚃ ⚄ ⚅) which would encode the information we mean here, but they do not look particularly useful in this context. \$\endgroup\$ – Anaphory Aug 23 '16 at 16:09
  • 1
    \$\begingroup\$ I'm accepting this because in my opinion we should just go ahead and make the underlying data numeric rather than tacking on a workaround. But I don't really know if my vote should "count" more than anyone else's when it comes time to decide which solution to implement. Wiser heads will prevail, I'm sure. \$\endgroup\$ – nitsua60 Aug 24 '16 at 21:22
  • 1
    \$\begingroup\$ I've gone ahead and unaccepted this because greener's new edit makes that one look more-useful to the disabled. But I don't really know anything about the matter, so I'm just going to stop judging and let the votes do their work =) \$\endgroup\$ – nitsua60 Jan 11 '17 at 21:32
18
\$\begingroup\$

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

\$\endgroup\$
  • 4
    \$\begingroup\$ This is a good workaround. I think it might be still worthwhile to drop the visual-tricks d6 code entirely though, so I've upvoted this and written an alternative answer. \$\endgroup\$ – SevenSidedDie Aug 17 '16 at 18:02
  • 2
    \$\begingroup\$ How would this interact with the fudge script, or is that asking too much? \$\endgroup\$ – BESW Aug 17 '16 at 21:54
  • 4
    \$\begingroup\$ @BESW It would likely need an update, but not a difficult-to-write one. \$\endgroup\$ – SevenSidedDie Aug 18 '16 at 2:04

You must log in to answer this question.

Not the answer you're looking for? Browse other questions tagged .