Accessibility Improvements (#328)

Accessibility improvements for contrast, hierarchy, alt text, etc.
smartlogic · Oct 16, 2024 · 1ec308f · 1ec308f
1 parent 6ece5ba
commit 1ec308f
Show file tree

Hide file tree

Showing 55 changed files with 301 additions and 224 deletions.
diff --git a/_includes/mailchimp.html b/_includes/mailchimp.html
@@ -2,6 +2,7 @@
 <link href="https://cdn-images.mailchimp.com/embedcode/horizontal-slim-10_7.css" rel="stylesheet" type="text/css">
 <style type="text/css">
   #mc_embed_signup{background:#fff; clear:left; font:14px Helvetica,Arial,sans-serif; width:100%;}
+  input#mc-embedded-subscribe.button {background: #111; font:20px Helvetica,Arial,sans-serif; font-weight: bold; width:100%;}
   /* Add your own Mailchimp form style overrides in your site stylesheet or in this style block.
   We recommend moving this block and the preceding CSS link to the HEAD of your HTML file. */
 </style>

diff --git a/_includes/old-season-episodes.html b/_includes/old-season-episodes.html
@@ -3,10 +3,11 @@
 <section class="section podcast-horizontal">
   <div class="container">
     <div class="podcast-horizontal__article-wrap">
+      <h2 class="sr-only">Episode Listing</h2>
       {% assign episodes = site.data.elixir_wizards_seasons[include.season] | reverse %}
       {% for episode in episodes %}
       <article class="podcast-horizontal__article">
-        <div class="podcast-horizontal__article-img"><img src="{{ episode.itunes.image }}" alt="Episode Cover" /></div>
+        <div class="podcast-horizontal__article-img"><img src="{{ episode.itunes.image }}" alt="Episode cover art for {{ episode.title }}" /></div>
         <div class="podcast-horizontal__article-text">
           <p><a href="/podcast/elixir-wizards/{{ episode.slug }}">{{ episode.title }}</a><br />
           {{ episode.pubDateFriendly }}</p>

diff --git a/_includes/season-episodes.html b/_includes/season-episodes.html
@@ -3,9 +3,10 @@
 <section class="section podcast-horizontal">
   <div class="container">
     <div class="podcast-horizontal__article-wrap">
+      <h2 class="sr-only">Episode Listing</h2>
       {% for episode in site.data.elixir_wizards_seasons[include.season] %}
       <article class="podcast-horizontal__article">
-        <div class="podcast-horizontal__article-img"><img src="{{ episode.itunes.image }}" alt="Episode Cover" /></div>
+        <div class="podcast-horizontal__article-img"><img src="{{ episode.itunes.image }}" alt="Episode cover art for {{ episode.title }}" /></div>
         <div class="podcast-horizontal__article-text">
           <p><a href="/podcast/elixir-wizards/{{ episode.slug }}">{{ episode.title }}</a><br />
           {{ episode.pubDateFriendly }}</p>

diff --git a/_sass/components/article.scss b/_sass/components/article.scss
@@ -56,8 +56,10 @@
     padding: 6px 35px;
     color: $green;
     border: 1px solid $green;
+    font-weight: bold;
+    font-size: 20px;
     @include laptop{
-      font-size: 12px;
+      font-size: 18px;
       padding: 5px 20px;
     }
     @include phone{
@@ -84,4 +86,4 @@
     object-fit: cover;
     object-position: 50% 25%;
   }
-}
+}
diff --git a/_sass/components/footer.scss b/_sass/components/footer.scss
@@ -16,7 +16,7 @@
     left: 0;
     width: 100%;
     height: 100%;
-    background: rgba(#535960, .80);
+    background: rgba(#535960, .92);
     z-index: 1;
   }
   @include laptop{
@@ -100,20 +100,21 @@
     margin-bottom: 12px;
   }
   p{
-    font-size: 18px;
+    font-size: 20px;
     @include laptop{
-      font-size: 16px;
+      font-size: 18px;
     }
     @include phone{
-      font-size: 14px;
+      font-size: 18px;
     }
   }
 }
 .footer__big-left-link{
   a{
-    font-size: 14px;
+    font-size: 20px;
     padding: 9px 35px;
     background: $green;
+    font-weight: bold;
     color: #fff;
   }
 }
@@ -126,14 +127,14 @@
     display: none;
   }
   p{
-    font-size: 18px;
+    font-size: 20px;
     margin-bottom: 5px;
     @include circular(regularItalic);
     @include laptop{
-      font-size: 16px;
+      font-size: 18px;
     }
     @include phone{
-      font-size: 14px;
+      font-size: 18px;
     }
   }
 }

diff --git a/_sass/components/hero.scss b/_sass/components/hero.scss
@@ -37,12 +37,15 @@
     display: none;
   }
   p{
-    font-size: 18px;
+    font-size: 20px;
     color: #6F7780;
     line-height: 1.5em;
     padding-bottom: 1em;
     @include tablet{
-      font-size: 14px;
+      font-size: 18px;
+    }
+    a {
+      font-weight: bold;
     }
   }
 }

diff --git a/_sass/components/horizontal-list.scss b/_sass/components/horizontal-list.scss
@@ -72,10 +72,13 @@
     max-width: 100%;
   }
   p{
-    font-size: 16px;
+    font-size: 20px;
     color: $hcolor;
     @include phone{
-      font-size: 14px;
+      font-size: 20px;
+    }
+    a {
+      font-weight: bold;
     }
   }
-}
+}
diff --git a/_sass/pages/case-studies.scss b/_sass/pages/case-studies.scss
@@ -54,7 +54,10 @@
     display: none;
   }
   p{
-    font-size: 18px;
+    font-size: 20px;
+    a {
+      font-weight: bold;
+    }
   }
 }
 
@@ -97,16 +100,17 @@
   flex: 1;
   p{
     padding-top: 5px;
-    font-size: 18px;
+    font-size: 20px;
     @include tablet{
       padding-top: 0;
-      font-size: 16px;
+      font-size: 18px;
     }
     @include phone{
-      font-size: 14px;
+      font-size: 18px;
     }
     a{
       color: $green;
+      font-weight: bold;
     }
   }
 }

diff --git a/_sass/pages/main.scss b/_sass/pages/main.scss
@@ -99,9 +99,11 @@
     padding: 7px 16px;
     border: 1px solid $green;
     color: $green;
+    font-size: 20px;
+    font-weight: bold;
     @include laptop{
       padding: 5px 10px;
-      font-size: 12px;
+      font-size: 18px;
     }
     @include phone{
       padding: 8px 15px;
@@ -135,28 +137,28 @@
 }
 .casestudy__right-article-desc{
   p{
-    font-size: 18px;
+    font-size: 22px;
     @include circular(medium);
     a{
       @include circular;
-      font-size: 15px;
+      font-size: 20px;
+      font-weight: bold;
       color: $green;
       display: block;
       margin-top: 15px;
       @include laptop{
-        font-size: 12px;
+        font-size: 18px;
       }
       @include laptop{
-        font-size: 14px;
         display: inline;
         margin-top: 0;
       }
     }
     @include laptop{
-      font-size: 16px;
+      font-size: 20px;
     }
     @include tablet{
-      font-size: 14px;
+      font-size: 20px;
     }
   }
 }
@@ -173,9 +175,10 @@
 }
 .features__left-links{
   p{
-    font-size: 18px;
+    font-size: 20px;
+    font-weight: bold;
     @include phone{
-      font-size: 14px;
+      font-size: 18px;
     }
     a{
       color: $green;

diff --git a/_sass/pages/podcast.scss b/_sass/pages/podcast.scss
@@ -1,3 +1,15 @@
+.podcast-title-section {
+  text-align: center;
+  max-width: 1200px;
+  margin: auto;
+  .podcast-title {
+    padding-top: 20px;
+    font-size: 52px;
+    color: $green;
+    font-weight: bold;
+  }
+}
+
 .podcast__col{
   @include grid-column(12, $my-custom-grid);
   @include grid-media($my-custom-grid-2){

diff --git a/case-studies/aepsi.html b/case-studies/aepsi.html
@@ -29,20 +29,20 @@ <h1>AEPSinteractive</h1>
     <div class="content-page-wrapper">
       <section class="section content-block">
         <div class="container">
-         
+
         <ul>
             <li>Developed a robust early childhood assessment web application using Phoenix LiveView for real-time interactivity and streamlined data management.</li>
             <li>Integrated Oban for background job processing, enabling efficient and uninterrupted data reporting and CSV generation.</li>
             <li>Employed Tailwind CSS to create a responsive and accessible interface, ensuring compliance with <a target="_blank"href="https://www.w3.org/WAI/WCAG2AAA-Conformance">WCAG Standards</a> (AA & AAA).</li>
             <li>Implemented PostgreSQL for scalable and reliable data storage, comprehensive reporting, and customized assessments that meet diverse educational needs.</li>
           </ul>
-         
+
           <figure>
-            <img src="{{ site.baseurl }}/images/case-studies/aepsi/AEPS3Dashboard.gif" alt="AEPSi Web Application Dashboard"
+            <img src="{{ site.baseurl }}/images/case-studies/aepsi/AEPS3Dashboard.gif" alt=""
               width="100%">
             <figcaption>AEPSi Web Application Dashboard</figcaption>
           </figure>
-      
+
         </div>
     </section>
 
@@ -68,11 +68,11 @@ <h2>Data-Driven App Development Goals</h2>
           <div class="container">
 
       <h2>Building a Reliable, User-Friendly Interface with Phoenix LiveView, PostgreSQL, and Tailwind CSS</h2>
-        
+
  <p>To bring this vision to life, AEPSi needed a reliable and flexible solution that can work in educational settings with a range of technological capabilities. To support these goals, SmartLogic built a system that streamlines data collection, facilitates effective lesson planning, and provides comprehensive reporting.</p>
 
  <figure>
-    <img src="{{ site.baseurl }}/images/case-studies/aepsi/AEPS3ReadySetAssessment.png" alt="AEPSi Ready Set Assessment"
+    <img src="{{ site.baseurl }}/images/case-studies/aepsi/AEPS3ReadySetAssessment.png" alt=""
       width="100%">
     <figcaption>AEPSi Ready Set Assessment</figcaption>
   </figure>
@@ -97,7 +97,7 @@ <h2 style="margin-top: 20px;">Advanced Reporting Capabilities</h2>
         <p>To support educators and caregivers in their mission to track and nurture child development, the AEPSi platform includes advanced reporting capabilities. One of the standout features is the child progress record, which is visually engaging and rich with graphical elements such as shapes and arrows. This report provides a clear, comprehensive view of each child's developmental progress, making it easier for educators to identify areas of improvement and success.</p>
 
         <figure>
-            <img src="{{ site.baseurl }}/images/case-studies/aepsi/AEPS3ChildProgressReportv3.gif" alt="AEPSi Child Progress Record"
+            <img src="{{ site.baseurl }}/images/case-studies/aepsi/AEPS3ChildProgressReportv3.gif" alt=""
               width="100%">
             <figcaption>AEPSi Child Progress Record</figcaption>
           </figure>

diff --git a/case-studies/baltimore-water-taxi.html b/case-studies/baltimore-water-taxi.html
@@ -85,7 +85,7 @@ <h2>New system expands Baltimore Water Taxi’s ticketing options</h2>
         <p>A key part of phase two was providing the Business Development team with the ability to easily devise new ticketing options. SmartLogic’s system lets them fully customize ticket terms, such as expiration dates, number of days, and allow non-consecutive days. Just as important, the system also ensures that revenue is recognized correctly for each new ticket type.</p>
         <p>So when BWT got feedback from its field sales team that there was interest in one-way tickets, it used this functionality to rollout a one-way ticket option, including a 10-pack option, in a couple of days. The SmartLogic functionality eliminates the logistical and cost barriers to experimenting with new ticket types in quick response to customer feedback.</p>
         <figure>
-          <img class="big" src="{{ site.baseurl }}/images/case-studies/baltimore-water-taxi/ticket-type-admin-view.png" alt="Administrative View of Creating a Ticket Type" width=100%"">
+          <img class="big" src="{{ site.baseurl }}/images/case-studies/baltimore-water-taxi/ticket-type-admin-view.png" alt="" width=100%"">
           <figcaption>The system SmartLogic built gives BWT flexibility in how ticket types can be created and managed</figcaption>
         </figure>
       </div>

diff --git a/case-studies/bchd.html b/case-studies/bchd.html
@@ -33,7 +33,7 @@ <h2>Background</h2>
         <p>The <a target="_blank" href="https://health.baltimorecity.gov/">Baltimore City Health Department</a> (BCHD) is the oldest continuously-operating health department in the United States, formed in 1793. Its mission is to protect health, eliminate disparities, and enhance the wellbeing of everyone in our community through education, coordination, advocacy, and direct service delivery.</p>
 
         <figure>
-          <img src="{{ site.baseurl }}/images/case-studies/bchd/charmcare-home.jpg" alt="CHARMcare home page" width="100%"><figcaption>CHARMcare home page</figcaption>
+          <img src="{{ site.baseurl }}/images/case-studies/bchd/charmcare-home.jpg" alt="" width="100%"><figcaption>CHARMcare home page</figcaption>
         </figure>
 
         <p>One of BHCD’s offerings is an open-source directory, <a target="_blank" href="https://www.charmcare.org/">CHARMcare</a>, that guides users to free or low-cost resources in Baltimore. The site is a custom-designed search engine for Baltimore social services that includes info on emergency help, education, food access, employment and legal assistance organizations. Its results can be filtered by proximity and keywords, and a built-in Google Translate function makes the website accessible to a broader group of non-English speakers.</p>
@@ -48,7 +48,7 @@ <h2>Usability Improvements for CHARMcare</h2>
         <p>SmartLogic’s lead Ruby on Rails developer quickly identified that the project’s search feature needed to be enhanced. Specifically, our team had its eyes set on integrating AWS Elasticsearch into CHARMCare. Elasticsearch makes it easier to build out complicated search features at a very high degree of performance, versus building out large or complex features with raw PostgreSQL queries.</p>
 
         <figure>
-          <img src="{{ site.baseurl }}/images/case-studies/bchd/charmcare-search.jpg" alt="CHARMcare search results" width="100%"><figcaption>CHARMcare search results</figcaption>
+          <img src="{{ site.baseurl }}/images/case-studies/bchd/charmcare-search.jpg" alt="" width="100%"><figcaption>CHARMcare search results</figcaption>
         </figure>
 
         <p>Our team was able to implement a number of improvements to the CHARMcare application functionality, including:

diff --git a/case-studies/bocce.html b/case-studies/bocce.html
@@ -58,7 +58,7 @@ <h2>Client Goals</h2>
       effectively. Bocce teamed up with SmartLogic to translate the vision into a digital reality.</p>
 
     <figure>
-      <img src="{{ site.baseurl }}/images/case-studies/bocce/BocceHome.png" alt="Bocce Web Application Homepage Snapshot"
+      <img src="{{ site.baseurl }}/images/case-studies/bocce/BocceHome.png" alt=""
         width="100%">
       <figcaption>Bocce home page</figcaption>
     </figure>
@@ -95,7 +95,7 @@ <h2>Increasing Engagement with Gamification</h2>
     <p>By integrating gamified elements, personalized avatars, quizzes, and levels into the app design, educational material is more digestible and memorable than long-form articles or archives of resources.
 
     <figure>
-      <img src="{{ site.baseurl }}/images/case-studies/bocce/BocceAwardFinal.gif" alt="Earning a reward in the Bocce App"
+      <img src="{{ site.baseurl }}/images/case-studies/bocce/BocceAwardFinal.gif" alt=""
         width="100%">
       <figcaption>Earning an award in the Bocce app.</figcaption>
     </figure></p>
@@ -105,15 +105,15 @@ <h2>Custom Avatar Implementation</h2>
     <p>In the Bocce app, an avatar of the user’s future self teaches the material, motivating users and increasing information retention. Customizable avatars add a personal touch to the learning experience. <a target="_blank" href="https://www.ncbi.nlm.nih.gov/pmc/articles/PMC3949005/">Peer-reviewed studies</a> show that people are more successful in achieving long-term financial goals when they feel a stronger sense of connection and continuity with their future selves.
 
       <figure>
-        <img src="{{ site.baseurl }}/images/case-studies/bocce/BocceAgeProg.png" alt="Current self and age progressed avatars in the Bocce app."
+        <img src="{{ site.baseurl }}/images/case-studies/bocce/BocceAgeProg.png" alt=""
           width="25%">
         <figcaption>Current self and age progressed avatars in the Bocce app.</figcaption>
       </figure></p>
 
     <p>With this in mind, SmartLogic added customizable age-progressed avatars to the Bocce eLearning app. Leveraging the avatar builder, called <a target="_blank" href="https://getavataaars.com/">Avataaars</a>, the SmartLogic team ran into a challenge. The library was written for JavaScript and React, and we needed to integrate it into a Phoenix LiveView framework. In the end, the addition of this feature lets users visualize and interact with their future selves, aiming to enhance engagement with retirement planning and improve long-term financial decision-making.
 
       <figure>
-        <img src="{{ site.baseurl }}/images/case-studies/bocce/BocceAvatar.gif" alt="Creating your personalized avatar."
+        <img src="{{ site.baseurl }}/images/case-studies/bocce/BocceAvatar.gif" alt=""
           width="100%">
         <figcaption>Creating your personalized avatar.</figcaption>
       </figure></p>
@@ -145,4 +145,4 @@ <h3>Want to learn more about our work? Check out our other <a href="/case-studie
 </main>
 <footer class="footer">
   {% include footer-common.html %}
-</footer>
+</footer>
diff --git a/case-studies/challenge.html b/case-studies/challenge.html
@@ -29,7 +29,7 @@ <h1>Challenge.Gov</h1>
       <div class="container">
 
         <figure>
-          <img src="{{ site.baseurl }}/images/case-studies/challenge/challenge-homepage.png" alt="Challenge.Gov home page" width="100%"><figcaption>Challenge.Gov home page</figcaption>
+          <img src="{{ site.baseurl }}/images/case-studies/challenge/challenge-homepage.png" alt="" width="100%"><figcaption>Challenge.Gov home page</figcaption>
         </figure>
 
         <h2>America COMPETES</h2>
@@ -49,7 +49,7 @@ <h2>A New Platform for Innovation</h2>
           <p>SmartLogic and Fearless had collaborated previously on an open-source project platform for community-issued challenges,&nbsp;<a target="_blank" href="https://hackbaltimore.io/">Hack Baltimore</a>. Components from the Hack Baltimore platform, designed for similar collaboration between government agencies and community members, were repurposed for the new open-source Challenge.Gov platform.</p>
 
           <figure>
-            <img src="{{ site.baseurl }}/images/case-studies/challenge/challenge-portal.png" alt="Challenge.Gov admin portal" width="100%"><figcaption>Challenge.Gov admin portal</figcaption>
+            <img src="{{ site.baseurl }}/images/case-studies/challenge/challenge-portal.png" alt="" width="100%"><figcaption>Challenge.Gov admin portal</figcaption>
           </figure>
 
           <p>The Challenge platform has three main stakeholder groups; the administrators at GSA, challenge issuers from across the federal government, and challenge respondents from the general public.</p>