RE: Action 1387: CSS Borders and Backgrounds review

Hi Cynthia,

>> I would like to understand the status of work to make a high contrast media query a w3c spec.

Me too. :)

Regarding focus ring and related CSS properties:

There is definitely room for improvement. We need a commonly accepted CSS property syntax for the focus shape.
Currently major browsers differ considerably in number and kind of options for shape styling. For instance, Firefox allows for round :focus shapes, IE does not.

I consider this as quite a limitation for accessibility support in visual design. By principle, everything you can do with CSS3 borders should be also possible with the :focucs overlay ring. There may be some additional requirements/issues, though.

What is currently NOT possible IMHO are e.g. "edging" brackets like

[ focus ]

around an focused element.

For instance, inversion of colors based on background for the focus border may come in handy in some designs, in others it will be visually distracting.
Absolutely clever would be a CSS property that changes the color of the focus shape based on the background in a designer-controlled way. Say, for a blue background it can be orange, for a red background green and so on. In addition, care should be taken not to violate the WCAG2 minimum contrast values for the foreground-background ratio, not sure if this a simple algorithm can perform this always in a visually attractive way, since simple inversion is sometimes just ugly.

Best Regards
Stefan


From: Cynthia Shelly [mailto:cyns@microsoft.com]
Sent: Freitag, 7. März 2014 00:45
To: public-pfwg@w3.org
Subject: Action 1387: CSS Borders and Backgrounds review

https://www.w3.org/WAI/PF/Group/track/actions/1387

I've reviewed this spec, and it's not bad.  I have some minor concerns/ideas.  Does this look reasonable to send to the CSS working group as feedback?

There is a note about not using css background-image for accessibility reasons, which is well-written and gives the correct advice based on current technology.  However, due to performance impacts, many web developers will not be willing to switch to using <img> elements instead of background-image for all important graphics.  I would like to understand the status of work to make a high contrast media query a w3c spec.  Does this fall under CSS?  If not, where would it fall?  IE has a vendor-prefixed one, which we've been using with good results in Windows 8 apps and Microsoft websites.  http://msdn.microsoft.com/en-us/library/windows/apps/hh466205.aspx

My other question is about drawing focus rings.  I know this can be done with existing border properties and the :focus psudoclass, which is good.  It would be nice to have some discussion of this in the spec and an example.  A WCAG technique would also be good (there may be one).

It would also be interesting to look at whether a focus ring is a different type of border, that should be drawn in a different position or style by default, and how CSS based focus indicators interact with browser and OS focus indicators.  This is a feature request, and could wait until the next version.

I've marked the issue pending review and will close it once we've agreed on feedback to send to CSS.