Merge pull request #5625 from GSA/nl-a11y-images-alt-text-color

Add CSS to ensure alt text is visible when images are turned off
GSA · Dec 5, 2022 · 965ad02 · 965ad02
2 parents d0baa82 + 3a78912
commit 965ad02
Show file tree

Hide file tree

Showing 5 changed files with 11 additions and 2 deletions.
diff --git a/themes/digital.gov/layouts/partials/core/header.html b/themes/digital.gov/layouts/partials/core/header.html
@@ -4,7 +4,7 @@
     <div class="usa-logo" id="extended-logo">
       <em class="usa-logo__text">
         <a href="{{- "/" | relURL -}}" title="{{- .Site.Title }} Home" aria-label="{{- .Site.Title }} Home">
-          <img class="logo-black" src="{{- "img/digitalgov-logo.svg" | absURL -}}" alt="{{- .Site.Title -}} Logo" />
+          <img class="logo-black" src="{{- "img/digitalgov-logo.svg" | absURL -}}" alt="{{ .Site.Title }} Logo" />
         </a>
       </em>
       <p class="sub-head display-none">{{- .Site.Params.description -}}</p>

diff --git a/themes/digital.gov/src/scss/new/_footer.scss b/themes/digital.gov/src/scss/new/_footer.scss
@@ -46,5 +46,4 @@ footer.usa-footer{
 			}
 		}
 	}
-
 }
diff --git a/themes/digital.gov/src/scss/new/_images.scss b/themes/digital.gov/src/scss/new/_images.scss
@@ -43,3 +43,7 @@
   @include u-float('left');
   @include u-width('card-lg');
 }
+
+img[alt] {
+  font-style: italic;
+}
diff --git a/themes/digital.gov/src/scss/new/_uswds-overrides.scss b/themes/digital.gov/src/scss/new/_uswds-overrides.scss
@@ -0,0 +1,5 @@
+@use "uswds-core" as *;
+
+.usa-identifier img[alt] {
+  @include u-text('white');
+}
diff --git a/themes/digital.gov/src/scss/new/styles.scss b/themes/digital.gov/src/scss/new/styles.scss
@@ -12,6 +12,7 @@
 // Import individual theme settings
 
 @forward 'uswds-theme';
+@forward 'uswds-overrides';
 @forward "usa-site-alert";
 
 // @forward "uswds-global";