aitor aitor - 1 year ago 69
CSS Question

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?

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

enter image description here

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

enter image description here

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?

Answer Source

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>

See also this answer.

Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download