Re-order card markup for better accessibility

I tried the page with NVDA, and the aria-label approach didn't work (apparently it's not valid for 'li' tags). So instead, I just tweaked the markup to properly present the item's title first.

Author: 17cupsofcoffee

sass/_extra.scss

@@ -45,6 +45,11 @@
     height: 256px;
 }
 
+.ui.cards > .card > .content > .header:not(.ui), .ui.card > .content > .header:not(.ui) {
+    display: inline-block;
+    margin-bottom: 0;
+}
+
 .ui.card > .image > img, .ui.cards > .card > .image > img {
     object-fit: cover;
     width: 100%;

templates/categories/macros.html

@@ -98,6 +98,14 @@
     {% endif %}
 
     <div class="content">
+        <h3 class="header">
+            {% if primary_url %}
+                <a href="{{ primary_url }}">{{ name }}</a>
+            {% else %}
+                {{ name }}
+            {% endif %}
+        </h3>
+
         <a class="right floated" href="#{{ name | slugify }}" id="{{ name | slugify }}" aria-label="Permanent link for {{ name }}">
             <i class="hashtag icon" aria-hidden="true"></i>
         </a>
@@ -120,14 +128,6 @@
             </a>
         {% endif %}
 
-        <div class="header">
-            {% if primary_url %}
-                <a href="{{ primary_url }}">{{ name }}</a>
-            {% else %}
-                {{ name }}
-            {% endif %}
-        </div>
-
         <div class="meta">
             {% for category in item.categories %}
                 {% set category_data = get_page(path="." ~ section.path ~ category ~ ".md") %}