1 reply

selectable transparent text with readable background and aria-hidden="true"

Aloha! I have been drafting a new website theme. For the logo, I've set the element background to the designed graphical logo, and then the element content matches the logo-text with

color: transparent;

color: transparent;

color: transparent;

color: transparent; set in the css.

With this set up, text in the logo appears to be selectable and is screen-reader-readable. Likewise the element content is legible despite being transparent, as a result of its SVG background, the logo...

Obviously when I test the page for accessible text contrast (with a browser extension), it fails because this text is not visible...

I thought

aria-hidden='true'

aria-hidden='true'

aria-hidden='true'

aria-hidden='true' would be enough to exclude it from contrast tests, but it seems not. I believe

role='none'

role='none'

role='none'

role='none' would remove it from the accessibility tree all together, which seems wrong to do, especially on the front page when this text is a H1...

As far as I can see, it is all accessible in a practical sense but not in a way that passes accessibility tests for color contrast. Is there anything I'm missing, or is this page going to be punished in SEO etc when we go live, unless I give up on the idea of selectable transparent text?

Here's my markup in twig/html:

    <div class="site-name" aria-hidden='true'>
      <a href="{{ path('<front>') }}" rel="home">{{ site_name }}</a>
    </div>
    <div class="site-slogan" aria-hidden='true'>{{ site_slogan }}</div>

    <div class="site-name" aria-hidden='true'>
      <a href="{{ path('<front>') }}" rel="home">{{ site_name }}</a>
    </div>
    <div class="site-slogan" aria-hidden='true'>{{ site_slogan }}</div>

    <div class="site-name" aria-hidden='true'>
      <a href="{{ path('<front>') }}" rel="home">{{ site_name }}</a>
    </div>
    <div class="site-slogan" aria-hidden='true'>{{ site_slogan }}</div>

    <div class="site-name" aria-hidden='true'>
      <a href="{{ path('<front>') }}" rel="home">{{ site_name }}</a>
    </div>
    <div class="site-slogan" aria-hidden='true'>{{ site_slogan }}</div>

Attached is how it appears:

selectable transparent text with readable background and aria-hidden="true"

Similar Threads

Similar Threads

Similar Threads