Re: Adaptive Image Element Proposal

Interesting work, Laura.

Though it's unrelated to the feature you're discussing,  I wanted to note that the demo page currently loads two images in most environments, as browsers will prefetch the fallback img element. The picturefill project readme has an example of how to avoid this, by simply wrapping the non-js fallback image in a noscript element. 

Anyway, please carry on with the much more interesting work!

Scott


On Sep 11, 2012, at 6:23 AM, Laura Carlson wrote:

> Hi Leif and all,
> 
> I put together a test of longdesc for responsive images with a
> variation of Scott Jehl's Picture Fill:
> http://www.d.umn.edu/~lcarlson/research/scottjehl-picturefill/index.html
> 
> Test Results:
> Reveals and works correctly at all sizes from small to extra large
> (e.g., opens description page
> http://www.d.umn.edu/~lcarlson/research/scottjehl-picturefill/external/carvingdesc.html
> when activated) in:
> 
> * JAWS With Internet Explorer (Testing by Gez Lemon)
> * Internet Explorer via alert and link with Jim Thatcher's favelet
> (Testing by Gez Lemon)
> I tested the following:
> * iCab via native contextual menu
> * Opera via native  contextual menu
> * Opera via Chaals McCathieNevile's TellMeMore extension
> * Firefox via contextual menu with Patrick's longdesc extension
> * Firefox via link with Anthony's longdesk extension
> * Safari via alert and link with Jim Thatcher's favelet
> * Chrome via alert and link with Jim Thatcher's favelet
> http://www.d.umn.edu/~lcarlson/research/scottjehl-picturefill/index.html#results
> 
> I uploaded screen shots to the Wiki
> 
> Opera
> http://www.w3.org/html/wg/wiki/images/3/3d/Operasmall.png
> http://www.w3.org/html/wg/wiki/images/1/12/Operamedium.png
> http://www.w3.org/html/wg/wiki/images/e/e7/Operalarge.png
> http://www.w3.org/html/wg/wiki/images/2/2d/Operaextralarge.png
> 
> iCab
> http://www.w3.org/html/wg/wiki/images/8/8d/Icabsmall.png
> http://www.w3.org/html/wg/wiki/images/d/da/Icabmedium.png
> http://www.w3.org/html/wg/wiki/images/a/a7/Icablarge.png
> http://www.w3.org/html/wg/wiki/images/3/37/Icabextralarge.png
> 
> FireFox with longdesc
> http://www.w3.org/html/wg/wiki/images/b/ba/Longdescsmall.png
> http://www.w3.org/html/wg/wiki/images/4/46/Longdescmedium.png
> http://www.w3.org/html/wg/wiki/images/3/32/Longdesclarge.png
> http://www.w3.org/html/wg/wiki/images/8/8f/Longdescextralarge.png
> 
> FireFox with longdesk
> http://www.w3.org/html/wg/wiki/images/c/cc/Longdesksmall.png
> http://www.w3.org/html/wg/wiki/images/e/e7/Longdeskmedium.png
> http://www.w3.org/html/wg/wiki/images/e/ec/Longdesklarge.png
> http://www.w3.org/html/wg/wiki/images/0/05/Longdeskextralarge.png
> 
> Chrome
> http://www.w3.org/html/wg/wiki/images/9/9e/Chromesmall.png
> http://www.w3.org/html/wg/wiki/images/5/58/Chromemedium.png
> http://www.w3.org/html/wg/wiki/images/f/fd/Chromelarge.png
> http://www.w3.org/html/wg/wiki/images/5/5d/Chromeextralarge.png
> 
> Safari
> http://www.w3.org/html/wg/wiki/images/2/23/Safarismall.png
> http://www.w3.org/html/wg/wiki/images/f/f5/Safarimedium.png
> http://www.w3.org/html/wg/wiki/images/2/29/Safarilarge.png
> http://www.w3.org/html/wg/wiki/images/2/24/Safariextralarge.png
> 
> Leif, I also checked your test page:
> http://malform.no/testing/a-demo-of/picture-element-accessible-longdesc/
> The images on this page do not seem to be responsive images but static
> images. Anyway my results of that testing:
> 
> iCab Native
> Control: Contextual menu works
> Test 1: Contextual menu doesn't work
> Test 2: Contextual menu works
> 
> Opera Native
> Control: Contextual menu works
> Test 1: Contextual menu doesn't work
> Test 2: Contextual menu works
> 
> Firefox/w Patrick's longdesc extension
> Control: Contextual menu works
> Test 1: Contextual menu doesn't work
> Test 2: Contextual menu works
> 
> Best Regards,
> Laura
> 
> On Fri, Sep 7, 2012 at 7:24 PM, Leif Halvard Silli
> <xn--mlform-iua@xn--mlform-iua.no> wrote:
>> Laura Carlson, Fri, 7 Sep 2012 17:54:27 -0500:
>> 
>>>> <picture>
>>>>  <img src=file alt=text longdesc=description.url >
>>>> </picture>
>>>> 
>>>> QUESTION: How would users of the equipment listed on your
>>>>          research page access that longdesc?
>>>>  ANSWER: It would be broken in some of them...
>>>> 
>>>> Browsers: I believe it would not work in a single one of the browsers
>>>>          that you list. E.g. it would not work in iCab. Why not?
>>>>          Because you cannot access the context menu for an image
>>>>          that is hidden behind another element.
>>> 
>>> This is incorrect Leif. It seems to work in all of them that I tested.
>>> 
>>> Here is a test page:
>>> http://www.d.umn.edu/~lcarlson/research/constriants/picture-test.html
>> 
>> When your message arrived, it was 3,5 hours since my reply to Adrian,
>> where I included links to the <picture> test upon which I based the
>> above claims. [*] But there is nothing in your message that signals
>> that you or Geez have seen or evaluated that test page. So I am gonna
>> assume that you deemed me incorrect without having checked my test page.
>> 
>> |*] http://lists.w3.org/Archives/Public/public-html/2012Sep/0064
>> 
>> I checked your test page:
>> 
>> (1) There is no responsive image  - or polyfill features that are
>>    typical for such images -  in that test - it is just an
>>    <img> with a picture wrapper around. The picture wrapper
>>    does not contain any image (via CSS) like the responsive
>>    image polyfills always do. Obviously, in a picture polyfill
>>    the picture image would (normally) cover the image of the img
>>    element, which in turns makes the img inaccessible for
>>    contextual menu access.
>> 
>> (2) To insinuate that I said that an unstyled <picture> element
>>    would create anymore problems than an unstyled <div> or <span>
>>    really isn't very helpful.
>> 
>> From my perspective, in its current form, your test page does not
>> enlighten the problem with contextual access to longdesc when the <img>
>> is behind another image.  Therefore, we can *not* have a debate of that
>> problem based on that page as it stands. The only value I see it in it
>> is that it demonstrates that support for @longdesc on the <img> element
>> is alive and kicking.
>> 
>> I really have a hard time understanding why it is so hard to admit
>> that, given a polyfill technique for a responsive image that bases
>> itself on <video> elemen model, then special care needs to be taken if
>> one wants the child element's longdesc attribute to be accessible to
>> users of browsers with contextual menu access to the longdesc link.
>> Yeah, the only way to completely avoid that problem would be by
>> canceling the <video> element model and instead go for a model were we
>> extends the very <img> element with more attributes and more CSS - a la
>> what Aaron demoed:
>> 
>> http://blog.easy-designs.net/archives/2012/04/16/iir-redux/
>> 
>> But as for responsive image techniques that are more a la the <video>
>> element, then here are some article - it is these kinds of polyfill
>> techniques that needs to be checked with regard to longdesc
>> accessibility
>> 
>> http://csswizardry.com/2011/07/responsive-images-right-now/
>> https://github.com/scottjehl/picturefill
>> http://nicolasgallagher.com/responsive-images-using-css3/
>> http://css-tricks.com/which-responsive-images-solution-should-you-use/
>> 
>> And my test page I notified you about, do try to check the longdesc
>> accessibility for that kind of polyfill:
>> 
>> http://malform.no/testing/a-demo-of/picture-element-accessible-longdesc/
>> --
>> leif halvard silli
> 
> 
> -- 
> Laura L. Carlson
> 
>

Received on Tuesday, 11 September 2012 14:16:12 UTC