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

Update G195 - removal of last line of test (low contrast OK if focus ring > 2px thick) #3686

Open
wants to merge 12 commits into
base: main
Choose a base branch
from
19 changes: 10 additions & 9 deletions techniques/general/G195.html
Original file line number Diff line number Diff line change
Expand Up @@ -2,7 +2,7 @@
<p>Generally applicable.</p>
</section><section id="description"><h2>Description</h2>
<p>The objective of this technique is enhance the focus indicator in the browser, by creating a visible one in the content. The default focus indicator in some browsers is a thin, dotted, black line. It can be difficult to see the line when it is around a form element which already has an outline, when the focused element is inside a table cell, when the focused element is very small, or when the background of the page is a dark color. Some browsers use a pale blue outline, which can be difficult to see on some backgrounds.</p>
<p>In this technique, when the user places focus on an element using the keyboard, the application makes that focus more visible, using a combination of a highly contrasting color, a thick line, and other visual indicators such as a glow.</p>
<p>In this technique, when the user places focus on an element using the keyboard, the application makes that focus more visible, using a combination of a highly contrasting color, a thick line, and optionally other visual indicators such as a glow.</p>
</section>
<section id="examples">
<h2>Examples</h2>
Expand All @@ -19,23 +19,24 @@ <h3>Form Elements</h3>
<section class="example">
<h3>Menus</h3>

<p>A Web page includes an interactive menu with sub-menus. A user can move focus in the menu using the arrow keys. As focus moves, the currently focused menu item changes its background to a different color, which has a 3:1 contrast ratio with the surrounding items and a 4.5:1 contrast ratio with its own text.</p>
<p>A Web page includes an interactive menu with sub-menus. A user can move focus in the menu using the arrow keys. As focus moves, the currently focused menu item changes its background to a different color, which has a 3:1 contrast ratio with the surrounding menu items and a 4.5:1 contrast ratio with its own text.</p>

</section>
</section><section id="tests"><h2>Tests</h2>
<section class="procedure"><h3>Procedure</h3>
<p>For each user interface component on the page that should receive keyboard focus:</p>
<p>For each user interface component on the page whose focus indicator or background color has been modified by the author:</p>
<ol>
<li>Navigate to the component and check that it has a visible focus indicator.</li>
<li>Check that the focus indicator area is at least the size of a 1 CSS px border around the component.</li>
<li>If the focus indicator area is not at least equal to the area of a 1 CSS pixel border, check that it has an area of at least 4 CSS pixels along the shortest side of the component.</li>
<li>Check that the change of contrast of the indicator between focused and unfocused states has a ratio of 3:1 or more for the minimum focus indicator area.</li>
<li>If the focus indicator does not have 3:1 contrast ratio with its adjacent colors, check that it is at least 2px thick.</li>
<li>Navigate to the component and check that it has a visible focus indicator that contrasts at least 3:1 against adjacent colors.</li>
<li>Check that the focus indicator includes an area that meets all the following:</li>
<ol>
<li>is at least as large as a 2 CSS pixel thick perimeter of the unfocused component or sub-component.</li>
<li>has a contrast ratio of at least 3:1 between the same pixels in the focused and unfocused states.</li>
</ol>
</ol>
</section>
<section class="results"><h3>Expected Results</h3>
<ul>
<li>Checks #2, #4, and #5 are true.</li>
<li>All checks are true.</li>
</ul>
</section>
</section><section id="related"><h2>Related Techniques</h2><ul>
Expand Down