wcag/techniques/failures/F114.html at e4aeaedf9e6ba88e33acc5f3e9c345d38d96358d · 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
<!DOCTYPE html><html lang="en"><head><title>Failure of Success Criterion 1.4.13 Content on hover and focus when content cannot be dismissed without moving the pointer  or the keyboard focus</title>
  <link rel="stylesheet" type="text/css" href="../../css/sources.css" class="remove">
</head>
<body>
  <h1>Failure of Success Criterion 1.4.13 Content on hover and focus when content cannot be dismissed without the pointer hover or the keyboard focus</h1>
    <section class="meta"><p class="id">ID: F114</p><p class="technology">Technology: failures</p><p class="type">Type: Failure</p></section><section id="applicability">
      <h2>When to Use</h2>
      <p>Applies when the user, by hovering over parts of content or by focusing an element via the keyboard, causes popup content to appear that cannot dismissed without moving the focus.</p>
   </section><section id="description">
      <h2>Description</h2>
      <p>Content elements may respond to receiving keyboard focus or pointer hover by inserting additional popup content that may now cover other parts of content. For users, especially those that use strong page magnification, this addition of popup content without activation can be disorienting in different ways:</p>
        <ul>
          <li>the new popup content may cover content that the user may want to access</li>
          <li>The new popup content may not appear fully in the magnified viewport, necessitating a move of the viewport by panning, tabbing, or pointer focussing in order to access the popup content</li>
        </ul>
     <p>Since popup content on hover and focus can unexpectedly cover page content that users may want to access, it is important that there is an easy way to dismiss such popup content. The most common method is for that is to press the ESC key. Another possible method is activating the pointer at the current location.</p>
   </section><section id="examples">
     <h2>Examples</h2>
      <ul>
         <li><strong>Custom tooltip:</strong> When focussing an icon with a question mark that is placed after an input field, a popup window with an explanation of the expected input appears that covers a part of the form. Pressing the ESC key or activating the pointer at the same position fails to close the submenu.</li>
        <li><strong>Sub-menu:</strong> When the mouse pointer is moved over the entry in a horizontal menubar, a submenu appears. Pressing the ESC key or activating the pointer at the same position fails to close the submenu.</li>
         <li><strong>Sub-menu over decorative content or whitespace:</strong> When the mouse pointer is moved over the entry in a horizontal menubar, a submenu appears over a decorative image or whitespace. Across different viewport widths, the submenu does not cover information. This is not a failure.</li>
      </ul>
   </section>
   <section id="tests"><h2>Tests</h2>
      <section class="procedure"><h3>Procedure</h3>
         <ol>
           <li>
             <ul>
                <li>Using the tab key, navigate through interactive content. </li>
                <li>If popup content appears that hides information, press the ESC key and check whether this closes the popup content</li>
            </ul>
          </li>
          <li>
             <ul>
                <li>Move the pointer over interactive elements. </li>
                <li>If popup content appears that hides information:
                  <ul>
                    <li>press the ESC key and check whether this closes the popup content</li>
                    <li>Activate the pointer device at the current pointer position</li>
                  </ul>
             </ul>
           </li>
         </ol>
      </section>
      <section class="results"><h3>Expected Results</h3>
         <ul>
            <li>If popup content on keyboard focus does not disappear when pressing ESC or popup content on hover does not disappear when pressing ESC or activating the pointer at the same position then this failure
                                    condition applies and content fails the success criterion.</li>
         </ul>
      </section>
 </body>
</html>