Merge pull request #4914 from FlowFuse/4913-heading-aria-read-more

[4913] Accessibility: Heading hierarchy, generic "Read More" & aria-labelledby

Author: n-lark

src/_includes/benefits.njk

@@ -1,26 +1,26 @@
 <div class="flex flex-wrap justify-center mt-12 md:mt-20">
     <div class="company-value">
         {% image "./images/pictograms/remote_blue.png", "Icon representing Fully Remote", [128] %}
-        <h5>Fully Remote</h5>
+        <h3>Fully Remote</h3>
     </div>
     <div class="company-value">
         {% image "./images/pictograms/vacation_blue.png", "Icon representing Unlimited Vacation", [128] %}
-        <h5>Unlimited Vacation</h5>
+        <h3>Unlimited Vacation</h3>
     </div>
     <div class="company-value">
         {% image "./images/pictograms/time_blue.png", "Icon representing Flexible Hours", [128] %}
-        <h5>Flexible Hours</h3>
+        <h3>Flexible Hours</h3>
     </div>
     <div class="company-value">
         {% image "./images/pictograms/education_blue.png", "Icon representing Education Budget", [128] %}
-        <h5>Education Budget</h5>
+        <h3>Education Budget</h3>
     </div>
     <div class="company-value">
         {% image "./images/pictograms/equipment_blue.png", "Icon representing Equipment", [128] %}
-        <h5>Equipment</h5>
+        <h3>Equipment</h3>
     </div>
     <div class="company-value">
         {% image "./images/pictograms/parental_leave_blue.png", "Icon representing Paid Parental Leave", [128] %}
-        <h5>Paid Parental Leave</h5>
+        <h3>Paid Parental Leave</h3>
     </div>
-</div>
+</div>

src/_includes/blog/pagination.njk

@@ -1,5 +1,5 @@
 
-    <nav aria-labelledby="pagination" class="pagination mt-4">
+    <nav aria-label="Pagination" class="pagination mt-4">
         <ol class="flex flex-row w-full justify-between text-gray-600">
             <li class="flex md:flex-initial w-40 justify-start pl-2 ff-nav-blog-p"{% if not pagination.href.previous %} style="opacity: 0; pointer-events: none;"{% endif %}><a href="{{ pagination.href.previous }}">Previous</a></li>
             <li>

src/_includes/changelog/changelog-posts.njk

@@ -26,7 +26,7 @@
         <div class="prose">
             {% include "summary.njk" %}
         </div>
-        <a href="{{ item.url }}" class="group-hover:underline">read more...</a>
+        <a href="{{ item.url }}" class="group-hover:underline" aria-label="Read more about {{ item.data.title }}">read more...</a>
         {% else %}
         <div class="prose">
             {{ item.content | safe }}

src/css/style.page.css

@@ -381,8 +381,10 @@
         width: 128px;
     }
 
-    .company-value h5 {
+    .company-value h5,
+    .company-value h3 {
         font-size: 1.25rem;
+        font-weight: 600;
         margin-top: 1rem;
         margin-bottom: 3rem;
         @apply px-2 md:px-0

src/vs/kepware.njk

@@ -112,9 +112,9 @@ cta:
                                 {% include section.svgPath %}
                             </div>
                             <div class="w-full flex flex-row gap-3 mx-auto md:m-0">
-                                <h5 class="w-full md:m-0">
-                                    <div class="text-xl text-gray-600 text-center sm:text-left">{{ section.title }}</div>
-                                </h5>
+                                <h3 class="w-full md:m-0">
+                                    <div class="text-xl font-semibold text-gray-600 text-center sm:text-left">{{ section.title }}</div>
+                                </h3>
                             </div>
                         </div>
                         <div>

src/vs/litmus.njk

@@ -107,7 +107,7 @@ cta:
         <div class="mx-auto grid grid-cols-1 md:grid-cols-2 gap-8 text-center md:text-left mb-20">
             {% for card in blueCards %}
             <div class="p-6 bg-gradient-to-r from-white to-indigo-50 border border-indigo-100 rounded-lg">
-                <h5 class="text-indigo-600">{{ card.title }}</h5>
+                <h3 class="text-indigo-600 text-xl font-semibold">{{ card.title }}</h3>
                 <p>{{ card.content | safe }}</p>
             </div>
             {% endfor %}
@@ -130,9 +130,9 @@ cta:
                             </div>
                         </div>
                         <div class="w-full flex flex-row gap-3 mx-auto md:m-0">
-                            <h5 class="w-full md:m-0">
-                                <div class="text-xl text-gray-600 text-center sm:text-left">{{ section.title }}</div>
-                            </h5>
+                            <h3 class="w-full md:m-0">
+                                <div class="text-xl font-semibold text-gray-600 text-center sm:text-left">{{ section.title }}</div>
+                            </h3>
                         </div>
                     </div>
                     <div>