Understanding 2.2 2024年2月14日版

waic · Feb 22, 2024 · 2fdc741 · 2fdc741
1 parent 9f53597
commit 2fdc741
Show file tree

Hide file tree

Showing 299 changed files with 75,348 additions and 2 deletions.
diff --git a/README.md b/README.md
@@ -3,9 +3,22 @@
 
 [ウェブアクセシビリティ基盤委員会 (WAIC) 翻訳ワーキンググループ (WG4)](http://waic.jp/committee/wg4/) が管理する、WCAG 2.x とその関連文書について、W3Cのソースファイルを保管しているレポジトリです。
 
+## WCAG 2.2
+
+WCAG 2.2に関連する翻訳文書のレポジトリは、[waic/wcag22](https://github.com/waic/wcag22)になります。
+
+### Understanding（解説書）のコミット
+
+[gh-pages](https://github.com/w3c/wcag/tree/gh-pages)ブランチより入手
+
+- 原レポジトリの[8ce579b](https://github.com/w3c/wcag/commit/8ce579b703805fdc7523c733566d31b876a61b3c)
+  - Updated 14 February 2024.
+
+## WCAG 2.1
+
 WCAG 2.1に関連する翻訳文書のレポジトリは、[waic/wcag21](https://github.com/waic/wcag21)になります。
 
-## Understanding（解説書）のコミット
+### Understanding（解説書）のコミット
 
 - 433b1cf Understanding WCAG 2.1 2019年3月6日版 (Editor's Draft)
 - 1a05939 Understanding WCAG 2.1 2020年12月2日版 (Official Version)
@@ -14,7 +27,7 @@ WCAG 2.1に関連する翻訳文書のレポジトリは、[waic/wcag21](https:/
 
 なお、[433b1cf](https://github.com/waic/w3c-wcag/commit/433b1cf74f0cde0592aa06b0b3215c0ba4fbe5ae)のコミットは、[w3c/wcag](https://github.com/w3c)のコミット[dfad86](https://github.com/w3c/wcag/tree/dfad867083e7137d27e472e3b85aaac8cd2c2c77/understanding)と同一のファイルです。
 
-## Techniques（達成方法集）のコミット
+### Techniques（達成方法集）のコミット
 
 - 868b7ca Techniques for WCAG 2.1 2019年10月1日版 (Editor's Draft)
 

diff --git a/wcag22/understanding/abbreviations.html b/wcag22/understanding/abbreviations.html
diff --git a/wcag22/understanding/about.html b/wcag22/understanding/about.html
diff --git a/wcag22/understanding/accessible-authentication-enhanced.html b/wcag22/understanding/accessible-authentication-enhanced.html
diff --git a/wcag22/understanding/accessible-authentication-minimum.html b/wcag22/understanding/accessible-authentication-minimum.html
diff --git a/wcag22/understanding/adaptable.html b/wcag22/understanding/adaptable.html
diff --git a/wcag22/understanding/animation-from-interactions.html b/wcag22/understanding/animation-from-interactions.html
diff --git a/wcag22/understanding/audio-control.html b/wcag22/understanding/audio-control.html
diff --git a/wcag22/understanding/audio-description-or-media-alternative-prerecorded.html b/wcag22/understanding/audio-description-or-media-alternative-prerecorded.html
diff --git a/wcag22/understanding/audio-description-prerecorded.html b/wcag22/understanding/audio-description-prerecorded.html
diff --git a/wcag22/understanding/audio-only-and-video-only-prerecorded.html b/wcag22/understanding/audio-only-and-video-only-prerecorded.html
diff --git a/wcag22/understanding/audio-only-live.html b/wcag22/understanding/audio-only-live.html
diff --git a/wcag22/understanding/base.css b/wcag22/understanding/base.css
@@ -0,0 +1,17 @@
+.wcag21, .wcag22 {
+	background-color: #E9FBE9;
+	border-left: solid .5em #52E052;
+}
+span.wcag21, span.wcag22 {
+	margin-left: .25em;
+	padding-left: .25em;
+}
+div.wcag21, div.wcag22 {
+	margin: 1em auto;
+	padding: .5em;
+	page-break-inside: avoid;
+}
+.new-version {
+	font-size: smaller;
+	font-weight: bold;
+}
diff --git a/wcag22/understanding/bypass-blocks.html b/wcag22/understanding/bypass-blocks.html
diff --git a/wcag22/understanding/captions-live.html b/wcag22/understanding/captions-live.html
diff --git a/wcag22/understanding/captions-prerecorded.html b/wcag22/understanding/captions-prerecorded.html
diff --git a/wcag22/understanding/change-on-request.html b/wcag22/understanding/change-on-request.html
diff --git a/wcag22/understanding/character-key-shortcuts.html b/wcag22/understanding/character-key-shortcuts.html
diff --git a/wcag22/understanding/compatible.html b/wcag22/understanding/compatible.html
diff --git a/wcag22/understanding/concurrent-input-mechanisms.html b/wcag22/understanding/concurrent-input-mechanisms.html
diff --git a/wcag22/understanding/conformance.html b/wcag22/understanding/conformance.html
diff --git a/wcag22/understanding/consistent-help.html b/wcag22/understanding/consistent-help.html
diff --git a/wcag22/understanding/consistent-identification.html b/wcag22/understanding/consistent-identification.html
diff --git a/wcag22/understanding/consistent-navigation.html b/wcag22/understanding/consistent-navigation.html
diff --git a/wcag22/understanding/content-on-hover-or-focus.html b/wcag22/understanding/content-on-hover-or-focus.html
diff --git a/wcag22/understanding/contrast-enhanced.html b/wcag22/understanding/contrast-enhanced.html
diff --git a/wcag22/understanding/contrast-minimum.html b/wcag22/understanding/contrast-minimum.html
diff --git a/wcag22/understanding/distinguishable.html b/wcag22/understanding/distinguishable.html
diff --git a/wcag22/understanding/documenting-accessibility-support.html b/wcag22/understanding/documenting-accessibility-support.html
diff --git a/wcag22/understanding/dragging-movements.html b/wcag22/understanding/dragging-movements.html
diff --git a/wcag22/understanding/enough-time.html b/wcag22/understanding/enough-time.html
diff --git a/wcag22/understanding/error-identification.html b/wcag22/understanding/error-identification.html
diff --git a/wcag22/understanding/error-prevention-all.html b/wcag22/understanding/error-prevention-all.html
diff --git a/wcag22/understanding/error-prevention-legal-financial-data.html b/wcag22/understanding/error-prevention-legal-financial-data.html
diff --git a/wcag22/understanding/error-suggestion.html b/wcag22/understanding/error-suggestion.html
diff --git a/wcag22/understanding/extended-audio-description-prerecorded.html b/wcag22/understanding/extended-audio-description-prerecorded.html
diff --git a/wcag22/understanding/focus-appearance.html b/wcag22/understanding/focus-appearance.html
diff --git a/wcag22/understanding/focus-not-obscured-enhanced.html b/wcag22/understanding/focus-not-obscured-enhanced.html
diff --git a/wcag22/understanding/focus-not-obscured-minimum.html b/wcag22/understanding/focus-not-obscured-minimum.html
diff --git a/wcag22/understanding/focus-order.html b/wcag22/understanding/focus-order.html
diff --git a/wcag22/understanding/focus-visible.html b/wcag22/understanding/focus-visible.html
diff --git a/wcag22/understanding/headings-and-labels.html b/wcag22/understanding/headings-and-labels.html
diff --git a/wcag22/understanding/help.html b/wcag22/understanding/help.html
diff --git a/wcag22/understanding/identify-input-purpose.html b/wcag22/understanding/identify-input-purpose.html
diff --git a/wcag22/understanding/identify-purpose.html b/wcag22/understanding/identify-purpose.html
diff --git a/wcag22/understanding/images-of-text-no-exception.html b/wcag22/understanding/images-of-text-no-exception.html
diff --git a/wcag22/understanding/images-of-text.html b/wcag22/understanding/images-of-text.html
diff --git a/wcag22/understanding/img/button-background.png b/wcag22/understanding/img/button-background.png
diff --git a/wcag22/understanding/img/button-example2.png b/wcag22/understanding/img/button-example2.png
diff --git a/wcag22/understanding/img/button-focus-dark-border.png b/wcag22/understanding/img/button-focus-dark-border.png
diff --git a/wcag22/understanding/img/button-focus-indicator.png b/wcag22/understanding/img/button-focus-indicator.png
diff --git a/wcag22/understanding/img/button-focus-outlines.png b/wcag22/understanding/img/button-focus-outlines.png
diff --git a/wcag22/understanding/img/button-pointer-below-tooltip.png b/wcag22/understanding/img/button-pointer-below-tooltip.png
diff --git a/wcag22/understanding/img/button-pointer-on-tooltip.png b/wcag22/understanding/img/button-pointer-on-tooltip.png
diff --git a/wcag22/understanding/img/button-pointer-tooltip.png b/wcag22/understanding/img/button-pointer-tooltip.png
diff --git a/wcag22/understanding/img/button-pointer.png b/wcag22/understanding/img/button-pointer.png
diff --git a/wcag22/understanding/img/buttons-text-symbols.png b/wcag22/understanding/img/buttons-text-symbols.png
diff --git a/wcag22/understanding/img/checkbox-example1.png b/wcag22/understanding/img/checkbox-example1.png
diff --git a/wcag22/understanding/img/checkbox-example2.png b/wcag22/understanding/img/checkbox-example2.png
diff --git a/wcag22/understanding/img/checkbox-example3.png b/wcag22/understanding/img/checkbox-example3.png
diff --git a/wcag22/understanding/img/checkbox-example4.png b/wcag22/understanding/img/checkbox-example4.png
diff --git a/wcag22/understanding/img/checkbox-example5.png b/wcag22/understanding/img/checkbox-example5.png
diff --git a/wcag22/understanding/img/checkbox-purple.png b/wcag22/understanding/img/checkbox-purple.png
diff --git a/wcag22/understanding/img/checkbox.png b/wcag22/understanding/img/checkbox.png
diff --git a/wcag22/understanding/img/component-complex-both-unselected.png b/wcag22/understanding/img/component-complex-both-unselected.png
diff --git a/wcag22/understanding/img/component-complex-both.png b/wcag22/understanding/img/component-complex-both.png
diff --git a/wcag22/understanding/img/component-complex-sub.png b/wcag22/understanding/img/component-complex-sub.png
diff --git a/wcag22/understanding/img/component-complex-whole.png b/wcag22/understanding/img/component-complex-whole.png
diff --git a/wcag22/understanding/img/contrast-currency-down.png b/wcag22/understanding/img/contrast-currency-down.png
diff --git a/wcag22/understanding/img/contrast-gradient.png b/wcag22/understanding/img/contrast-gradient.png
diff --git a/wcag22/understanding/img/contrast-magnet.png b/wcag22/understanding/img/contrast-magnet.png
diff --git a/wcag22/understanding/img/contrast-phone.png b/wcag22/understanding/img/contrast-phone.png
diff --git a/wcag22/understanding/img/css-pixel-by-device.png b/wcag22/understanding/img/css-pixel-by-device.png
diff --git a/wcag22/understanding/img/double-space.gif b/wcag22/understanding/img/double-space.gif
diff --git a/wcag22/understanding/img/dropdown.png b/wcag22/understanding/img/dropdown.png
diff --git a/wcag22/understanding/img/dropdown2.png b/wcag22/understanding/img/dropdown2.png
diff --git a/wcag22/understanding/img/dynamic-pie-chart.png b/wcag22/understanding/img/dynamic-pie-chart.png
diff --git a/wcag22/understanding/img/first-button-example.png b/wcag22/understanding/img/first-button-example.png
diff --git a/wcag22/understanding/img/focus-indicator-background-passing.png b/wcag22/understanding/img/focus-indicator-background-passing.png
diff --git a/wcag22/understanding/img/focus-indicator-background.png b/wcag22/understanding/img/focus-indicator-background.png
diff --git a/wcag22/understanding/img/focus-indicator-basic.png b/wcag22/understanding/img/focus-indicator-basic.png
diff --git a/wcag22/understanding/img/focus-indicator-box-shadow-only.png b/wcag22/understanding/img/focus-indicator-box-shadow-only.png
diff --git a/wcag22/understanding/img/focus-indicator-box-shadow.png b/wcag22/understanding/img/focus-indicator-box-shadow.png
diff --git a/wcag22/understanding/img/focus-indicator-browser-defaults-modified-background.png b/wcag22/understanding/img/focus-indicator-browser-defaults-modified-background.png
diff --git a/wcag22/understanding/img/focus-indicator-browser-defaults-unmodified.png b/wcag22/understanding/img/focus-indicator-browser-defaults-unmodified.png
diff --git a/wcag22/understanding/img/focus-indicator-browser-defaults.html b/wcag22/understanding/img/focus-indicator-browser-defaults.html
@@ -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>
diff --git a/wcag22/understanding/img/focus-indicator-checkboxs.png b/wcag22/understanding/img/focus-indicator-checkboxs.png
diff --git a/wcag22/understanding/img/focus-indicator-checked.png b/wcag22/understanding/img/focus-indicator-checked.png
diff --git a/wcag22/understanding/img/focus-indicator-circle.png b/wcag22/understanding/img/focus-indicator-circle.png
diff --git a/wcag22/understanding/img/focus-indicator-custom-shapes-inset.png b/wcag22/understanding/img/focus-indicator-custom-shapes-inset.png
diff --git a/wcag22/understanding/img/focus-indicator-custom-shapes-side-highlights.png b/wcag22/understanding/img/focus-indicator-custom-shapes-side-highlights.png
diff --git a/wcag22/understanding/img/focus-indicator-custom-shapes.html b/wcag22/understanding/img/focus-indicator-custom-shapes.html
@@ -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>
diff --git a/wcag22/understanding/img/focus-indicator-extra-outline.png b/wcag22/understanding/img/focus-indicator-extra-outline.png
diff --git a/wcag22/understanding/img/focus-indicator-good-adjacent-bad-change.png b/wcag22/understanding/img/focus-indicator-good-adjacent-bad-change.png
diff --git a/wcag22/understanding/img/focus-indicator-good-change-bad-adjacent.png b/wcag22/understanding/img/focus-indicator-good-change-bad-adjacent.png
diff --git a/wcag22/understanding/img/focus-indicator-group-and-star.svg b/wcag22/understanding/img/focus-indicator-group-and-star.svg
diff --git a/wcag22/understanding/img/focus-indicator-group-outline.svg b/wcag22/understanding/img/focus-indicator-group-outline.svg
diff --git a/wcag22/understanding/img/focus-indicator-icon.png b/wcag22/understanding/img/focus-indicator-icon.png
diff --git a/wcag22/understanding/img/focus-indicator-innerline-strong.png b/wcag22/understanding/img/focus-indicator-innerline-strong.png
diff --git a/wcag22/understanding/img/focus-indicator-innerline.png b/wcag22/understanding/img/focus-indicator-innerline.png
diff --git a/wcag22/understanding/img/focus-indicator-inside.png b/wcag22/understanding/img/focus-indicator-inside.png
diff --git a/wcag22/understanding/img/focus-indicator-non-contrast.png b/wcag22/understanding/img/focus-indicator-non-contrast.png
diff --git a/wcag22/understanding/img/focus-indicator-non-text-contrast.html b/wcag22/understanding/img/focus-indicator-non-text-contrast.html
@@ -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>
diff --git a/wcag22/understanding/img/focus-indicator-ntc-comparison1.png b/wcag22/understanding/img/focus-indicator-ntc-comparison1.png
diff --git a/wcag22/understanding/img/focus-indicator-offset-types.html b/wcag22/understanding/img/focus-indicator-offset-types.html
@@ -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>
diff --git a/wcag22/understanding/img/focus-indicator-offset-types.png b/wcag22/understanding/img/focus-indicator-offset-types.png
diff --git a/wcag22/understanding/img/focus-indicator-outerline.png b/wcag22/understanding/img/focus-indicator-outerline.png
diff --git a/wcag22/understanding/img/focus-indicator-select.png b/wcag22/understanding/img/focus-indicator-select.png
diff --git a/wcag22/understanding/img/focus-indicator-solid-border.png b/wcag22/understanding/img/focus-indicator-solid-border.png
diff --git a/wcag22/understanding/img/focus-indicator-solid-border.svg b/wcag22/understanding/img/focus-indicator-solid-border.svg
diff --git a/wcag22/understanding/img/focus-indicator-solid-outline.png b/wcag22/understanding/img/focus-indicator-solid-outline.png
diff --git a/wcag22/understanding/img/focus-indicator-solid-outline.svg b/wcag22/understanding/img/focus-indicator-solid-outline.svg
diff --git a/wcag22/understanding/img/focus-indicator-star-shadow.png b/wcag22/understanding/img/focus-indicator-star-shadow.png
diff --git a/wcag22/understanding/img/focus-indicator-star-with-abutted-line.png b/wcag22/understanding/img/focus-indicator-star-with-abutted-line.png
diff --git a/wcag22/understanding/img/focus-indicator-star-with-abutted-line.svg b/wcag22/understanding/img/focus-indicator-star-with-abutted-line.svg
diff --git a/wcag22/understanding/img/focus-indicator-star-with-focus.png b/wcag22/understanding/img/focus-indicator-star-with-focus.png
diff --git a/wcag22/understanding/img/focus-indicator-star-with-focus.svg b/wcag22/understanding/img/focus-indicator-star-with-focus.svg
diff --git a/wcag22/understanding/img/focus-indicator-star-with-light-focus.png b/wcag22/understanding/img/focus-indicator-star-with-light-focus.png
diff --git a/wcag22/understanding/img/focus-indicator-star-with-light-focus.svg b/wcag22/understanding/img/focus-indicator-star-with-light-focus.svg
diff --git a/wcag22/understanding/img/focus-indicator-star-without-focus.png b/wcag22/understanding/img/focus-indicator-star-without-focus.png
diff --git a/wcag22/understanding/img/focus-indicator-star-without-focus.svg b/wcag22/understanding/img/focus-indicator-star-without-focus.svg
diff --git a/wcag22/understanding/img/focus-indicator-strong-dashed-border.png b/wcag22/understanding/img/focus-indicator-strong-dashed-border.png
diff --git a/wcag22/understanding/img/focus-indicator-strong-dashed-border.svg b/wcag22/understanding/img/focus-indicator-strong-dashed-border.svg
diff --git a/wcag22/understanding/img/focus-indicator-strong.png b/wcag22/understanding/img/focus-indicator-strong.png
diff --git a/wcag22/understanding/img/focus-indicator-thick-non-contrast.png b/wcag22/understanding/img/focus-indicator-thick-non-contrast.png
diff --git a/wcag22/understanding/img/focus-indicator-thick-short-side.png b/wcag22/understanding/img/focus-indicator-thick-short-side.png
diff --git a/wcag22/understanding/img/focus-indicator-thin-non-contrast.png b/wcag22/understanding/img/focus-indicator-thin-non-contrast.png
diff --git a/wcag22/understanding/img/focus-indicator-two-color-thick.png b/wcag22/understanding/img/focus-indicator-two-color-thick.png
diff --git a/wcag22/understanding/img/focus-indicator-two-color-thin.png b/wcag22/understanding/img/focus-indicator-two-color-thin.png
diff --git a/wcag22/understanding/img/focus-indicator-two-color.html b/wcag22/understanding/img/focus-indicator-two-color.html
@@ -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>
diff --git a/wcag22/understanding/img/focus-indicator-underline.png b/wcag22/understanding/img/focus-indicator-underline.png
diff --git a/wcag22/understanding/img/focus-indicator-weak-dashed-border.png b/wcag22/understanding/img/focus-indicator-weak-dashed-border.png