Re: Using CSS to insert Content

Hi all,

On 1 Apr 2015, at 16:23, Mike Elledge wrote:

> 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...

It is. And it is not. (Doh.)

CSS Generated Content is used to provide non-essential content that is 
dependent on a selector. The invention stemmed from a time where 
JavaScript was complicated and wouldn’t be used to do such things. 
Every content that is generated by JavaScript today is such 
non-essential content (assuming there is a non-JavaScript fallback).

One of the most useful usages for generated content are css counters. 
They allow to iterate through elements with a certain CSS selector. You 
could use CSS to prepend every H2 (in a book-like document) with 
“Chapter X:”.

This information can be considered non-essential. If CSS doesn’t load, 
the chapter name is still there. If a chapter is inserted before this 
chapter, the css counter automatically updates, which is a huge 
advantage from numbering the chapters by hand.

While the information is non-essential, it is certainly not purely 
presentational and is useful for everyone that can perceive it, which is 
the reason why this makes generated content such an in-between thing.

You can also insert images into websites using generated content but 
they can’t have an alt text.

I think having Generated Content in general is a good thing, for example 
a selector like a[href^=".pdf"]:after { content: " (PDF)"; } can easily 
mark PDF links, no matter where they are, no content author that can 
break this, no CMS can.

We should find accessibility use cases that we can bring to CSSWG that 
would help:
a) add alternative text to images generated with CSS
b) mark generated content as purely presentational (off by default to 
not break the web)

Cheers,
Eric

> Thanks.
> Mike
>
>
>
> On Wednesday, April 1, 2015 9:30 AM, Andrew Kirkpatrick 
> <akirkpat@adobe.com> wrote:
>
>
> #yiv4674636998 #yiv4674636998 -- _filtered #yiv4674636998 {panose-1:2 
> 4 5 3 5 4 6 3 2 4;} _filtered #yiv4674636998 
> {font-family:Calibri;panose-1:2 15 5 2 2 2 4 3 2 4;}#yiv4674636998 
> #yiv4674636998 p.yiv4674636998MsoNormal, #yiv4674636998 
> li.yiv4674636998MsoNormal, #yiv4674636998 div.yiv4674636998MsoNormal 
> {margin:0in;margin-bottom:.0001pt;font-size:12.0pt;}#yiv4674636998 
> a:link, #yiv4674636998 span.yiv4674636998MsoHyperlink 
> {color:blue;text-decoration:underline;}#yiv4674636998 a:visited, 
> #yiv4674636998 span.yiv4674636998MsoHyperlinkFollowed 
> {color:purple;text-decoration:underline;}#yiv4674636998 p 
> {margin-right:0in;margin-left:0in;font-size:12.0pt;}#yiv4674636998 
> span.yiv4674636998EmailStyle18 {color:#1F497D;}#yiv4674636998 
> span.yiv4674636998EmailStyle19 {color:windowtext;}#yiv4674636998 
> .yiv4674636998MsoChpDefault {font-size:10.0pt;} _filtered 
> #yiv4674636998 {margin:1.0in 1.0in 1.0in 1.0in;}#yiv4674636998 
> div.yiv4674636998WordSection1 {}#yiv4674636998 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   CanAdaptSolutions Inc. Tel:  613.235.4902 
> LinkedIn www.Can-Adapt.com      Adapting the web toall users 
>             Including those with disabilities    If you 
> are not the intended recipient, please review ourprivacy policy     
>  




--

Eric Eggert
Web Accessibility Specialist
Web Accessibility Initiative (WAI) at Wold Wide Web Consortium (W3C)

Received on Wednesday, 1 April 2015 14:56:58 UTC