w3c · adampage · Aug 22, 2025 · Aug 22, 2025 · Aug 23, 2025 · Aug 23, 2025
diff --git a/css/base.css b/css/base.css
@@ -203,9 +203,9 @@ margin: 1.2em 0;
 align-items: stretch;
 }
 
-#site-header.minimal-header .minimal-header-name, 
-#site-header.minimal-header .minimal-header-subtitle, 
-#site-header.minimal-header .minimal-header-link 
+#site-header.minimal-header .minimal-header-name,
+#site-header.minimal-header .minimal-header-subtitle,
+#site-header.minimal-header .minimal-header-link
 {
 display: flex;
 flex-direction: column;
@@ -411,7 +411,7 @@ font-size: 95%;
 .standalone-resource-about a,
 .standalone-resource-pager a,
 .standalone-resource-about span,
-.standalone-resource-pager span 
+.standalone-resource-pager span
 {
 margin-left:.8em;
 margin-right:.8em;
@@ -444,6 +444,11 @@ figure svg {
 	border: 1px solid var(--line-grey);
 }
 
+figure svg[role*="image"] {
+    display: block;
+    max-inline-size: 100%;
+}
+
 figcaption {
 	font-weight: initial;
 	border-bottom: initial;

diff --git a/understanding/20/contrast-enhanced.html b/understanding/20/contrast-enhanced.html
@@ -236,7 +236,7 @@ <h3>Inactive User Interface Components</h3>
 
          <p>User Interface Components that are not available for user interaction (e.g., a disabled control in HTML) are not required to meet contrast requirements. An inactive user interface component is visible but not currently operable. An example would be a submit button at the bottom of a form that is visible but cannot be activated until all the required fields in the form are completed.</p>
          <figure id="figure-grey-button-and-text">
-            <img src="img/inactive-button.png" alt="Grey button with non-contrasting grey text." width="120">
+            {% include "../21/img/1.4.11-ntc-button-inactive.svg" %}
             <figcaption> An inactive button using default browser styles</figcaption>
          </figure>
       </section>

diff --git a/understanding/20/contrast-minimum.html b/understanding/20/contrast-minimum.html
@@ -219,7 +219,7 @@ <h3>Inactive User Interface Components</h3>
 
          <p>User Interface Components that are not available for user interaction (e.g., a disabled control in HTML) are not required to meet contrast requirements. An inactive user interface component is visible but not currently operable. An example would be a submit button at the bottom of a form that is visible but cannot be activated until all the required fields in the form are completed.</p>
          <figure id="figure-grey-button-and-text">
-            <img src="img/inactive-button.png" alt="Grey button with non-contrasting grey text." width="120">
+            {% include "../21/img/1.4.11-ntc-button-inactive.svg" %}
             <figcaption> An inactive button using default browser styles</figcaption>
          </figure>
       </section>

diff --git a/understanding/21/img/1.4.11-ntc-button-background.svg b/understanding/21/img/1.4.11-ntc-button-background.svg
diff --git a/understanding/21/img/1.4.11-ntc-button-inactive.svg b/understanding/21/img/1.4.11-ntc-button-inactive.svg
diff --git a/understanding/21/img/1.4.11-ntc-buttons-text-symbols.svg b/understanding/21/img/1.4.11-ntc-buttons-text-symbols.svg
diff --git a/understanding/21/img/1.4.11-ntc-checkbox-example1.svg b/understanding/21/img/1.4.11-ntc-checkbox-example1.svg
diff --git a/understanding/21/img/1.4.11-ntc-checkbox-example2.svg b/understanding/21/img/1.4.11-ntc-checkbox-example2.svg
diff --git a/understanding/21/img/1.4.11-ntc-checkbox-example3.svg b/understanding/21/img/1.4.11-ntc-checkbox-example3.svg
diff --git a/understanding/21/img/1.4.11-ntc-checkbox-example4.svg b/understanding/21/img/1.4.11-ntc-checkbox-example4.svg
diff --git a/understanding/21/img/1.4.11-ntc-checkbox-example5.svg b/understanding/21/img/1.4.11-ntc-checkbox-example5.svg
diff --git a/understanding/21/img/1.4.11-ntc-checkbox-purple.svg b/understanding/21/img/1.4.11-ntc-checkbox-purple.svg
diff --git a/understanding/21/img/1.4.11-ntc-default-link-focus.svg b/understanding/21/img/1.4.11-ntc-default-link-focus.svg
diff --git a/understanding/21/img/1.4.11-ntc-default-link-text.svg b/understanding/21/img/1.4.11-ntc-default-link-text.svg
diff --git a/understanding/21/img/1.4.11-ntc-dropdown.svg b/understanding/21/img/1.4.11-ntc-dropdown.svg
diff --git a/understanding/21/img/1.4.11-ntc-dropdown2.svg b/understanding/21/img/1.4.11-ntc-dropdown2.svg
diff --git a/understanding/21/img/1.4.11-ntc-focus-background.svg b/understanding/21/img/1.4.11-ntc-focus-background.svg
diff --git a/understanding/21/img/1.4.11-ntc-focus-border.svg b/understanding/21/img/1.4.11-ntc-focus-border.svg
diff --git a/understanding/21/img/1.4.11-ntc-focus-inner-border.svg b/understanding/21/img/1.4.11-ntc-focus-inner-border.svg
diff --git a/understanding/21/img/1.4.11-ntc-focus-inner-outer.svg b/understanding/21/img/1.4.11-ntc-focus-inner-outer.svg
diff --git a/understanding/21/img/1.4.11-ntc-focus-inner-white.svg b/understanding/21/img/1.4.11-ntc-focus-inner-white.svg
diff --git a/understanding/21/img/1.4.11-ntc-focus-inner.svg b/understanding/21/img/1.4.11-ntc-focus-inner.svg
diff --git a/understanding/21/img/1.4.11-ntc-focus-outer-green.svg b/understanding/21/img/1.4.11-ntc-focus-outer-green.svg