Kevin Powell - Community•7mo ago

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; 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' would be enough to exclude it from contrast tests, but it seems not. I believe 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>

Attached is how it appears:

1 Reply

Jacord•7mo ago

the image shows the focus state and the text selected... which is slighlt off-base but functions.

Gaming

Programming

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