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.

Sign up for GitHub

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

Jump to bottom

Understanding Focus Appearance CR3 updates #3259

Merged
merged 15 commits into from
Jul 11, 2023
Merged

Understanding Focus Appearance CR3 updates #3259

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
15 commits
Select commit Hold shift + click to select a range
7751d58
fix outdated references to CR2 SC numberings
dbjorge May 5, 2023
6530300
fix understanding title element to match SC name
dbjorge May 5, 2023
ce7bbc2
fix perimeter dfn to match changes in primary text
dbjorge May 5, 2023
114db94
ed: use consistent capitalization on focus indicator dfn
dbjorge May 5, 2023
fc82fcb
add transitively referenced minimum bounding box dfn
dbjorge May 5, 2023
9f7d0eb
Initial pass at rewriting first few sections
dbjorge May 5, 2023
e5c4ea1
Merge branch 'main' into focus-appearance-understanding-cr3
dbjorge May 24, 2023
b946614
grammar fix for F110 title
dbjorge May 24, 2023
54a58e1
work in progress
dbjorge Jun 2, 2023
22580ce
Merge branch 'main' into focus-appearance-understanding-cr3
dbjorge Jun 16, 2023
e5e753c
Finish updating structure
dbjorge Jun 16, 2023
ff5ff66
fix up solid outline figures
dbjorge Jun 16, 2023
4a99168
finish first draft of focus appearance CR3 overhaul
dbjorge Jun 30, 2023
d0f4045
Clean up formatting
dbjorge Jun 30, 2023
11dc7b8
Avoid SC abbreviation per Wilco's feedback
dbjorge Jul 3, 2023
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Jump to
Jump to file
Failed to load files.
Diff view
Diff view
4 changes: 2 additions & 2 deletions techniques/failures/F110.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,13 +1,13 @@
<html xmlns="http://www.w3.org/1999/xhtml" lang="en">
<head>
<title>Failure of Success Criterion 2.4.11 due to a sticky footers or headers hiding focused elements</title>
<title>Failure of Success Criterion 2.4.12 Focus Not Obscured (Minimum) due to a sticky footer or header completely hiding focused elements</title>

<link rel="stylesheet" type="text/css" href="../../css/editors.css"/>

</head>
<body>

<h1>Failure of Success Criterion 2.4.11 due to a sticky footers or headers hiding focused elements</h1>
<h1>Failure of Success Criterion 2.4.12 Focus Not Obscured (Minimum) due to a sticky footer or header completely hiding focused elements</h1>

<section id="meta">
<h2>Metadata</h2>
Expand Down
577 changes: 280 additions & 297 deletions understanding/22/focus-appearance.html
View file
Open in desktop

Large diffs are not rendered by default.

Binary file added understanding/22/img/focus-indicator-browser-defaults-modified-background.png
View file
Open in desktop
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added understanding/22/img/focus-indicator-browser-defaults-unmodified.png
View file
Open in desktop
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
37 changes: 37 additions & 0 deletions understanding/22/img/focus-indicator-browser-defaults.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,37 @@
<!DOCTYPE html>
<html lang="en">
<title>Figure source: Focus Indicator Custom Shapes</title>
<style>
button {
box-sizing: border-box;
margin-top: 15px;
margin-bottom: 15px;
margin-left: 10px;
margin-right: 10px;
width: 90px;
height: 30px;
font-size: 12px;
}

.blue button {
border: 2px solid #48f;
}
</style>

<main>
<h1>Figure source: Focus Indicator Browser Defaults</h1>
<div>
<h2>Unmodified indicator background</h2>
<button>Example</button>
<button>Example</button>
<button>Example</button>
</div>
<div class="blue">
<h2>Blue indicator background</h2>
<button>Example</button>
<button>Example</button>
<button>Example</button>
</div>
</main>

</html>
Binary file added understanding/22/img/focus-indicator-custom-shapes-inset.png
View file
Open in desktop
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added understanding/22/img/focus-indicator-custom-shapes-side-highlights.png
View file
Open in desktop
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
71 changes: 71 additions & 0 deletions understanding/22/img/focus-indicator-custom-shapes.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,71 @@
<!DOCTYPE html>
<html lang="en">
<title>Figure source: Focus Indicator Custom Shapes</title>
<style>
button {
background: #17569D;
border: none;
border-radius: 0;
box-shadow: none;
box-sizing: border-box;
color: #fff;
margin-top: 15px;
margin-bottom: 15px;
margin-left: 10px;
margin-right: 10px;
width: 90px;
height: 30px;
font-size: 12px;
}

button.focus-inset {
position:relative;
}
button.focus-inset::after {
--inset: 3px;
content: '';
position: absolute;
top: var(--inset);
right: var(--inset);
bottom: var(--inset);
left: var(--inset);
border: 3px solid yellow;
}

button.focus-side-highlights {
border: 1px solid #17569D;
position: relative;
}
button.focus-side-highlights::after {
--inset: 1px;
content: '';
position: absolute;
top: var(--inset);
right: var(--inset);
bottom: var(--inset);
left: var(--inset);
border-left: 10px solid yellow;
border-right: 10px solid yellow;
}
</style>

<main>
<h1>Figure source: Focus Indicator Custom Shapes</h1>
<p>All examples are 90px x 30px buttons, so have 480px<sup>2</sup> minimum indicator area.</p>
<div>
<h2>Passes: 3px inset, 3px thick</h2>
<p>Indicator area = (84 * 24) - (78 * 18) = 612px<sup>2</sup> > 480px<sup>2</sup></p>
<button>Example</button>
<button class="focus-inset">Example</button>
<button>Example</button>
</div>
<div>
<h2>Passes: 2 28px x 9px rectangles</h2>
<p>Indicator area = 2 * 28 * 9 = 504px<sup>2</sup> > 480px<sup>2</sup></p>
<button>Example</button>
<button class="focus-side-highlights">Example</button>
<button>Example</button>
</div>
</main>

</html>
Binary file added understanding/22/img/focus-indicator-good-adjacent-bad-change.png
View file
Open in desktop
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added understanding/22/img/focus-indicator-good-change-bad-adjacent.png
View file
Open in desktop
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
47 changes: 47 additions & 0 deletions understanding/22/img/focus-indicator-non-text-contrast.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,47 @@
<!DOCTYPE html>
<html lang="en">
<title>Figure source: Focus Indicator Custom Shapes</title>
<style>
button {
background: #AECFF4;
border: 3px solid black;
border-radius: 4px;
box-shadow: none;
box-sizing: border-box;
color: #000;
margin-top: 15px;
margin-bottom: 15px;
margin-left: 10px;
margin-right: 10px;
width: 90px;
height: 30px;
font-size: 12px;
}

button.focus-low-change-contrast {
/* > 3:1 with button bg and page bg, < 3:1 with unfocused button border */
border-color: #666;
}
button.focus-low-adjacent-contrast {
/* < 3:1 with button bg and page bg, > 3:1 with unfocused button border */
border-color: #ccc;
}
</style>

<main>
<h1>Figure source: Focus Indicator Relationship with Non-text Contrast</h1>
<div>
<h2>Passes Focus Appearance, fails Non-text Contrast</h2>
<button>Example</button>
<button class="focus-low-adjacent-contrast">Example</button>
<button>Example</button>
</div>
<div>
<h2>Passes Non-text Contrast, fails Focus Appearance</h2>
<button>Example</button>
<button class="focus-low-change-contrast">Example</button>
<button>Example</button>
</div>
</main>

</html>
91 changes: 91 additions & 0 deletions understanding/22/img/focus-indicator-offset-types.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,91 @@
<!DOCTYPE html>
<html lang="en">
<title>Figure source: Focus Indicator Offset Types</title>
<style>
:root {
/*
For figure accuracy:
- indicator-fg must meet 3:1 with page-bg, button-bg, and button-border-fg
- indicator-thickness must be exactly 2px
- indicator-style must be solid

For figure clarity:
- button-border-fg should meet 4.5:1 with page-bg and button-bg
- indicator-fg should meet 4.5:1 with page-bg, button-bg, and button-border-fg
*/
--indicator-offset: 3px;
--indicator-thickness: 2px;
--indicator-style: solid;

--indicator-fg: #000;
--page-bg: #fff;
--button-bg: #cce;
--button-fg: #000;
--button-border-fg: #77a;

--button-border-radius: 10px;
}
button {
background: var(--button-bg);;
border: solid 2px var(--button-border-fg);
border-radius: var(--button-border-radius);
box-shadow: none;
box-sizing: border-box;
color: var(--button-fg);
margin-top: 15px;
margin-bottom: 15px;
margin-left: 10px;
margin-right: 10px;
outline: none;
width: 150px;
height: 50px;
font-size: 24px;
}
.button-container {
display: flex;
width: 100%;
justify-content: center
}

.outset {
outline-offset: var(--indicator-offset);
outline: var(--indicator-thickness) var(--indicator-style) var(--indicator-fg);
}

.outline {
outline: var(--indicator-thickness) var(--indicator-style) var(--indicator-fg);
}

.border {
border: var(--indicator-thickness) var(--indicator-style) var(--indicator-fg);
}

.inset {
position:relative;
}
.inset::after {
content: '';
position: absolute;
top: var(--indicator-offset);
right: var(--indicator-offset);
bottom: var(--indicator-offset);
left: var(--indicator-offset);
border: var(--indicator-thickness) var(--indicator-style) var(--indicator-fg);
border-radius: calc(var(--button-border-radius) - var(--indicator-offset));
}
</style>

<main>
<h1>Figure source: Focus Indicator Offset Types</h1>
<div class="button-container">
<button>Unfocused</button>
</div>
<div class="button-container">
<button class="outset">Outset</button>
<button class="outline">Outline</button>
<button class="border">Border</button>
<button class="inset">Inset</button>
</div>
</main>

</html>
Binary file added understanding/22/img/focus-indicator-offset-types.png
View file
Open in desktop
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
2 changes: 1 addition & 1 deletion understanding/22/img/focus-indicator-solid-outline.svg
View file
Open in desktop
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
2 changes: 1 addition & 1 deletion understanding/22/img/focus-indicator-star-with-light-focus.svg
View file
Open in desktop
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added understanding/22/img/focus-indicator-two-color-thick.png
View file
Open in desktop
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added understanding/22/img/focus-indicator-two-color-thin.png
View file
Open in desktop
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
46 changes: 46 additions & 0 deletions understanding/22/img/focus-indicator-two-color.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,46 @@
<!DOCTYPE html>
<html lang="en">
<title>Figure source: Focus Indicator Two Color</title>
<style>
button {
background: #17569D;
border: none;
border-radius: 0;
box-shadow: none;
box-sizing: border-box;
color: #fff;
margin-top: 15px;
margin-bottom: 15px;
margin-left: 10px;
margin-right: 10px;
width: 150px;
height: 50px;
font-size: 24px;
}
button.focus-thick {
outline: solid 2px black;
outline-offset: 2px;
box-shadow: 0 0 0 2px #aaa;
}
button.focus-thin {
outline: solid 1px black;
outline-offset: 1px;
box-shadow: 0 0 0 1px #aaa;
}
</style>

<main>
<h1>Figure source: Focus Indicator Two Color</h1>
<div>
<h2>Passes: the 2px thick black line passes</h2>
<button>Example</button>
<button class="focus-thick">Example</button>
</div>
<div>
<h2>Fails: the indicator is 2px thick, but the part of the indicator meeting change contrast is only 1px thick</h2>
<button>Example</button>
<button class="focus-thin">Example</button>
</div>
</main>

</html>