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:
Attached is how it appears:1 Reply
the image shows the focus state and the text selected... which is slighlt off-base but functions.