wcag/techniques/failures/F42.html at dec74fe376c7deecde1042fac6ff830fdc99440e · w3c/wcag · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
<!DOCTYPE html><html lang="en"><head><title>Failure of Success Criteria 1.3.1, 2.1.1, 2.1.3, or 4.1.2 when emulating links</title><link rel="stylesheet" type="text/css" href="../../css/editors.css" class="remove"></head><body><h1>Failure of Success Criteria 1.3.1, 2.1.1, 2.1.3, or 4.1.2 when emulating links</h1><section class="meta"><p class="id">ID: F42</p><p class="technology">Technology: failures</p><p class="type">Type: Failure</p></section><section id="applicability"><h2>When to Use</h2>
      <p>HTML</p>
   </section><section id="description"><h2>Description</h2>
      <p>This failure occurs when JavaScript event handlers are attached to elements
                        to emulate links. A link created in this manner cannot be tabbed to from the keyboard and does not gain keyboard focus like other controls and/or links.
            If scripting events are used to emulate links, user
                        agents including assistive technology may not be able to identify the links
                        in the content as links. They may be recognized as interactive controls but still not recognized as links.  Such elements do not appear in the links
                        list generated by user agents or assistive technology.</p>
                        <p><div class="note">It is possible to use the ARIA <code>role</code> attribute to identify an anonymous element as link control for assistive technologies. However, best practice for ARIA calls for <a href="https://www.w3.org/TR/aria-in-html/#rule1">making use of native elements whenever possible</a>, so the use of the <code>role</code> attribute to identify anonymous elements as links is not recommended.</div></p>
      <p>The <code>a</code> and <code>area</code>
                        elements are intended to mark up links.</p>
   </section><section id="examples"><h2>Examples</h2>
      <section class="example">
         <h3>Scripting a <code>span</code> element</h3>

            <p>Scripted event handling is added to a <code>span</code> element so
                                that it functions as a link when clicked with a mouse. Assistive
                                technology does not recognize this element as a link.</p>

<pre><code class="language-html">&lt;span onclick="location.href='newpage.html'"&gt;Fake link&lt;/span&gt;</code></pre>
      </section>
      <section class="example">
         <h3>Scripting an <code>img</code> element</h3>

            <p>Scripted event handling is added to an <code>img</code> element so
                                that it functions as a link when clicked with a mouse. Assistive
                                technology does not recognize this element as a link.</p>

<pre><code class="language-html">&lt;img src="go.gif" alt="go to the new page" onclick="location.href='newpage.html'"&gt;</code>
</pre>
      </section>
      <section class="example">
         <h3>Scripting an <code>img</code> element, with keyboard
                            support</h3>

            <p>Scripted event handling is added to an <code>img</code> element so
                                that it functions as a link. In this example, the link functionality
                                can be invoked with the mouse or via the Enter key if the user agent
                                includes the element in the tab chain. Nevertheless, the element
                                will not be recognized as a link.</p>

<pre><code class="language-javascript">function doNav(url){
  window.location.href = url;
}

function doKeyPress(url){
  //if the enter key was pressed
  if (window.event.type == "keypress" &amp;&amp; window.event.keyCode == 13){
    doNav(url);
  }
}</code></pre>

            <p>The markup for the image is:</p>

<pre><code class="language-html">&lt;p&gt;
  &lt;img src="bargain.jpg"
  tabindex="0"
  alt="View Bargains"
  onclick="doNav('viewbargains.html');"
  onkeypress="doKeyPress('viewbargains.html');"&gt;
&lt;/p&gt;</code></pre>
      </section>
      <section class="example">
         <h3>Scripting a <code>div</code> element</h3>

            <p>This example uses script to make a <code>div</code> element behave
                                like a link. Although the author has provided complete keyboard
                                access and separated the event handlers from the markup to enable
                                repurposing of the content, the <code>div</code> element will not be
                                recognized as a link by assistive technology.</p>

<pre><code class="language-javascript">window.onload = init;
function init(){
  var objAnchor = document.getElementById('linklike');

  objAnchor.onclick = function(event){return changeLocation(event,
   'surveyresults.html');};
      objAnchor.onkeypress = function(event){return changeLocation(event,
   'surveyresults.html');};
}

function changeLocation(objEvent, strLocation){
  var iKeyCode;

  if (objEvent &amp;&amp; objEvent.type == 'keypress'){
    if (objEvent.keyCode){
      iKeyCode = objEvent.keyCode;
    }
    else if (objEvent.which){
      iKeyCode = objEvent.which;
    }
  if (iKeyCode != 13 &amp;&amp; iKeyCode != 32){
    return true;
    }
  }
  window.location.href = strLocation;
}</code></pre>

            <p>The markup for the <code>div</code> element is:</p>

<pre><code class="language-html">&lt;div id="linklike"&gt;View the results of the survey.&lt;/div&gt;</code></pre>
      </section>
   </section><section id="tests"><h2>Tests</h2>
      <section class="procedure"><h3>Procedure</h3>
		<p>For all elements presented as links which use JavaScript event handlers to make the element emulate a link:</p>
         <ol>
            <li>Check if the programmatically determined role of the element is "link".</li>
            <li>Check if the emulated link can be activated using the keyboard.</li>
         </ol>
      </section>
      <section class="results"><h3>Expected Results</h3>
         <ul>
            <li>If check #1 is false then this failure condition applies and the content fails Success Criteria 1.3.1 Info and Relationships and 4.1.2 Name, Role, Value.
               If check #2 is false then this failure condition applies and the content fails Success Criteria 2.1.1 Keyboard and 2.1.3 Keyboard (No Exception).</li>
         </ul>
      </section>
   </section><section id="related"><h2>Related Techniques</h2><ul>
      <li><a href="../failures/F59">F59</a></li>
      <li><a href="../general/G115">G115</a></li>
   </ul></section><section id="resources"><h2>Resources</h2>

         <ul>
            <li>
                  <a href="https://www.w3.org/TR/wai-aria/">Accessible Rich Internet Applications (WAI-ARIA)</a>
               </li>
         </ul>

   </section>
</body></html>