Fix: Add alt text to index, agency index background image (#1569)

cal-itp · Jul 27, 2023 · 58ede9b · 58ede9b
2 parents 199c0e9 + 13c307c
commit 58ede9b
Show file tree

Hide file tree

Showing 4 changed files with 10 additions and 3 deletions.
diff --git a/benefits/core/templates/core/landing.html b/benefits/core/templates/core/landing.html
@@ -11,6 +11,7 @@
         <div class="box px-4 py-3">
           <h1 class="text-left p-0">{{ page.headline }}</h1>
           <h2 class="p-sm pb-lg-8 pt-1 pt-lg-4 pb-4">{% translate "core.pages.landing.h2" %}</h2>
+          <span role="img" aria-label="{% translate "core.pages.index.alt" %}"></span>
           {% block call-to-action %}
           {% endblock call-to-action %}
         </div>

diff --git a/benefits/locale/en/LC_MESSAGES/django.po b/benefits/locale/en/LC_MESSAGES/django.po
@@ -278,6 +278,10 @@ msgstr "Choose Provider"
 msgid "core.pages.index.headline"
 msgstr "Get reduced fare on public transportation when you tap to ride"
 
+msgid "core.pages.index.alt"
+msgstr ""
+"A person holds a contactless debit card next to a card reader on a bus."
+
 msgid "core.pages.agency_index.title"
 msgstr "Introduction"
 

diff --git a/benefits/locale/es/LC_MESSAGES/django.po b/benefits/locale/es/LC_MESSAGES/django.po
@@ -282,6 +282,11 @@ msgid "core.pages.index.headline"
 msgstr ""
 "Obtenga una tarifa reducida en el transporte público cuando toque para viajar"
 
+msgid "core.pages.index.alt"
+msgstr ""
+"Una persona sostiene una tarjeta de débito junto a un lector de tarjetas en "
+"un autobús."
+
 msgid "core.pages.agency_index.title"
 msgstr "Introducción"
 

diff --git a/benefits/static/css/styles.css b/benefits/static/css/styles.css
@@ -759,9 +759,6 @@ a.card:focus-visible {
   --landing-box-background: var(--bs-white);
   --landing-box-border: 12px solid var(--primary-color);
   --landing-text-color: var(--text-primary-color);
-  --agency-index-box-background: var(--bs-white);
-  --agency-index-box-border: 12px solid var(--primary-color);
-  --agency-index-text-color: var(--text-primary-color);
   --landing-page-x-margin: auto;
 }