When using stroke and font fill to create layers, how can I hide duplicate text with screen readers and crawlers?
I am trying to create an h1 with typography split into two fonts, stroke font and fill font:
By overlapping both layers, I can take control of the fill and stroke colors:
The problem is, in the HTML markup, I need to duplicate the content. Something like that:
<h1>
<span style="font-family:fill;">Lorem Ipsum</span>
<span style="font-family:stroke;">Lorem Ipsum</span>
</h1>
I am asking for some method to hide one of these in the DOM for robots and device blinds. Is it possible?
+3
source to share
1 answer
aria-hidden
will look the way you need it.
In supporting browsers, when combined with assistive technology, the content is not delivered to the user through assistive technology.
So this should work.
<h1>
<span style="font-family:fill;">Lorem Ipsum</span>
<span style="font-family:stroke;" aria-hidden="true">Lorem Ipsum</span>
</h1>
See also this answer.
+3
source to share