RE: Using CSS to insert Content

I would be cautious in using this technique, and I would recommend keeping the original contract of CSS being about styling and not content.
Apparently there is browser support for CSS content to be communicated through accessibility APIs, but it is not clear how universal the support or how far it goes back.

Another issue for people using testing tools, is many testing tools will not validate content being supplied through CSS.  So for example you might get an error saying no label for a form control if the label content is defined as CSS content.

I have modified OpenAjax Evaluation library to look for CSS generated content and it can be found in tools like AInspector Sidebar:
http://ainspector.github.io/


So if people are using CSS content techniques for generating rendered content, I would appreciate any feedback on if AInspector Sidebar in detecting the content for satisfying accessibility rules.

Jon


From: Mike Elledge [mailto:melledge@yahoo.com]
Sent: Wednesday, April 01, 2015 9:24 AM
To: Andrew Kirkpatrick; David MacDonald; James Nurthen; WCAG
Subject: Re: Using CSS to insert Content

Hi All--

Is using CSS to inject content into a webpage appropriate? I'm sure others on this list remember the "separate content from presentation" mantra from years past.

This seems to violate a basic rule of web design...

Thanks.

Mike


On Wednesday, April 1, 2015 9:30 AM, Andrew Kirkpatrick <akirkpat@adobe.com<mailto:akirkpat@adobe.com>> wrote:

Thanks David,
Looking at the results I wonder whether the issue is with IE or with JAWS in how it gathers information from IE.  It looks like the UIA API supports the CSS generated text – is that the API that JAWS uses?  Seems possible that IE is doing the right thing and JAWS is using the DOM for that information.

Knowing that the generated content not working is an issue for IE, I wouldn’t rely on this mechanism to deliver substantial content, but I think that one of the main use cases we were talking about was to apply open and closing quotes to the quote.

Would we say that the quote is not properly indicating the relationship expressed in the presentation (SC1.3.1) for AT users?  Clearly if you said that IE11 was not part of your accessibility support statement then you’d have no issue, but what if you did include IE11?  In my example below I could make an argument that the fact that there is a quote is going to be obvious to a non-sighted user because of the “David said” lead in, but I’m sure I could make a counter-example also.  What do people think?

Sample code:
HTML <p>David said <q>CSS Generated Content has a problem in IE11</q>.</p>

Sample CSS:
q:lang(en) { quotes: '"' '"' "'" "'" }
q:before {content: open-quote;}
q:after {content: close-quote;}


From: David MacDonald [mailto:david100@sympatico.ca]
Sent: Wednesday, April 01, 2015 8:45 AM
To: James Nurthen; WCAG
Subject: Using CSS to insert Content

Hi James
As a follow up to our discussion yesterday about inserting content using <q> with the CSS fallback. It appears to be an IE problem.

http://davidmacd.com/blog/inserting-content-with-css-accessibility.html


Cheers,
David MacDonald

CanAdapt Solutions Inc.
Tel:  613.235.4902
LinkedIn<http://www.linkedin.com/in/davidmacdonald100>
www.Can-Adapt.com<http://www.can-adapt.com/>

  Adapting the web to all users
            Including those with disabilities

If you are not the intended recipient, please review our privacy policy<http://www.davidmacd.com/disclaimer.html>