[css3-color][css-compositing][css-masking][filter-effects] Effect on focus ring


While working on Filter Effects, I realized that the specifications CSS3 Color, CSS Compositing, CSS Masking and Filter Effects mention that they affect all painting layers of an element. This of course include background, border, content and would also include the outline.

A focus ring is drawn on selected elements (i.e setting ’tabindex’ attribute on an element and tab to it). The focus ring is necessary for accessibility reasons.

All the graphical effects (‘mix-blend-mode’, ‘clip’, ‘mask’, ‘mask-box-image’, ‘opacity’, ‘clip-path') seem to influence the focus ring on UAs today (tested on WebKit, Blink Gecko).

Some specification parts suggest that the ‘outline’ property can be used to style a focus (:focus { outline: …} ). I am not sure if ‘outline’ is really responsible for the focus ring. Looking at the visual output of the property it could very well be.

I start to wonder if that is really the desired effect and what it means to accessibility if the focus ring gets transparent, blurred, clipped or blended with the back drop.

I see the burden to implementers to change the current behavior. On the other hand it feels like all these effects should NOT have any influence on color or density of the focus ring.


Received on Monday, 4 November 2013 09:10:00 UTC