Use CSS to create a drop cap as an image (with accessibility)-CodePudding

There are plenty of guides online explaining how to do drop caps in HTML and CSS, e.g. https://css-tricks.com/snippets/css/drop-caps/ (They typically require a bit of care not to break screen-reader accessibility, e.g. splitting the word "Carol" into "C arol.")

But all of the online guides I've found discuss how to style the :first-letter, e.g. changing its font, floating left, etc.

My designer has asked me to create a drop cap that's an image, not just a different size/font.

My first attempt was this:

<p><img src="c.jpg" alt="C" style="float: left;">arol

But screen readers read that as two words, "C arol," instead of one word, "Carol."

What's the best way to handle this?

CodePudding user response：

You could use the fact that a first-letter pseudo element can have a background image and set the first letter itself to transparent so that it isn't seen, but a screen reader shouldn't notice as the basic HTML remains intact.

p.dropcapimg::first-letter {
  background-image: url(https://i.stack.imgur.com/WecKn.png);
  background-size: contain;
  background-repeat: no-repeat;
  background-center: center center;
  float: left;
  font-size: 6rem;
  line-height: 0.65;
  color: transparent;
  margin-right: -0.15em;
}

<p >Carol a lot of text now a lot of text now a lot of text now a lot of text now a lot of text now a lot of text now a lot of text now a lot of text now a lot of text now a lot of text now a lot of text now a lot of text now a lot of text now a lot of text
  now a lot of text now a lot of text now a lot of text now a lot of text now a lot of text now a lot of text now a lot of text now a lot of text now a lot of text now a lot of text now a lot of text now a lot of text now a lot of text now a lot of text
  now a lot of text now a lot of text now </p>

Obviously you'll need to fiddle around with sizes depending on the actual image.

CodePudding user response：

My approach was to insert the <img> with aria-hidden=true, so screen readers would ignore it, and to style the first letter with visibility: hidden, so it would visually read as one word.

p img {
    float:left;
}
p::first-letter {
    visibility: hidden;
}

<p><img src="https://freesvg.org/img/ryanlerch-Decorative-Letter-Set-4.png" height="50" width="50" aria-hidden="true">Carol</p>