wcag/techniques/failures/F115.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
<!DOCTYPE html><html lang="en"><head><title>Failure of Success Criterion 1.4.13 Content on hover and focus when the pointer cannot be moved over the new popup content without that content closing</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 the pointer cannot be moved over the new popup content without that content closing</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 causes popup content to appear and the pointer cannot be moved over that new popup content without it automatically closing.</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. For users, especially those that use strong page magnification, this new popup content may not be fully visible. It is therefore important that they can move the pointer over it to access it fully.</p>
    <p>In some cases, popup content is designed in a way where it automatically closes as soon as the pointer leaver the target area of the trigger that caused the content to appear on hover.</p></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 next to the icon. Moving the pointer away form the icon and over the popup automatically closes the popup content.</li>
        <li><strong>Sub-menu:</strong> When the mouse pointer is moved over the entry in a horizontal menubar, a submenu appears. Moving the pointer away from the main menu item toward the submenu closes this submenu.</li>
      </ul>
   </section>
   <section id="tests"><h2>Tests</h2>
      <section class="procedure"><h3>Procedure</h3>
         <ul>
            <li>Using thepointer, explore page content, especially menus and icons like help or information icons. </li>
            <li>If popup content appears, move the pointer over the popup content</li>
       </ul>
      </section>
      <section class="results"><h3>Expected Results</h3>
         <ul>
            <li>If popup content disappears when moving the pointer over it then this failure condition applies and content fails the success criterion.</li>
         </ul>
      </section>
 </body>
</html>