Front end folks!
Let's say I want to replace a character in a sentence with a SVG. You know, like how the monks used do with their drop caps and illuminated manuscripts.
What's the most accessible way to do this? How do I ensure screen readers know what's going on?
Let's say I want to replace a character in a sentence with a SVG. You know, like how the monks used do with their drop caps and illuminated manuscripts.
What's the most accessible way to do this? How do I ensure screen readers know what's going on?
Comments
.illuminated::first-letter::before {
background-image: url(illumination.svg);
// other css here
}
And then hide the first-letter using one of the hide but not from screen readers css tricks
Works reasonably well for copy and paste. Not sure about screen readers yet.
Not sure how well that can communicate the intent but it’s a good start.