Drop Caps and Design Systems

After a bit of work, we landed on something like this:

p
span aria-labelledby=”word–first” role=”text”
span aria-hidden=”true”
span class=”dropcap”M/spanatthew
/span
span id=”word–first” class=”hidden”Matthew/span
/span
watched the storm, so…
/p

—okay, okay. p
span aria-labelledby=”word–first” role=”text”
span aria-hidden=”true”
span class=”dropcap”M/spanatthew
/span
span id=”word–first” class=”hidden”Matthew/span
/span
watched the storm, so…
/p

First, we’re treating the drop cap as a purely visual element. p
span aria-labelledby=”word–first” role=”text”
span aria-hidden=”true”
span class=”dropcap”M/spanatthew
/span
span id=”word–first” class=”hidden”Matthew/span
/span
watched the storm, so…
/p

The second part is the aria-labelledby attribute, attached to this bit of HTML that surrounds the whole block.

Source: product.voxmedia.com