W3C home > Mailing lists > Public > whatwg@whatwg.org > March 2015

Re: [whatwg] Responsive image maps

From: Martin Janecke <whatwg.org@prlbr.com>
Date: Fri, 20 Mar 2015 20:22:28 +0100
To: whatwg@whatwg.org
Message-ID: <op.xvs9fqcdwnok4b@localhost>
Am .03.2015, 13:10 Uhr, schrieb Simon Pieters <simonp@opera.com>:

> Please leave out syntax proposals for now. What I think is needed first  
> to drive this forward is:
>
> * Use cases. Why do you need this?

In general it's needed to allow geometric areas on an image to be  
associated with hyperlinks – that's what  
https://html.spec.whatwg.org/multipage/embedded-content.html#image-map  
says – and to associate areas on an image with tooltips. I've used this to  
name objects in a drawing (think of helping children or foreigners learn  
words for things displayed in an image). I've also packed small versions  
of photographs with different aspect ratios nicely aligned in a single  
preview image file and used an image map to link those previews with  
bigger sized photographs  
(https://prlbr.de/2014/wanderung-wanzer-wittenberge/). I've seen Wikipedia  
link objects in photographs and paintings (star constellations, people)  
with active image areas. It's also used for site navigation with fancy  
design.

Those are use cases for image maps. Having them work on different screen  
sizes, e.g. on smartphones and desktop screens, is the main use case for  
making them responsive.

> * More examples of pages that work around the lack of this feature.

Here's a Wordpress plugin actively used on 7000+ sites:  
https://wordpress.org/plugins/responsive-image-maps/

Recently I've modified my personal website to be mobile-friendly – except  
for all the pages that use image maps with differently shaped active  
areas, because I didn't have a nice solution for these. That's not an  
example for a work-around of course, but an example for demand for such a  
feature.

Here's a bunch of stackoverflow questions showing more demand:
http://stackoverflow.com/questions/1563299/recalculate-image-map-after-window-resize
http://stackoverflow.com/questions/7844399/responsive-image-map
http://stackoverflow.com/questions/7943003/dynamically-resizing-image-maps
http://stackoverflow.com/questions/12214373/image-mapping-responsive-design
http://stackoverflow.com/questions/13321067/dynamically-resizing-image-maps-and-images
http://stackoverflow.com/questions/20058971/dynamically-resizing-image-maps-and-images-maphilight-min-js
http://stackoverflow.com/questions/23752408/resizing-image-maps-containing-circles
http://stackoverflow.com/questions/25806090/how-to-detect-and-change-polygon-shape-co-ordinates-in-image-to-be-responsive
http://stackoverflow.com/questions/26298771/how-would-i-create-a-dynamic-hit-zone-that-changes-when-resizing-or-moving-the
http://stackoverflow.com/questions/26552283/html-image-map-areas-responsiveness

> * Why are alternatives like CSS-positioned <a> links […] not better?

Unlike <a> elements, <area>s in an image map can be shaped as a circle or  
as an author-defined polygon. That's essential when describing parts of  
certain images.

> * Why are alternatives like […] SVG not better?

I didn't know SVG could be used for this. This is new to me, so I'm not  
sure yet, but it looks quite good. Should the outcome of this discussion  
be that SVG is good enough to solve all use cases and that image maps are  
not enhanced, I'd suggest adding a hint to SVGs as a note in the image map  
section of the HTML spec.

However, since image maps have been an integral part of HTML since version  
3.2 and not been deprecated in favor of a better alternative yet, it might  
still be a straightforward solution to enhance them. Responsive image maps  
would be backwards compatible to all non-graphical clients that support at  
least HTML 3.2 such as Lynx, various bots and presumably most screen  
readers. Accessibility is already solved for image maps.

What are the accessibility implications of using SVGs? In an image map, an  
<area> element used as a link must have an @alt attribute providing a link  
text. It seems that an SVG could use the <desc> element for that purpose,  
but it isn't mandatory. Is it understood as link text by screen readers?  
In case it isn't: do screen reader vendors plan to parse SVGs and make  
(links in) them accessible in the future? What about search engines?  
Do/will they handle hyperlinks in SVGs like <a> and <area> hyperlinks in  
HTML?

Martin
Received on Friday, 20 March 2015 19:22:57 UTC

This archive was generated by hypermail 2.4.0 : Wednesday, 22 January 2020 17:00:29 UTC