When using a stroke and fill on a font to create layers, how do I hide the duplicate text from screen readers and search engine bots?

Question

I'm trying to build a h1 with a typography splitted in two fonts: stroke font and fill font:

Overlapping both layers I can take control of fill and stroke colors:

The problem is that, in the HTML markup, I need to duplicate contents. Something like this:

<h1>
    <span style="font-family:fill;">Lorem Ipsum</span>
    <span style="font-family:stroke;">Lorem Ipsum</span>
</h1>

I ask for some method for hide one of them in the DOM for robots and blind people devices. Is it possible?

You should be able to achieve what you are after using pseudo elements. Please can you supply a reproducible example (HTML, CSS and font). — Hidden Hobbes, Jun 30 '17 at 10:55
user5014677: If I do that, I lose control of fill and stroke colors. I need to keep both for render fonts in the screen, but hide one of them for indexing robots. — aitor, Jun 30 '17 at 10:57
Hidden Hobbes: I am thinking in this method. The H1 content is supplied dinamically by a WordPress CMS template. I can provide dinamically an inline style for the element, but I can't select `:before`or `:after` pseudo elements ouside de stylesheet. And I dont know how provide its contents dinamically in the stylesheet. — aitor, Jun 30 '17 at 11:20

score 3 · Accepted Answer · answered Jun 30 '17 at 11:31

3

aria-hidden would seem to be what you require.

In supporting browsers in conjunction with supporting assistive technology the content is not conveyed to the user via the 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>

1 Answers1