Merge pull request #2496 from mainmatter/a11y-fixes

Fix some a11y issues
mainmatter · Jul 18, 2024 · e9fa15c · e9fa15c
2 parents 21b93f2 + 9978cf9
commit e9fa15c
Show file tree

Hide file tree

Showing 3 changed files with 23 additions and 11 deletions.
diff --git a/src/assets/css/components/_tag-filter.scss b/src/assets/css/components/_tag-filter.scss
@@ -15,7 +15,12 @@
 }
 
 .tag-filter__label {
-  display: none;
+  clip: rect(1px, 1px, 1px, 1px);
+  height: 1px;
+  overflow: hidden;
+  position: absolute;
+  white-space: nowrap;
+  width: 1px;
   margin-right: 1.25rem;
 }
 
@@ -51,10 +56,13 @@
 
   .tag-filter__label {
     display: inline-flex;
+    position: relative;
+    clip: initial;
+    width: auto;
+    height: auto;
   }
 
   .tag-filter__title {
-    display: inline-flex;
     visibility: visible;
   }
 

diff --git a/src/components/global/nav.njk b/src/components/global/nav.njk
@@ -49,7 +49,7 @@
                   <a href="/services/team-reinforcement/" class="nav-submenu__link">
                     <div class="nav-submenu__link-wrap">
                       {% include 'svg/arrow.njk' %}
-                      <h4 class="nav-submenu__link-text">Team reinforcement</h4>
+                      <h2 class="h4 nav-submenu__link-text">Team reinforcement</h2>
                     </div>
                     <p class="nav-submenu__link-description">
                       Accelerate delivery and overcome challenges
@@ -60,7 +60,7 @@
                   <a href="/services/launch-your-idea/" class="nav-submenu__link">
                     <div class="nav-submenu__link-wrap">
                       {% include 'svg/arrow.njk' %}
-                      <h4 class="nav-submenu__link-text">Launch your idea</h4>
+                      <h2 class="h4 nav-submenu__link-text">Launch your idea</h2>
                     </div>
                     <p class="nav-submenu__link-description">From Concept to MVP</p>
                   </a>
@@ -69,7 +69,7 @@
                   <a href="/services/tech-modernization/" class="nav-submenu__link">
                     <div class="nav-submenu__link-wrap">
                       {% include 'svg/arrow.njk' %}
-                      <h4 class="nav-submenu__link-text">Modernize your tech stack</h4>
+                      <h2 class="h4 nav-submenu__link-text">Modernize your tech stack</h2>
                     </div>
                     <p class="nav-submenu__link-description">Upgrades instead of rewrites</p>
                   </a>
@@ -78,7 +78,7 @@
                   <a href="/services/strategic-advice/" class="nav-submenu__link">
                     <div class="nav-submenu__link-wrap">
                       {% include 'svg/arrow.njk' %}
-                      <h4 class="nav-submenu__link-text">Get strategic advice</h4>
+                      <h2 class="h4 nav-submenu__link-text">Get strategic advice</h2>
                     </div>
                     <p class="nav-submenu__link-description">
                       Assessments, transformation and scaling
@@ -89,7 +89,7 @@
                   <a href="/services/workshops/" class="nav-submenu__link">
                     <div class="nav-submenu__link-wrap">
                       {% include 'svg/arrow.njk' %}
-                      <h4 class="nav-submenu__link-text">Tailored Workshops</h4>
+                      <h2 class="h4 nav-submenu__link-text">Tailored Workshops</h2>
                     </div>
                   </a>
                 </li>

diff --git a/src/components/strategy-list.njk b/src/components/strategy-list.njk
@@ -2,18 +2,22 @@
 {% macro strategyList(id, eyebrow, list) %}
   <section class="strategy-list my-10">
     <div class="strategy-list__container container container--lg">
-      <h5 class="strategy-list__eyebrow">{{ eyebrow }}</h5>
+      {% if eyebrow %}
+        <h2 class="strategy-list__eyebrow h5">{{ eyebrow }}</h2>
+      {% endif %}
       {% for el in list %}
         {% set listIndex = loop.index %}
         <div id="{{ id }}-list-{{ loop.index }}" class="strategy-list__element">
           <div class="strategy-list__wrapper">
-            <h2 class="strategy-list__number decorative">{{ loop.index }}</h2>
+            <span class="strategy-list__number decorative h2" role="presentation"
+              >{{ loop.index }}</span
+            >
             <div class="strategy-list__content">
               {% if el.eyebrow %}
-                <h5 class="strategy-list__eyebrow mb-015">{{ el.eyebrow }}</h5>
+                <span class="strategy-list__eyebrow mb-015 h5">{{ el.eyebrow }}</span>
               {% endif %}
               {% if el.title %}
-                <h4 class="strategy-list__title">{{ el.title }}</h4>
+                <p class="strategy-list__title h4">{{ el.title }}</p>
               {% endif %}
               {% if el.text %}
                 <p class="mt-2">{{ el.text | safe }}</p>