From a601906ef520ee1e33ed78a33bf4c3316ed1ad98 Mon Sep 17 00:00:00 2001
From: Beverly Nguyen <Beverly.Nguyen@gsa.gov>
Date: Mon, 28 Oct 2024 13:11:29 -0700
Subject: [PATCH] fixed a11y

---
 .../components/best-practices/cards.html      | 11 +++------
 .../views/best-practices/best-practices.html  |  6 +++--
 .../views/best-practices/clear-goals.html     |  4 ++--
 .../views/best-practices/establish-trust.html | 23 +++++++++++--------
 .../best-practices/write-for-action.html      |  8 +++----
 5 files changed, 26 insertions(+), 26 deletions(-)

diff --git a/app/templates/components/best-practices/cards.html b/app/templates/components/best-practices/cards.html
index 089a8a5a6..1fa6f9a75 100644
--- a/app/templates/components/best-practices/cards.html
+++ b/app/templates/components/best-practices/cards.html
@@ -1,8 +1,3 @@
-<h3 class="padding-bottom-2">
-  {% if card_header %}
-  {{card_header}}
-  {% endif %}
-</h3>
 <ul class="usa-card-group">
   {% for item in card_contents %}
   <li class="usa-card grid-col tablet:grid-col-4 {% if item.link %}linked-card linked-content{% endif %}">
@@ -12,10 +7,10 @@
         {% if item.link %}
         <a href="{{ item.link }}">
           {% endif %}
-          <h4
+          <h3
             class="usa-card__heading {% if text_align != 'left' or text_align is not defined %}text-center{% else %}text-left{% endif %} {% if item.link %}linked-card{% endif %}">
             {{ item.card_heading }}
-          </h4>
+          </h3>
           {% if item.link %}
         </a>
         {% endif %}
@@ -29,7 +24,7 @@
         </svg>
         {% endif %}
         {% if item.image_src %}
-        <img class="best-practices_card_img" src="{{item.image_src}}" alt="{{item.card_heading}} image" />
+        <img class="best-practices_card_img" src="{{item.image_src}}" alt="{{ item.alt_text }}" />
         {% endif %}
       </div>
       {% endif %}
diff --git a/app/templates/views/best-practices/best-practices.html b/app/templates/views/best-practices/best-practices.html
index 1c1f4f556..a00a48660 100644
--- a/app/templates/views/best-practices/best-practices.html
+++ b/app/templates/views/best-practices/best-practices.html
@@ -14,8 +14,10 @@ Best Practices
   </p>
 
   <p>This set of best practices will help you get an effective texting initiative up and running.</p>
+  <h2 class="padding-bottom-2">
+    Key elements of a texting campaign
+  </h2>
 
-  {% set card_header = "Key elements of a texting campaign" %}
   {% set card_contents = [
   {
   "svg_src": "goal",
@@ -55,7 +57,7 @@ Best Practices
   }
   ] %}
 
-  {% with card_header=card_header, card_contents=card_contents %}{% include "components/best-practices/cards.html" %}{%
+  {% with card_contents=card_contents %}{% include "components/best-practices/cards.html" %}{%
   endwith %}
 
 </section>
diff --git a/app/templates/views/best-practices/clear-goals.html b/app/templates/views/best-practices/clear-goals.html
index 95154bdad..b67684c04 100644
--- a/app/templates/views/best-practices/clear-goals.html
+++ b/app/templates/views/best-practices/clear-goals.html
@@ -21,9 +21,9 @@
       </p>
       <div class="usa-summary-box maxw-tablet" role="region" aria-labelledby="summary-box-establish-clear-goals">
         <div class="usa-summary-box__body">
-          <h4 class="usa-summary-box__heading" id="summary-box-establish-clear-goals">
+          <p class="usa-summary-box__heading" id="summary-box-establish-clear-goals">
             To establish clear goals, start by answering the following questions:
-          </h4>
+          </p>
           <div class="usa-summary-box__text">
             <ul class="usa-list">
               <li><i>Who</i> do you want to text?</li>
diff --git a/app/templates/views/best-practices/establish-trust.html b/app/templates/views/best-practices/establish-trust.html
index ca18a86d7..fc26e2a71 100644
--- a/app/templates/views/best-practices/establish-trust.html
+++ b/app/templates/views/best-practices/establish-trust.html
@@ -143,48 +143,51 @@
     delivery staff, especially those who interact directly with your intended audience.
   </p>
 
-  {% set card_header = "Harness trusted communication channels" %}
+  <h3 class="padding-bottom-2">Harness trusted communication channels</h3>
   {% set card_contents = [
   {
   "image_src": asset_url('images/website.svg'),
   "card_heading": "Websites",
+  "alt_text": "Graphic representing a website browser",
   "p_text": "Post banner alerts about texting on your agency website and link to a press release for more information.
   Publish a public texting privacy policy.",
   },
   {
   "image_src": asset_url('images/community-org.svg'),
   "card_heading": "Community organizations",
+  "alt_text": "Illustration of community organizations spreading awareness",
   "p_text": "Alert trusted community-based organizations that texts are coming and what they look like. Equip them with
   fliers, posters, and talking points to spread the word.",
   },
   {
   "image_src": asset_url('images/call-center.svg'),
   "card_heading": "IVR / Call Centers",
+  "alt_text": "Illustration of a call center promoting texting initiative",
   "p_text": "Consider adding hold message announcements about your texting initiative to further get the word out.",
   },
   ] %}
 
-  {% with card_header=card_header, card_contents=card_contents %}{% include "components/best-practices/cards.html" %}{%
+  {% with card_contents=card_contents %}{% include "components/best-practices/cards.html" %}{%
   endwith %}
-
-  {% set card_header = "Prepare your team" %}
+  <h3 class="padding-bottom-2">Prepare your team</h3>
   {% set card_contents = [
   {
   "image_src": asset_url('images/grouping.svg'),
   "card_heading": "Staff",
-  "p_text": "Give all staff a heads-up about texts before and when they are sent.
-  Share talking points on what texts you’re sending, when you’ll start to send them, the phone number they are coming
-  from, and where staff can escalate any issues.",
+  "alt_text": "Illustration of staff group briefing",
+  "p_text": "Give all staff a heads-up about texts before and when they are sent. Share talking points on what texts
+  you’re sending, when you’ll start to send them, the phone number they are coming from, and where staff can escalate
+  any issues.",
   },
   {
   "image_src": asset_url('images/project-management.svg'),
   "card_heading": "Case management systems",
+  "alt_text": "Graphic representing project management",
   "p_text": "When it makes sense, include information about texts being sent to specific clients on individual splash
-  pages or
-  within case management notes.",
+  pages or within case management notes.",
   },
   ] %}
-  {% with card_header=card_header, card_contents=card_contents %}{% include "components/best-practices/cards.html" %}{%
+  {% with card_contents=card_contents %}{% include "components/best-practices/cards.html" %}{%
   endwith %}
 </section>
 {% endblock %}
diff --git a/app/templates/views/best-practices/write-for-action.html b/app/templates/views/best-practices/write-for-action.html
index 3f226c4d2..d97b74d8b 100644
--- a/app/templates/views/best-practices/write-for-action.html
+++ b/app/templates/views/best-practices/write-for-action.html
@@ -12,16 +12,15 @@
 <section class="usa-prose">
   <h1>{{page_title}}</h1>
   <p class="font-sans-lg text-base"> Help your audience know what to do with the information you send.</p>
-
   <p>
     When writing a text, focus on the person who is going to receive the message and write it for them. Use plain
     language and provide easy to understand next steps.
   </p>
   <div class="usa-summary-box maxw-tablet" role="region" aria-labelledby="summary-box-establish-clear-goals">
     <div class="usa-summary-box__body">
-      <h4 class="usa-summary-box__heading" id="summary-box-establish-clear-goals">
+      <p class="usa-summary-box__heading" id="summary-box-establish-clear-goals">
         When deciding what types of messages to draft for your campaign, think through the following questions:
-      </h4>
+      </p>
       <div class="usa-summary-box__text">
         <ul class="usa-list">
           <li>What do you want recipients to do when they receive the text?</li>
@@ -79,7 +78,8 @@
     </li>
   </ul>
   <h2>What provoking action looks like</h2>
-  <p><a href="https://www.ncbi.nlm.nih.gov/pmc/articles/PMC10002044/" target="_blank">Evidence shows</a> that employing
+  <p class="padding-bottom-2"><a href="https://www.ncbi.nlm.nih.gov/pmc/articles/PMC10002044/" target="_blank">Evidence
+      shows</a> that employing
     behavioral science is an effective way to increase the
     likelihood of a recipient
     taking action upon receiving your text. Keep in mind these three foundational principles while drafting your text