Screen readers read same content multiple times

[jeryj]

Nice work on Bungee! It's a beautiful font and a very elegant implementation of a difficult task.

When a layered version of Bungee is generated, it repeats the same content several times to give the visual effect. For screen readers, this means the content gets read for each time the content appears. If the text is layered 4x to create the visual effect, it'll get read 4x by a screen reader.

To fix this, you can leave the first time the font is displayed as is, but for any additional ones generated, add aria-hidden="true" role="presentation" to the HTML so the screen reader knows to ignore it. Here's an example:

<figure class="bungee regular-ffffff background-2b859d inline-e8e8e7 shade-215966 sign-247082 horizontal regular inline shade background sign" id="preview" data-max-font-size="30vh" style="font-size: 145px;">
    <div>
        <div class="layer background" style="background-color: rgb(43, 133, 157);"></div>
        <div class="layer text regular" style="color: rgb(255, 255, 255);">
            <span>Tester</span>
        </div>
        <div class="layer text inline" style="color: rgb(232, 232, 231);" aria-hidden="true" role="presentation">
            <span>Tester</span>
        </div>
        <div class="layer text shade" style="color: rgb(33, 89, 102);" aria-hidden="true" role="presentation">
            <span>Tester</span>
        </div>
    </div>
</figure>

You can read more about why this works here: http://john.foliot.ca/aria-hidden/

Again, great work! Looking forward to using it sometime :)

[davelab6]

Colorfont.js does this

[ghost]

Great catch, thank you. 2294741

[jeryj]

Quick turnaround and clever fix! 💯 💯 💯

[djrrb]

Thanks @jeryj and @chrissam42!!