Bug 15948 - <area> should be classified as "interactive content"
<area> should be classified as "interactive content"
Status: REOPENED
Product: HTML WG
Classification: Unclassified
Component: HTML5 spec
unspecified
PC All
: P2 major
: ---
Assigned To: Amcii777
HTML WG Bugzilla archive list
http://dev.w3.org/html5/spec/content-...
:
: 22956 (view as bug list)
Depends on:
Blocks:
  Show dependency treegraph
 
Reported: 2012-02-10 07:15 UTC by Leif Halvard Silli
Modified: 2015-02-04 02:56 UTC (History)
8 users (show)

See Also:


Attachments
Demo of how a <area> styled look like <a> (1.95 KB, text/html)
2012-02-10 07:15 UTC, Leif Halvard Silli
Details
HTML5 code for difference between images, shapes, pictures, canvas elements, maps, objects with no given or null field for image source in http. I could put an alt=" " but not necessary. What is the H (12.62 KB, text/plain)
2015-02-04 02:54 UTC, Amcii777
Details
HTML5 code for difference between images, shapes, pictures, canvas elements, maps, objects with no given or null field for image source in http. I could put an alt=" " but not necessary. What is the H (12.62 KB, text/plain)
2015-02-04 02:56 UTC, Amcii777
Details

Note You need to log in before you can comment on or make changes to this bug.
Description Leif Halvard Silli 2012-02-10 07:15:04 UTC
Created attachment 1076 [details]
Demo of how a <area> styled look like <a>

It is inconsistent:

* that <area> has 'link' role within the WAI ARIA section [1], 
* and yet the element isn't  listed as 'interactive content'. [2]

For example, a consequence of the current status is that it is conforming to place an <area> element inside an <a> element: 

      <a href=foo ><area href=foo ></a>

I don't rule out that it could make sense to nest <area> inside <a>. However, for the most part, it would only leads to trouble. For instance, screenreaders are likely to hear the same link announced twice.

But even if it can be justified to permit <area> inside <a>, the <area> should still be treated as interactive content, and instead a special exception to the rule which says that interactive content cannot be the child of an <a> should be made.

The justification for why <area> must be considered interactive content is that when the image of an image map does not display -  or otherwise when it is wanted, then one can make <area> visible via area{display:inline-block} and area:before{content:attar(alt)} etc. In that case, one can also navigate to the <area> link via tabulation or click it with the mouse and it reacts to :focus. In other words: It attains all the interactive features of <a>.

Demo of how a <area> styled look like <a>: http://tinyurl.com/7detoab 
(Or use the attached variant - if your browser does not support data URIs.)

[1] http://dev.w3.org/html5/spec/wai-aria.html#table-aria-strong
[2] http://dev.w3.org/html5/spec/content-models.html#interactive-content-0
Comment 1 contributor 2012-07-18 06:55:14 UTC
This bug was cloned to create bug 17821 as part of operation convergence.
Comment 2 steve faulkner 2013-02-11 10:24:49 UTC
EDITOR'S RESPONSE: This is an Editor's Response to your comment. If you are satisfied with this response, please change the state of this bug to CLOSED. If you have additional information and would like the editor to reconsider, please reopen this bug. If you would like to escalate the issue to the full HTML Working Group, please add the TrackerRequest keyword to this bug, and suggest title and text for the tracker issue; or you may create a tracker issue yourself, if you are able to do so. For more details, see this document:
   http://dev.w3.org/html5/decision-policy/decision-policy.html

Status: Rejected
Change Description: no spec change
Rationale: the intended use of <area> is to confer interactive regions on an object or img element not for the area element itself to be interactive content. Although you have shown that through use of CSS gymnastics:

html body map area,
html body map area:link

{
       display:inline-block!important;
         width:150px!important;
    }
   area:before { content:  "Area: " attr(alt); }
   area:link:before { content:  "Area: " attr(alt); }
area:visited:before { content:  "Area: " attr(alt); }
area {cursor:inherit;color:blue;}
* area{background:yellow!important;}
map area{background:orange!important;}
img map area, object map area { background:red!important;}
* img area,* object area { background:lime!important;}

it is possible to make an area element clickable in some browsers, I don't see the advantage to classifying it as interactive content. It is also possible to make any element clickable and actionable through the use of tabindex, but elements are classified according to their indended use. If you have evidence of a pattern of use for area being used in the wild asyou describe, feel free to provide such data.
Comment 3 Leif Halvard Silli 2013-08-15 19:11:37 UTC
*** Bug 22956 has been marked as a duplicate of this bug. ***
Comment 4 Giuseppe Pascale 2013-08-16 11:06:30 UTC
What you say above may be correct, but I still think that the point I made in the linked (duplicate) bug would benefit from some clarification, i.e.

why the section on interactive elements also includes the definition on interactive behavior and other related requirements? It let me think that elements that are interactive also have an activation behavior or at least that the elements with an activation behavior are a subset of the interactive ones.

If this is not the case (as <area> is not listed as interactive) would be at list valuable to limit the section on interactive elements to the given list and create another section dedicated to the "activation behavior"
Comment 5 Giuseppe Pascale 2013-08-16 11:09:25 UTC
I reopened this just to make sure it doesn't get lost, Sorry if this is not the right process.

If the editor think a separate file should be filed for the issue I raised, I can do that (but I note that my proposed is changed is mostly editorial, so maybe can be easily agreed here without a need to open another bug?)
Comment 6 Leif Halvard Silli 2013-08-16 12:23:12 UTC
(In reply to comment #4)
> What you say above may be correct, but I still think that the point I made
> in the linked (duplicate) bug would benefit from some clarification, i.e.
> 
> why the section on interactive elements also includes the definition on
> interactive behavior and other related requirements? It let me think that
> elements that are interactive also have an activation behavior or at least
> that the elements with an activation behavior are a subset of the
> interactive ones.

An <img> or <object> with the @usemap="foo" attribute set, is considered interactive, and such elements will reference a <map name="foo"> with designated <area> elements. As such, they are already described, or?

> If this is not the case (as <area> is not listed as interactive) would be at
> list valuable to limit the section on interactive elements to the given list
> and create another section dedicated to the "activation behavior"

That sounds like a good solution. In fact, HTML5 has become more and more fine grained when it comes to the categories and what they implly and do not imply. And I agree that it should probably be a separate bug.

By creating such a dedicated section for activation behavior, we would avoid mixing into the problem the (possible) *other* implications of categorizing <area> as interactive. 

(As an example of what we avoid touching: If <area> became classified as interactive, then, it would have some implications for which parent elements it could have as some interactive elements are not allowed to have interactive children.)
Comment 7 Amcii777 2015-02-04 02:52:34 UTC
Comment on attachment 1076 [details]
Demo of how a <area> styled look like <a>

HTML5 code for difference between images, shapes, pictures, canvas elements, maps, objects with no given or null field for image source in http. I could put an alt=" " but not necessary. What is the HTML rule on this object, picture of a shape for a logo at the head of the body or first header?
I am at a loss for both of our questions! Anyone have any knowledge on this.
Comment 8 Amcii777 2015-02-04 02:54:06 UTC
Created attachment 1570 [details]
HTML5 code for difference between images, shapes, pictures, canvas elements, maps, objects with no given or null field for image source in http. I could put an alt=" " but not necessary. What is the H

HTML5 code for difference between images, shapes, pictures, canvas elements, maps, objects with no given or null field for image source in http. I could put an alt=" " but not necessary. What is the HTML rule on this object, picture of a shape for a logo at the head of the body or first header?
No answers on either of our questions. Anyone have any insight/nowledge on these matters?
Comment 9 Amcii777 2015-02-04 02:56:39 UTC
Created attachment 1571 [details]
HTML5 code for difference between images, shapes, pictures, canvas elements, maps, objects with no given or null field for image source in http. I could put an alt=" " but not necessary. What is the H

HTML5 code for difference between images, shapes, pictures, canvas elements, maps, objects with no given or null field for image source in http. I could put an alt=" " but not necessary. What is the HTML rule on this object, picture of a shape for a logo at the head of the body or first header?