Rethinking Accessible Drop Caps
Draft–- Published
Separating structure from style and behavior was the web standards movement’s core revelation, and each generation of web designers discovers it anew.
Front Matter
As design lead and LMS specialist, among other roles, work is often as much about the hats I wear as the chances I take. (Hat tip to Men Without Hats for We can dance, we can dance, everybody takin’ the chance!
and before the wires are down, take a slower listen to Hats [album] for character and atmosphere.) This is my story, which is also the story of the web. (Her Story plays in the background, file under cunning.)
Coming from an old guard world, the designing with web standards movement was a big deal, circa 2003. It was a progressive sea change, a prelude to what was to come later with Responsive Web Design in 2010. Backed by a rally call from Zeldman and the CSS guy, separating structure from style was no longer a fond hope. CSS worked, more or less, with wider browser support than it had five years prior in 1998, when I first wrote CSS. One style sheet for Netscape and another for Internet Explorer, and that’s how the early wild, wild web scrolled.
Promised You a Miracle
The road to enlightenment began with a miracle. Michael Miracle. Thanks to him is well past due. As a member of Montserrat College of Art’s early web site committee, I was partly responsible for his hire. It was a miracle to work with another like-minded content first, design second web author. Yet the real miracle was a crash course in Zeldman’s promise of accessible, semantic, and valid HTML and modern.css.
That was back around late summer, early fall of 2003. I can still recall the lasting impact that Michael had made on me. And thinking to myself — this changes everything — as I walked home from an early meeting with him. Thank-you, Michael Miracle.
Where We Go From Here
Zeldman’s blue beanie would later go on to embody the ethos of the (designing with) web standards movement, laying the foundation for the ethics and technics of the modern web. It’s hard to imagine not having such a hat to wear, even when the latest flavor of tag soup seems to trump content as king.
Accessibility and stability were important ideas behind many web standards, especially HTML. In 2009 we revisited the importance of stability with backward, forward, and future-compatible HTML5. The web standards movement succeeds today with a renewed importance on accessibility, while always bet on HTML rallies have already started and continue to march on. Web standards matter.
Standing at the Beginning
Recently I’ve had the privilege of meeting and working with Ethan Marcotte, thanks to my work. Even amidst a pandemic, economic crisis, and social unrest, I am beyond grateful to be okay and to be writing this, let alone have the honor to work on content authored by the creator of responsive web design. Ethan is as humble and genuine as he is innovative and inclusive.
What started as a work-related step later turned into an after-hours detour. I became distracted by the markup of accessible drop caps. Thinking back to the Sliding Doors of CSS days à la A List Apart, I wanted a more artful solution. Something with all the semantic brevity of HTML and visual magic of CSS. And a more accessible separation of content from structure.
One Percent
A note from the editors: While brilliant for its time, this article no longer reflects modern best practices.
For all one knows, this, too, is the fate of my exploration. I should be so lucky. And without the relevant discourse from Ethan and Adrian (Roselli), I wouldn’t have had the right nuts and bolts to study. The heavy lifting had already been done. I ended up moving some of the furniture around — borrowing prose and rearranging code.
A minor detail to note: you’ll find the provisional use of the ex unit for spacing. Mileage may vary, as you may prefer another more trusted typographic unit. Onward to the work, rethinking accessible drop caps.
Development is Design
Anything I’ve really discovered has come through the act of making things.
Initial Patterns
The starting point…
HTML
<p>
<span class="drop-cap" aria-hidden="true">
<span>M</span>atthew
</span>
<span class="sr-only">Matthew</span> Carter was born…
</p>
After a bit of rethinking, preceding decoration before content…
HTML
<div class="drop-cap" aria-hidden="true">
<span hidden>M</span>
</div>
<p>Matthew Carter was born…</p>
As a result, a nice-to-have, if the drop cap markup or style fails or becomes omitted, then no harm done. Without the prepend, the content remains readable and unchanged, minus the drop cap. And with, it’s a progressive enhancement by design. A benefit of separating content from structure and style.
And if you’re a fan of inclusion, describing the look of the drop cap with alternative text is an optional pattern. A potential content first progressive enhancement win-win for everyone.
HTML
<div class="drop-cap">
<span class="alt-text" aria-label="A large black sans-serif drop cap M, centered in a light gray square with a thin black double-lined border." role="img" hidden>M</span>
</div>
<p>Matthew Carter was born…</p>
Style Council
The presentational details…
CSS
/* ¶ Accessible drop caps */
/* Match body text line spacing */
.drop-cap {
margin-top: 1rem;
}
/* Hide adjacent paragraph first letter */
.drop-cap + p:first-letter {
font-size: 0;
}
/* Add stylistic offset */
/* † Override HTML hidden attribute */
/* ‡ Prevent copy-paste of added character */
.drop-cap span {
display: block !important; /* † */
float: left;
font: bold 5rem/1 Verdana, sans-serif;
color: #222;
background-color: #eee;
padding: 0.5ex;
border: 0.3rem double #222;
margin-top: 0.14ex;
margin-right: 0.275ex;
user-select: none; /* ‡ */
}
/* Adjust em square */
.drop-cap span:before,
.drop-cap span:after {
content: "";
display: block;
}
.drop-cap span:before {
margin-bottom: -0.45rem;
}
.drop-cap span:after {
margin-top: -0.15rem;
}
/* ¶ Helper classes */
/* Hide visually and from screen readers */
[hidden] {
display: none !important;
}
Listen and See
Accessible Drop Cap
Drop cap hidden from screen readers; full text read (below).
HTML
<div class="drop-cap" aria-hidden="true">
<span hidden>M</span>
</div>
<p>Matthew Carter was born…</p>
Matthew Carter was born and raised in England, son of the typographic historian Harry Carter. On leaving school in 1955 he spent a year at the Enschedé typefoundry in the Netherlands learning to make metal type by hand — a skill that proved to be commercially obsolete. To earn a living he had to adapt to drawing alphabets for modernist designers in London who were frustrated by the lack of contemporary sanserif typefaces in Britain at that time. His background, therefore, is a technical one; as a designer he is self-taught. If there is a theme to his work over the past 50+ years it is the relationship of design to technology during a period when the tools for making and setting type have changed more radically than at any other time in history. He has been able to make type by essentially all the methods ever used: metal by hand, metal by machine, photoset, digital, desktop, screen (and a woodtype for letterpress posters, a recent commission).
Accessible Drop Cap With Alternative Text
Drop cap described by screen readers; full text read (below).
HTML
<div class="drop-cap">
<span class="alt-text" aria-label="A large black sans-serif drop cap M, centered in a light gray square with a thin black double-lined border." role="img" hidden>M</span>
</div>
<p>Matthew Carter was born…</p>
Matthew Carter was born and raised in England, son of the typographic historian Harry Carter. On leaving school in 1955 he spent a year at the Enschedé typefoundry in the Netherlands learning to make metal type by hand — a skill that proved to be commercially obsolete. To earn a living he had to adapt to drawing alphabets for modernist designers in London who were frustrated by the lack of contemporary sanserif typefaces in Britain at that time. His background, therefore, is a technical one; as a designer he is self-taught. If there is a theme to his work over the past 50+ years it is the relationship of design to technology during a period when the tools for making and setting type have changed more radically than at any other time in history. He has been able to make type by essentially all the methods ever used: metal by hand, metal by machine, photoset, digital, desktop, screen (and a woodtype for letterpress posters, a recent commission).