search

epiphyt / embed-privacy

Embed Privacy prevents loading of embedded external content and allows your site visitors to opt-in.
https://epiph.yt/en/embed-privacy/
GNU General Public License v2.0
19 stars 12 forks source link

Transparent screen-reader button triggers WebAIM WAVE accessibility warning. Proposed fix: unset colors, use defaults. #205

Closed oldrup closed 10 months ago

oldrup commented 10 months ago

Bug/Problem

Hey! Nice plugin, thank you for sharing.

WebAIM WAVE does not like the transparent text/background of the hidden button used to trigger the overlay via keyboard and throws a contrast error:

image

The culprit appears to be that both the color and the background of that button, in its hidden state, is transparent image

The button is hidden by other means, including clipping and positioning:

image

So making the colors transparent, might not be necessary at all. Unsetting styling of the button text color using this css: image

Now WebAIM WAVE is happy:

image

Now I know, this doesn't affect the actual use of Embed Privacy with keyboard navigation and screen readers, but it's preferable not to have these false positives in a commonly used accessibility checker.

Steps to reproduce

Embed a video Run the page through https://wave.webaim.org/

Version

1.8.1

Link

https://oldrup.dk/en/more-speed-less-tracking-with-embed-privacy/

Environment info

No response

Code of Conduct

MatzeKitt commented 10 months ago

Hi @oldrup,

thank you for reporting! Embed Privacy relies solely on the class screen-reader-text, which is the recommended way for such buttons. All the CSS you mentioned comes from your theme. And while the primary part with hiding it by default is correct, it seems that it’s missing defining correct colors.

But by the way: it seems to me that the WebAIM check returns a false positive, here. The button is only displayed on focus and has proper colors in this state.

Bildschirmfoto 2024-01-30 um 20 37 43 Bildschirmfoto 2024-01-30 um 20 38 26

So to me, it doesn’t seem to be a real issue.

oldrup commented 10 months ago

Oh yeah, you are totally right. The correct colors for the :focus state are fine, and yes, WebAIM flags the "hidden" colors as having too low contrast, even though the button is completely hidden in its inactive state anyway.

I just enjoy an error-free report when possible.

Also true that the styling for the.screen-reader-text originates from my theme. Nice catch. Will take my request elsewhere ;)