Merge pull request #641 from 18F/header-link-02-16

Change header links to be accessible
18F · Feb 24, 2023 · 9f7f1c4 · 9f7f1c4
2 parents f196d7f + 13355bc
commit 9f7f1c4
Show file tree

Hide file tree

Showing 6 changed files with 45 additions and 8 deletions.
diff --git a/_includes/footer.html b/_includes/footer.html
@@ -18,6 +18,13 @@
     Get in touch
 </a>
 
+<!--Add SVG for header links-->
+<div style="display: none">
+  <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <symbol viewBox="0 0 24 24" id="svg-link" xmlns="http://www.w3.org/2000/svg"><path d="M3.9 12c0-1.71 1.39-3.1 3.1-3.1h4V7H7c-2.76 0-5 2.24-5 5s2.24 5 5 5h4v-1.9H7c-1.71 0-3.1-1.39-3.1-3.1zM8 13h8v-2H8v2zm9-6h-4v1.9h4c1.71 0 3.1 1.39 3.1 3.1s-1.39 3.1-3.1 3.1h-4V17h4c2.76 0 5-2.24 5-5s-2.24-5-5-5z"></path></symbol>
+  </svg>
+</div>
+
 <!--<script src="{{site.baseurl}}/assets/js/site.js"/>-->
 <!-- Digital Analytics Program roll-up, see https://analytics.usa.gov for data -->
 <script id="_fed_an_ua_tag"

diff --git a/_layouts/card.html b/_layouts/card.html
@@ -4,11 +4,11 @@
   <body class="layout--card category--{{page.category | downcase }}">
     {% include category-setup.html %} {% include header.html %}
     <main id="main" role="main">
-      <section class="category category--{{page.category | downcase }} usa-section usa-prose" id="{{page.category | downcase }}">
-        <header class="category--header">
+      <section class="category category--{{page.category | downcase }} usa-section usa-prose">
+        <header class="category--header" aria-labelledby="{{method_category.title | downcase }}">
           <div class="grid-container">
             {% assign method_category = site.pages | where: "title", page.category | first %}
-            <h1 class="category--title">{{method_category.title | capitalize }}</h1>
+            <span class="category--title" id="{{method_category.title | downcase }}">{{method_category.title | capitalize }}</span>
             <p class="category--subtitle">{{method_category.description}}</p>
           </div>
         </header>

diff --git a/_sass/category.scss b/_sass/category.scss
@@ -5,6 +5,7 @@
     font-size: font-size('heading',12);
     line-height: line-height('sans',3);
     margin: 0;
+    font-weight:bold;
   }
 
   .category--subtitle {
@@ -124,7 +125,7 @@
       font-size: 1.5rem;
       margin-top: 2rem;
     }
-    h2 {
+    h3 {
       font-size: 1.3rem;
       margin-top: 2rem;
     }

diff --git a/_sass/footer.scss b/_sass/footer.scss
@@ -8,3 +8,27 @@
     padding-left: units(3);
   }
 }
+
+// Styling for heading links
+.usa-icon {
+  height: 1em;
+  width:1em;
+}
+
+.heading-permalink {
+  opacity: 0.2;
+}
+
+.heading-permalink:hover,
+.heading-permalink:focus {
+  opacity: 1;
+}
+
+// Visually hiding elements
+.visually-hidden {
+    position: absolute !important;
+    height: 1px; width: 1px; 
+    overflow: hidden;
+    clip: rect(1px 1px 1px 1px); /* IE6, IE7 */
+    clip: rect(1px, 1px, 1px, 1px);
+}
diff --git a/assets/application.js b/assets/application.js
@@ -25,14 +25,16 @@ const addHeadingLinks = () => {
   };
 
   const headings = document.querySelectorAll(
-    "main h1, main h2, main h3, main h4, main h5, main h6"
+    "main h2, main h3, main h4, main h5, main h6"
   );
   for (const heading of headings) {
     if (!heading.id) {
       heading.id = slugify(heading.innerText);
     }
 
-    heading.innerHTML = `${heading.innerText} <a href="#${heading.id}" aria-hidden="true" tabindex="-1" class="usa-link heading-link--symbol">#</a>`;
+    heading.innerHTML = `${heading.innerText} <span aria-hidden="true" class="heading-permalink"><a href="#${heading.id}" aria-label="Permanent link to ${heading.innerText}" class="usa-link heading-link--symbol"><svg class="usa-icon" aria-hidden="true" focusable="false" role="img">
+    <use xlink:href="#svg-link"></use>
+    </svg></a></span>`;
   }
 };
 

diff --git a/index.html b/index.html
@@ -5,13 +5,16 @@
 ---
 <div class="usa-section intro-header">
   <div class="grid-container">
+    <h1 class="visually-hidden">{% if page.title %}
+      {{ page.title }}
+    {% endif %}    </h1>
     <p class="usa-intro no-print">A collection of tools to bring human-centered design into your project.</p>
   </div>
 </div>
 <div class="usa-section">
   {% for category in site.data.categories %}
     <section class="usa-prose grid-container category usa-section category--{{ category.category_name | downcase }}" id="{{ category.category_name | downcase }}">
-      <h1 class="category--title category--{{ category.category_name | downcase }}--title">{{ category.category_name }}</h1>
+      <h2 class="category--title category--{{ category.category_name | downcase }}--title">{{ category.category_name }}</h2>
       <div class="grid-row">
         <div class="grid-col-8">
           <div class="category--header usa-content">
@@ -21,7 +24,7 @@ <h1 class="category--title category--{{ category.category_name | downcase }}--ti
           </div>
         </div>
         <div class="grid-col-4 methods-listing">
-          <h2>Methods include</h2>
+          <h3>Methods include</h3>
           <ul class="usa-list">
             {% for method in category.methods %}
             <li>