Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Focus appearance: Removing AAA SC and renaming from minumum #2480

Merged
merged 3 commits into from
May 25, 2022
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
4 changes: 1 addition & 3 deletions guidelines/index.html
Original file line number Diff line number Diff line change
Expand Up @@ -276,12 +276,10 @@ <h3>Navigable</h3>

<section data-include="sc/20/section-headings.html" data-include-replace="true"></section>

<section data-include="sc/22/focus-appearance-minimum.html" data-include-replace="true"></section>
<section data-include="sc/22/focus-appearance.html" data-include-replace="true"></section>

<section data-include="sc/22/focus-not-obscured.html" data-include-replace="true"></section>

<section data-include="sc/22/focus-appearance-enhanced.html" data-include-replace="true"></section>

<section data-include="sc/22/page-break-navigation.html" data-include-replace="true"></section>

</section>
Expand Down
14 changes: 0 additions & 14 deletions guidelines/sc/22/focus-appearance-enhanced.html

This file was deleted.

Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
<section class="sc new">

<h4>Focus Appearance (Minimum)</h4>
<h4>Focus Appearance</h4>

<p class="conformance-level">AA</p>
<p class="change">New</p>
Expand Down
11 changes: 11 additions & 0 deletions guidelines/sc/22/focus-not-obscured-enhanced.html
Original file line number Diff line number Diff line change
@@ -0,0 +1,11 @@
<section class="sc new">

<h4>Focus Not Obscured (Enhanced)</h4>

<p class="conformance-level">AA</p>
<p class="change">New</p>

<p>When a <a>user interface component</a> receives keyboard focus, no part of the <a>focus indicator</a> is hidden by author-created content.</p>


</section>
2 changes: 1 addition & 1 deletion guidelines/sc/22/focus-not-obscured.html
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
<section class="sc new">

<h4>Focus Not obscured</h4>
<h4>Focus Not Obscured (Minimum)</h4>

<p class="conformance-level">AA</p>
<p class="change">New</p>
Expand Down
2 changes: 1 addition & 1 deletion techniques/css/C41.html
Original file line number Diff line number Diff line change
Expand Up @@ -66,7 +66,7 @@ <h3>Expected Results</h3>
<ul>
<li>#2 and #3 are true.</li>
</ul>
<p>The required change of contrast for <a href="../../understanding/22/focus-appearance-minimum.html">Focus Appearance Minimum</a> is 3:1, this technique also applies to <a href="../../understanding/22/focus-appearance-enhanced.html">Focus Appearance Enhanced</a>, which has a higher requirement of 4.5:1.</p>
<p>The required change of contrast for <a href="../../understanding/22/focus-appearance-minimum.html">Focus Appearance Minimum</a> is 3:1, this technique goes slightly beyond the minumum requirement.</p>
</section>
</section>
<section id="related">
Expand Down
2 changes: 1 addition & 1 deletion understanding/21/non-text-contrast.html
Original file line number Diff line number Diff line change
Expand Up @@ -121,7 +121,7 @@ <h4 id="related-focus">Relationship with Focus Visible</h4>
The external green indicator (#008000) does contrast with the white background (#FFF) which the component is on, <strong>passing</strong> the criterion. It does not need to contrast with both the component background and the component.
</figcaption>
</figure>
<p>Although the figure above with a dark outline passes non-text contrast, it is not a good indicator unless it is very thick. <span class="wcag22">There is a criterion in WCAG 2.2 that addresses this aspect, <a href="../22/focus-appearance-minimum.html">Focus Appearance (minimum)</a>.</span></p>
<p>Although the figure above with a dark outline passes non-text contrast, it is not a good indicator unless it is very thick. <span class="wcag22">There is a criterion in WCAG 2.2 that addresses this aspect, <a href="../22/focus-appearance-minimum.html">Focus Appearance</a>.</span></p>

<p>If an indicator is partly inside and partly outside the component, either part of the indicator could provide contrast.</p>

Expand Down
120 changes: 0 additions & 120 deletions understanding/22/focus-appearance-enhanced.html

This file was deleted.

Original file line number Diff line number Diff line change
Expand Up @@ -6,7 +6,7 @@
<link rel="stylesheet" type="text/css" href="../../css/editors.css" class="remove"></link>
</head>
<body>
<h1>Understanding Focus Appearance (Minimum)</h1>
<h1>Understanding Focus Appearance</h1>

<section id="status" class="advisement">
<h2>Status</h2>
Expand All @@ -16,7 +16,7 @@ <h2>Status</h2>

<section class="remove">

<h2>Focus Appearance (Minimum) Success Criterion text</h2>
<h2>Focus Appearance Success Criterion text</h2>
<blockquote>
<p class="conformance-level">AA</p>

Expand Down Expand Up @@ -68,10 +68,10 @@ <h2>Focus Appearance (Minimum) Success Criterion text</h2>

<section id="intent">

<h2>Intent of Focus Appearance (Minimum)</h2>
<h2>Intent of Focus Appearance</h2>


<p>The purpose of this Success Criterion (SC) is to ensure a keyboard focus indicator is clearly visible and discernible. Focus Appearance (Minimum) is closely related to <a href="https://www.w3.org/WAI/WCAG22/Understanding/focus-visible.html">2.4.7 Focus Visible</a> and <a href="https://www.w3.org/WAI/WCAG22/Understanding/non-text-contrast.html">1.4.11 Non-text Contrast</a>. Where Focus Visible merely requires a visible focus indicator, this SC defines a minimum level of visibility. Where Non-text Contrast requires a component to have adequate contrast against the background in each of its states, this SC requires sufficient contrast for the focus indicator itself.</p>
<p>The purpose of this Success Criterion (SC) is to ensure a keyboard focus indicator is clearly visible and discernible. Focus Appearance is closely related to <a href="https://www.w3.org/WAI/WCAG22/Understanding/focus-visible.html">2.4.7 Focus Visible</a> and <a href="https://www.w3.org/WAI/WCAG22/Understanding/non-text-contrast.html">1.4.11 Non-text Contrast</a>. Where Focus Visible merely requires a visible focus indicator, this SC defines a minimum level of visibility. Where Non-text Contrast requires a component to have adequate contrast against the background in each of its states, this SC requires sufficient contrast for the focus indicator itself.</p>

<p>For sighted people with mobility impairments who use a keyboard or keyboard-like device (such as a switch or voice input), knowing the current point of focus is very important. Visible focus must also meet the needs of users with low vision, who may also be keyboard-only users.</p>

Expand Down Expand Up @@ -469,7 +469,7 @@ <h2>Resources</h2>
</section>

<section id="techniques">
<h2>Techniques for Focus Appearance (Minimum)</h2>
<h2>Techniques for Focus Appearance</h2>


<section id="sufficient">
Expand Down
91 changes: 91 additions & 0 deletions understanding/22/focus-not-obscured-enhanced.html
Original file line number Diff line number Diff line change
@@ -0,0 +1,91 @@
<!DOCTYPE html>
<html lang="en" xml:lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta charset="UTF-8"></meta>
<title>Understanding Focus Not Obscured (Enhanced)</title>
<link rel="stylesheet" type="text/css" href="../../css/editors.css" class="remove"></link>
</head>
<body>
<h1>Understanding Focus Not Obscured (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 Not Obscured Success Criterion text</h2>
<blockquote>
<p>When a <a>user interface component</a> receives keyboard focus, no part of the <a>focus indicator</a> is hidden by author-created content.</p>
</blockquote>
</section>

<section id="intent">

<h2>Intent of Focus Not Obscured (Enhanced)</h2>

<p>The purpose of this Success Criterion is to ensure that a component with keyboard focus is visible. This criterion is closely related to <a href="./focus-not-obscured.html">Focus Not Obscured (Minimum)</a> but requires that the whole of the component is visible.</p>

</section>

<section id="benefits">
<h2>Benefits of Focus Not Obscured (Enhanced)</h2>

<ul>
<li>This Success Criterion helps anyone who relies on the keyboard to operate the page by letting them visually determine the component on which keyboard operations will interact at any point in time.</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 Not Obscured (Enhanced)</h2>

<ul>
<li>A page has a sticky footer (attached to the bottom of the vieport). When tabbing down the page the focused item is not overlapped by the footer at all.</li>
</ul>

</section>

<section id="resources">
<h2>Resources</h2>

</section>


<section id="techniques">
<h2>Techniques for Focus Not Obscured (Enhanced)</h2>


<section id="sufficient">
<h3>Sufficient Techniques</h3>


<ol>
<li>
CSS: Using scroll-padding to ensure a sticky header does not obscure the focused item (Potential future technique).
</li>
</ol>

</section>

<section id="advisory">
<h3>Additional Techniques (Advisory)</h3>

</section>

<section id="failure">
<h3>Failures</h3>
<ol>
<li>

</li>
</ol>
</section>

</section>

</body>
</html>