tweaks for ismap

[chaals]

Editorial - but includes some accessibility advice

Thanks to @prlbr for the PR that made me notice these

[LJWatson]

"Cannnot" is mis-spelled.

[chaals]

fixed

[LJWatson]

@chaals do you have a test case for the guidance about people not using pointer devices and/or who are unable to see the image, being unable to use this variety of imagemaps?

[chaals]

@LJWatson I don't have a formal test case readily to hand. This was clearly noted in WCAG 1.0 (written when both kinds of image map were far more common) with checkpoints 1.2 and 9.1 specifically addressing the issue.

I think it is uncontroversial that people who cannot see an arbitrary image have difficulty moving a pointer to a specific area defined as a set of one or more X/Y coordinates. (It is possible, although generally more difficult than using an alternative like usemap and a client-side image map or an SVG, to help people do this successfully.)

A test case would be something like:

<p><img src="wm.jpg" alt="world map, sinusoidal projection, centred on 55ºN 25ºE" ismap width="100" height="100"><p>
<p>Click the countries in green to visit them</p>

[prlbr]

I think the advice is justified. Client-side image maps also have their caveats nowadays though – they may not really work with <picture> as expected as noted in https://w3c.github.io/html/semantics-embedded-content.html#element-attrdef-img-usemap and they don’t work as expected with images resized with CSS either. This has been discussed, but not solved, at whatwg and ResponsiveImagesCG.

Could we come up with an even better recommendation than using usemap in light of this? Client-side image maps can be made with embedded SVGs in a responsive way … But saying that may not be really helpful to readers either without a detailed explanation how image maps can be done (also for pixel graphics) with embedded SVGs.