Skip to content
This repository has been archived by the owner on Jul 30, 2019. It is now read-only.

Commit

Permalink
tweaks for ismap (#1322)
Browse files Browse the repository at this point in the history
* tweaks for ismap

Editorial - but includes some accessibility advice

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

* fix typpo

thanks @LJWatson
  • Loading branch information
chaals authored and LJWatson committed Apr 9, 2018
1 parent 00cb85e commit 77ec30e
Show file tree
Hide file tree
Showing 3 changed files with 22 additions and 16 deletions.
1 change: 1 addition & 0 deletions sections/acknowledgements.include
Original file line number Diff line number Diff line change
Expand Up @@ -73,6 +73,7 @@
Léonie Watson,
Maciej Stachowiak,
Mark Svancarek,
Martin Janecke,
Marvin Woo 吴秀诚,
Mike™ Smith,
Mike West,
Expand Down
35 changes: 20 additions & 15 deletions sections/semantics-embedded-content.include
Original file line number Diff line number Diff line change
Expand Up @@ -710,7 +710,7 @@
<dd><code>sizes</code> - Image sizes between breakpoints</dd>
<dd><code>crossorigin</code> - How the element handles crossorigin requests</dd>
<dd><code>usemap</code> - Name of <a>image map</a> to use </dd>
<dd><code>ismap</code> - Whether the image is a server-side image map</dd>
<dd><{img/ismap}> - Whether the image is a server-side image map</dd>
<dd><code>width</code> - Horizontal dimension</dd>
<dd><code>height</code> - Vertical dimension</dd>
<dd><code>referrerpolicy</code> - <a>Referrer policy</a> for <a>fetches</a> initiated by the element</dd>
Expand Down Expand Up @@ -2301,27 +2301,32 @@
map. This affects how events are handled on the corresponding
<{a}> element.

<p class="warning">Users who do not have a pointing device, or who cannot see
the image referred to will generally not be able to use a server-side image map successfully.
Authors should use another mechanism, such as a "client-side" <a>image map</a>
made using the <{img/usemap}> attribute, wherever possible.</p>

The <code>ismap</code> attribute is a
<a>boolean attribute</a>. The attribute must not be specified
on an element that does not have an ancestor <{a}> element
with an <{a/href}> attribute.

<div class="example">
In this example the user is asked to identify a person in an image by
clicking on it. The server could respond to a click by confirming the
correct position or by asking the user to try again.

<xmp highlight="html">
<figure>
<a href="solve.html">
<img src="zoo.jpg" ismap alt="Animals and people at the zoo, among them Wally with striped clothes">
</a>
<figcaption>Wheres Wally? Click on him!</figcaption>
<figcaption>Where's Wally? Click on him!</figcaption>
</figure>
</xmp>
The coordinates where the user clicks are send to the server with the
request for the resource referenced by the <{a}> elements

The coordinates where the user clicks are sent to the server with the
request for the resource referenced by the <{a}> element's
<code>href</code> attribute.
</div>

Expand All @@ -2332,7 +2337,7 @@
</p>

<p class="note">
The <code>usemap</code> and <code>ismap</code> attributes can result in confusing behavior
The <code>usemap</code> and <{img/ismap}> attributes can result in confusing behavior
when used together with <{source}> elements with the <code>media</code> attribute specified
in a <{picture}> element.
</p>
Expand All @@ -2349,7 +2354,7 @@
<a>reflect</a> the <code>usemap</code> content attribute.

The <dfn attribute for="HTMLImageElement"><code>isMap</code></dfn> IDL attribute must <a>reflect</a>
the <code>ismap</code> content attribute.
the <{img/ismap}> content attribute.

The <dfn attribute for="HTMLImageElement"><code>referrerPolicy</code></dfn> IDL attribute must
<a>reflect</a> the <{img/referrerpolicy}> content attribute, <a>limited to only known values</a>.
Expand Down Expand Up @@ -4749,7 +4754,7 @@ attribute's value is a type that a <a>plugin</a> supports, then the value of the
<p><a href="new.svg" target="svgobject">Check out the new icon</a>!</p>
</xmp>

<p class="warning">If a <a>nested browsing context</a> is not created, e.g. for security reasons or due to incorrect implementation of the <{object/name3}> attribute,
<p class="warning">If a <a>nested browsing context</a> is not created, e.g. for security reasons or due to incorrect implementation of the <{object/name3}> attribute,
the <code>target</code> attribute in this example will instead <a>create a new browsing context</a> - typically a new tab - whose <a>browsing context name</a> is the attribute's value, and the resource that the link references will be loaded there.</p>

</div>
Expand Down Expand Up @@ -5741,11 +5746,11 @@ zero or more <{track}> elements, then
should not show this content to the user; it is intended for older Web browsers which do
not support <{audio}>, so that legacy audio plugins can be tried, or to show text to the
users of these older browsers informing them of how to access the audio contents.

<div class="example">
In this example, a browser which does not support inline audio can present a download link to
the user.

<xmp highlight="html">
<audio src="music.ogg" controls>
Your browser does not support the audio element.
Expand Down Expand Up @@ -5806,14 +5811,14 @@ zero or more <{track}> elements, then
constructor is found.

</div>

<div class="example">
This example shows how different audio files can be offered to the browser. If the browser does
not support a specific codec, it can play one of the alternative files offered.

This example also shows the boolean <code>controls</code>, <code>autoplay</code>, and
<code>loop</code> attributes.

<xmp highlight="html">
<audio controls autoplay loop>
<source src="music.ogg" type="audio/ogg; codecs=vorbis"/>
Expand Down
2 changes: 1 addition & 1 deletion sections/semantics-textlevel.include
Original file line number Diff line number Diff line change
Expand Up @@ -148,7 +148,7 @@
exception.
2. Abort these steps without following the hyperlink.
3. If the target of the <code>click</code> event is an <{img}> element with an
<code>ismap</code> attribute specified, then server-side image map processing must be
<{img/ismap}> attribute specified, then server-side image map processing must be
performed, as follows:
1. If the <code>click</code> event was a real pointing-device-triggered <code>click</code>
event on the <{img}> element, then let |x| be the distance in CSS
Expand Down

0 comments on commit 77ec30e

Please sign in to comment.