Am .03.2015, 13:10 Uhr, schrieb Simon Pieters <sim...@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
