cssaccessibilityvendor-prefix

Does CSS -webkit-tap-highlight-color: transparent; have accessibility implications?


Does this CSS code have negative accessibility implications?

-webkit-tap-highlight-color: transparent;

I'm not an expert but I understand some people have difficulty seeing certain colors and I'm just bothered that if I remove the type highlight color it may affect them(I want to remove it because it makes the UI look weird when tapped).

I have committed to writing my web pages as accessible as possible so before I disable anything need to know the implications, and yes I'm new to this.


Solution

  • There are no accessibility requirements in WCAG that require the use of -webkit-tap-highlight-color.

    If you don't have cursor:pointer set, then you can remove -webkit-tap-highlight-color and it won't affect anything.

    -webkit-tap-highlight-color is commonly used to override the default styles of webkit browsers (Chrome, Safari, Edge) when an element that has cursor:pointer is tapped from a mobile device.

    The default behavior is that any element (or containing element) that has cursor:pointer explicitly set and is clicked will flash blue momentarily. You can bypass the entire issue by ensuring that cursor:pointer is not set.