/
focus-appearance-enhanced.html
121 lines (93 loc) · 5.46 KB
/
focus-appearance-enhanced.html
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
<!DOCTYPE html>
<html lang="en" xml:lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta charset="UTF-8"></meta>
<title>Understanding Focus Appearance (Enhanced)</title>
<link rel="stylesheet" type="text/css" href="../../css/editors.css" class="remove"></link>
</head>
<body>
<h1>Understanding Focus Appearance (Enhanced)</h1>
<section id="status" class="advisement">
<h2>Status</h2>
<p>This understanding document is part of the <a href="https://w3c.github.io/wcag/guidelines/22/"><strong>draft</strong> WCAG 2.2 content</a>. It may change or be removed before the final WCAG 2.2 is published.</p>
</section>
<section class="remove">
<h2>Focus Appearance (Enhanced) Success Criteria text</h2>
<blockquote>
<h4>Focus Appearance (Enhanced)</h4>
<p>When <a>user interface components</a> have keyboard focus, all of the following are true:</p>
<ul>
<li><strong>Minimum area:</strong> The <a>focus indicator area</a> is double the area of a 1 <a>CSS pixel</a> perimeter of the unfocused component;</li>
<li><strong>Change of contrast:</strong> The pixels making up the minimum focus indicator area achieve at least a 4.5:1 contrast ratio between their colors in the focused and unfocused states.</li>
<li><strong>Not obscured:</strong> No part of the focus indicator is hidden by author-created content.</li>
</ul>
</blockquote>
</section>
<section id="intent">
<h2>Intent of Focus Appearance (Enhanced)</h2>
<p>The purpose of this success criterion is to ensure a keyboard focus indicator is highly visible. This criterion is closely related to <a href="./focus-appearance-minimum.html">Success Criterion 2.4.11 Focus Appearance (Minimum)</a> and defines a higher level of visibility for the focus indicator.</p>
<p>In relation to Focus Visible (enhanced) this criterion:</p>
<ul>
<li>Expands the minimum area to 2 CSS pixels around the perimeter.</li>
<li>Increases the change of contrast to 4.5:1.</li>
<li>Does not allow for any part of the element to be obscured by other content.</li>
</ul>
<p>The other aspects of the success criterion are the same as Focus Visible (Minimum).</p>
</section>
<section id="benefits">
<h2>Benefits of Focus Appearance (Enhanced)</h2>
<p>The benefits of this success criterion are similar to Focus Appearance (Minimum).</p>
<ul>
<li>Letting anyone who relies on the keyboard to operate the page by enabling them to visually determine the component on which keyboard operations will interact at any point in time.</li>
<li>People with low vision are better able to follow a highly visible focus indicator.</li>
<li>People with attention limitations, short term memory limitations, or limitations in executive processes benefit by being able to discover where the focus is located.</li>
</ul>
</section>
<section id="examples">
<h2>Examples of Focus Visible</h2>
<p>The examples of this success criterion are similar to Focus Appearance (Minimum).</p>
<ul>
<li>When links receive focus, an outline is displayed around the link that contrasts with the background adjacent to the link.</li>
<li>When buttons receive focus, and outline is displayed within the button (around the text) that contrasts with the button’s background.</li>
<li>When text fields receive focus, an outline is displayed around the field, indicating that the input has focus.</li>
<li>When radio buttons receive focus, an outline is displayed around the control, indicating that the input has focus.</li>
</ul>
</section>
<section id="techniques">
<h2>Techniques for Focus Appearance (Enhanced)</h2>
<section id="sufficient">
<h3>Sufficient Techniques</h3>
<p>@@@ Create a new techniques based on:</p>
<ol>
<li>
<a href="https://www.w3.org/WAI/WCAG21/Techniques/general/G195" class="general">Using an author-supplied, highly visible focus indicator</a>
</li>
<li>
<a href="../../techniques/css/C40">Creating a two-color focus indicator to ensure sufficient contrast</a>
</li>
<li>
<a href="../../techniques/css/C41">Creating a contrasting focus indicator inside the component</a>
</li>
</ol>
</section>
<section id="advisory">
<h3>Additional Techniques (Advisory)</h3>
</section>
<section id="failure">
<h3>Failures</h3>
<ul>
<li>
<a href="https://www.w3.org/WAI/WCAG21/Techniques/failures/F78" class="failure">Failure due to styling element outlines and borders in a way that overrides or renders
non-visible the default visual focus indicator
</a>
</li>
<li>
<a href="https://www.w3.org/WAI/WCAG21/Techniques/failures/F55" class="failure">Failure of Success Criterion 2.1.1, 2.4.7, and 3.2.1 due to using script to remove
focus when focus is received
</a>
</li>
</ul>
</section>
</section>
</body>
</html>