Fixed multiple h1 across Methods

AnitaYCheng · AnitaYCheng · commit 9bc7c18be071 · 2023-02-17T15:33:50.000-08:00
Updated templates so that each method has one h1, assigned category h1 on each method category to be a header label (instead of an h1), added a visually-hidden h1 to the homepage.
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
@@ -124,7 +124,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
@@ -18,4 +18,13 @@
 a.heading-permalink:hover,
 a.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/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>

Original file line number	Diff line number	Diff line change
`@@ -124,7 +124,7 @@`
`124`	`124`	`font-size: 1.5rem;`
`125`	`125`	`margin-top: 2rem;`
`126`	`126`	`}`
`127`		`- h2 {`
	`127`	`+ h3 {`
`128`	`128`	`font-size: 1.3rem;`
`129`	`129`	`margin-top: 2rem;`
`130`	`130`	`}`