🐛 Add headings, label lists, remove aria-labels for a11y (#109)

Co-authored-by: Tatiana Mac <github@tatianamac.com>

.eleventy.js

@@ -27,10 +27,10 @@ module.exports = function(config) {
     if (existingDefinition) {
       return `<a href="${definitionPermalink(
         existingDefinition.data.slug
-      )}" aria-label="${subTermData.full_title}">${subTermData.text}</a>`;
+      )}">${subTermData.text}</a>`;
     }
 
-    return `<span aria-label="${subTermData.full_title}">${subTermData.text}</span>`;
+    return `<span>${subTermData.text}</span>`;
   });
 
   // just a debug filter to lazily inspect the content of anything in a template

11ty/_includes/components/table-of-content-item.njk

@@ -7,7 +7,7 @@
     <span class="flag__red">{{ definition.data.flag.text }}</span>
   {% endif %}
   {%- if definition.data.sub_terms -%}
-    <ul class="sub-terms">
+    <ul class="sub-terms" role="list" aria-label="{{definition.data.title}}">
       {% for term in definition.data.sub_terms %}
         <li
           class="subterm"

11ty/_includes/components/table-of-content.njk

@@ -1,10 +1,11 @@
 <section>
-  <nav class="" aria-label="Definitions">
+  <h2 id="terms-heading" class="visually-hidden">Terms</h2>
+  <nav class="" aria-labelledby="terms-heading">
     <ol class="multi-column u-no-padding-left list">
       {% for section in collections.tableOfContent %}
         <li>
-          <span class="sub-headline">{{ section.title }}</span>
-          <ol class="toc__list">
+          <h3 class="sub-headline" id="list{{loop.index}}">{{ section.title }}</h3>
+          <ol class="toc__list" role="list" aria-labelledby="list{{loop.index}}">
             {% for definition in section.definitions %}
               {% include 'components/table-of-content-item.njk' %}
             {% endfor %}

11ty/index.njk

@@ -14,7 +14,7 @@ layout: layouts/index.njk
         </p>
       </div>
       <div class="box">
-        <p class="subtitle">Ways to help</p>
+        <h2 class="subtitle">Ways to help</h2>
         <ol class="help">
           <li>Submit words and definitions or contribute to our code base through <a href="https://github.com/tatianamac/selfdefined/pulls" rel="noreferral">pull requests</a> or <a href="https://github.com/tatianamac/selfdefined/issues" rel="noreferral">issues</a>. Start with our <a href="https://github.com/tatianamac/selfdefined/blob/master/CONTRIBUTING.md" rel="noreferral">contributing guidelines</a> and <a href="/documentation/">documentation</a>.</li>
           <li>Sponsor this work through <a href="https://opencollective.com/selfdefined">Open Collective</a> or <a href="https://github.com/sponsors/tatianamac">GitHub Sponsors</a>.</li>

assets/css/base/_typography.scss

@@ -62,9 +62,11 @@ p {
 
 .subtitle {
   font-family: $ext-sans;
+  font-size: 1.25rem;
   font-weight: $regular;
   grid-column: span 2;
   letter-spacing: 0.1;
+  margin: .75rem 0;
 }
 
 .small {