diff --git a/mergeAxeResults.js b/mergeAxeResults.js
index 98f0a302..1d45cdfd 100644
--- a/mergeAxeResults.js
+++ b/mergeAxeResults.js
@@ -177,14 +177,18 @@ const writeHTML = async (allIssues, storagePath, htmlFilename = 'report') => {
 // };
 
 const pushResults = async (rPath, allIssues) => {
-  const parsedContent = await parseContentToJson(rPath);
-  const { url, pageTitle } = parsedContent;
+  const pageResults = await parseContentToJson(rPath);
+  const { url, pageTitle } = pageResults;
 
   allIssues.totalPagesScanned += 1;
-  allIssues.topFiveMustFix.push({ url, pageTitle, totalMustFix: parsedContent.mustFix.totalItems });
+
+  const totalIssuesInPage = new Set();
+  Object.keys(pageResults.mustFix.rules).forEach(k => totalIssuesInPage.add(k));
+  Object.keys(pageResults.goodToFix.rules).forEach(k => totalIssuesInPage.add(k));
+  allIssues.topFiveMostIssues.push({ url, pageTitle, totalIssues: totalIssuesInPage.size });
 
   ['mustFix', 'goodToFix', 'passed'].forEach(category => {
-    const { totalItems, rules } = parsedContent[category];
+    const { totalItems, rules } = pageResults[category];
     const currCategoryFromAllIssues = allIssues.items[category];
 
     currCategoryFromAllIssues.totalItems += totalItems;
@@ -237,8 +241,8 @@ const flattenAndSortResults = allIssues => {
       })
       .sort((rule1, rule2) => rule2.totalItems - rule1.totalItems);
   });
-  allIssues.topFiveMustFix.sort((page1, page2) => page2.totalMustFix - page1.totalMustFix);
-  allIssues.topFiveMustFix = allIssues.topFiveMustFix.slice(0, 5);
+  allIssues.topFiveMostIssues.sort((page1, page2) => page2.totalIssues - page1.totalIssues);
+  allIssues.topFiveMostIssues = allIssues.topFiveMostIssues.slice(0, 5);
   // convert the set to an array
   allIssues.wcagViolations = Array.from(allIssues.wcagViolations);
 };
@@ -254,7 +258,7 @@ export const generateArtifacts = async (randomToken, urlScanned, scanType, viewp
     viewport,
     totalPagesScanned: 0,
     totalItems: 0,
-    topFiveMustFix: [],
+    topFiveMostIssues: [],
     wcagViolations: new Set(),
     items: {
       mustFix: { description: itemTypeDescription.mustFix, totalItems: 0, rules: {} },
diff --git a/package-lock.json b/package-lock.json
index eac178da..72385bfc 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -1,12 +1,12 @@
 {
   "name": "purple-hats",
-  "version": "0.0.13",
+  "version": "0.0.14",
   "lockfileVersion": 2,
   "requires": true,
   "packages": {
     "": {
       "name": "purple-hats",
-      "version": "0.0.13",
+      "version": "0.0.14",
       "license": "ISC",
       "dependencies": {
         "axe-core": "^4.6.2",
diff --git a/package.json b/package.json
index 4f95cda2..aae4cfa3 100644
--- a/package.json
+++ b/package.json
@@ -1,7 +1,7 @@
 {
   "name": "purple-hats",
   "main": "index.js",
-  "version": "0.0.13",
+  "version": "0.0.14",
   "type": "module",
   "imports": {
     "#root/*.js": "./*.js"
diff --git a/static/ejs/partials/components/categorySelector.ejs b/static/ejs/partials/components/categorySelector.ejs
index 65ec8070..55a1c553 100644
--- a/static/ejs/partials/components/categorySelector.ejs
+++ b/static/ejs/partials/components/categorySelector.ejs
@@ -1,20 +1,26 @@
-<% const formattedCategoryTitles = {
+<% const formattedCategoryTitles = { 
   mustFix: "Must Fix",
   goodToFix: "Good to Fix",
   passed: "Passed"
 } %>
 
 <button
+  aria-labelledby="<%= category %>Title <%= category %>ItemsInformation"
+  aria-describedby="<%= category %>AriaDescription"
   id="<%= category %>Selector"
   class="h-100 category-selector <%= category %>"
   onclick="changeSelectedCategory(event, '<%= category %>')"
+  onfocus="document.getElementById('<%= category %>Description').dispatchEvent(new MouseEvent('mouseover'))"
+  onblur="document.getElementById('<%= category %>Description').dispatchEvent(new MouseEvent('mouseout'))"
+  onmousedown="event.preventDefault()"
 >
   <div class="d-flex align-items-center mb-3">
-    <h2 class="d-flex align-items-center category-name fw-bold d-inline mb-0">
+    <span id="<%= category %>Title" class="d-flex align-items-center category-name fw-bold d-inline mb-0">
       <%= formattedCategoryTitles[category] %>
-    </h2>
+    </span>
     <svg
-      tabindex="0"
+      tabindex="-1"
+      id="<%= category %>Description"
       class="ms-2"
       data-bs-toggle="tooltip"
       data-bs-placement="top"
@@ -38,8 +44,13 @@
       </defs>
     </svg>
   </div>
-  <span>
-    <% if (category !== 'passed') { %> <%= items[category].rules.length %> issues / <% } %> <%=
-    items[category].totalItems %> occurrences
+  <span id="<%= category %>ItemsInformation" class="category-information">
+    <% if (category !== 'passed' && items[category].totalItems !== 0) { %> 
+      <%= items[category].rules.length %> issues / <%= items[category].totalItems %> occurrences
+    <% } else if (category !== 'passed' && items[category].totalItems === 0) { %>
+      0 issues
+    <% } else { %>
+      <%= items[category].totalItems %> occurrences
+    <% } %>
   </span>
 </button>
diff --git a/static/ejs/partials/components/ruleOffcanvas.ejs b/static/ejs/partials/components/ruleOffcanvas.ejs
index b87431aa..a38fb1c7 100644
--- a/static/ejs/partials/components/ruleOffcanvas.ejs
+++ b/static/ejs/partials/components/ruleOffcanvas.ejs
@@ -7,7 +7,7 @@
 >
   <div class="p-4">
     <div class="offcanvas-header p-0">
-      <h3 class="offcanvas-title" id="expandedRuleName">Offcanvas</h3>
+      <h2 class="offcanvas-title" id="expandedRuleName"></h2>
       <button
         type="button"
         class="btn-close text-reset"
@@ -15,24 +15,14 @@
         aria-label="Close"
       ></button>
     </div>
-    <div class="collapse" id="expandedRuleDescription" aria-expanded="false"></div>
-    <button
-      role="button"
-      id="expandedRuleCollapseButton"
-      class="collapsed"
-      data-bs-toggle="collapse"
-      href="#expandedRuleDescription"
-      aria-expanded="false"
-      data-bs-target="#expandedRuleDescription"
-      aria-controls="expandedRuleDescription"
-    ></button>
+    <div id="expandedRuleDescription"></div>
     <a id="expandedRuleHelpUrl" href="#" target="_blank">Learn more about this issue</a>
-    <h4>Conformance:</h4>
+    <h3 id="conformance-header">Conformance:</h3>
     <div id="expandedRuleConformance"></div>
   </div>
   <div class="offcanvas-body">
     <div id="expandedRuleInfoText"></div>
-    <div id="expandedRuleCategorySelectors"></div>
+    <nav id="expandedRuleCategorySelectors" aria-label="Occurrence category"></nav>
     <div id="expandedRuleCategoryContent" class="mt-4"></div>
   </div>
 </div>
diff --git a/static/ejs/partials/components/scanAbout.ejs b/static/ejs/partials/components/scanAbout.ejs
index 30dc913a..eab9c875 100644
--- a/static/ejs/partials/components/scanAbout.ejs
+++ b/static/ejs/partials/components/scanAbout.ejs
@@ -1,144 +1,145 @@
-<div id="scan-about" class="z-1 card flex-shrink-0">
+<aside id="scan-about" class="z-1 card flex-shrink-0">
   <h2>About this scan</h2>
-  <div>
-    <svg
-      aria-label="Start time"
-      width="18"
-      height="19"
-      viewBox="0 0 18 19"
-      fill="none"
-      xmlns="http://www.w3.org/2000/svg"
-    >
-      <path
-        fill-rule="evenodd"
-        clip-rule="evenodd"
-        d="M3.69863 0.927936C3.69863 0.41626 4.11262 0.00146484 4.62329 0.00146484C5.13396 0.00146484 5.54795 0.41626 5.54795 0.927936V1.85441H9.24658V0.927936C9.24658 0.41626 9.66056 0.00146484 10.1712 0.00146484C10.6819 0.00146484 11.0959 0.41626 11.0959 0.927936V1.85441H12.0205C13.5526 1.85441 14.7945 3.09879 14.7945 4.63382V8.51434C14.6723 8.5058 14.549 8.50146 14.4247 8.50146C14.0768 8.50146 13.7367 8.53544 13.4075 8.60029V7.41323H1.38699V12.9721C1.38699 13.7396 2.00795 14.3618 2.77397 14.3618H9.1446C9.18737 14.8464 9.29359 15.3125 9.45476 15.7515H2.77397C1.24195 15.7515 0 14.5071 0 12.9721V4.63382C0 3.09879 1.24195 1.85441 2.77397 1.85441H3.69863V0.927936ZM9.24658 3.24411V3.70735C9.24658 4.21902 9.66056 4.63382 10.1712 4.63382C10.6819 4.63382 11.0959 4.21902 11.0959 3.70735V3.24411H12.0205C12.7866 3.24411 13.4075 3.8663 13.4075 4.63382V6.48676H1.38699V4.63382C1.38699 3.8663 2.00795 3.24411 2.77397 3.24411H3.69863V3.70735C3.69863 4.21902 4.11262 4.63382 4.62329 4.63382C5.13396 4.63382 5.54795 4.21902 5.54795 3.70735V3.24411H9.24658ZM17.0959 14.0015C17.0959 15.7043 15.7343 17.0848 14.0548 17.0848C12.3752 17.0848 11.0137 15.7043 11.0137 14.0015C11.0137 12.2986 12.3752 10.9181 14.0548 10.9181C15.7343 10.9181 17.0959 12.2986 17.0959 14.0015ZM18 14.0015C18 16.2106 16.2337 18.0015 14.0548 18.0015C11.8759 18.0015 10.1096 16.2106 10.1096 14.0015C10.1096 11.7923 11.8759 10.0015 14.0548 10.0015C16.2337 10.0015 18 11.7923 18 14.0015ZM14.0548 11.5015C13.8732 11.5015 13.726 11.6507 13.726 11.8348V13.9181C13.726 14.0241 13.7748 14.1185 13.8507 14.1795C13.8597 14.191 13.8696 14.2021 13.8803 14.2125L14.8486 15.161C14.9791 15.2889 15.1873 15.2853 15.3134 15.1529C15.4396 15.0205 15.436 14.8095 15.3054 14.6816L14.3836 13.7785V11.8348C14.3836 11.6507 14.2364 11.5015 14.0548 11.5015Z"
-        fill="#CED4DA"
-      />
-    </svg>
-    <span><%= startTime %></span>
-  </div>
-  <div>
-    <svg
-      aria-label="URL scanned"
-      width="18"
-      height="15"
-      viewBox="0 0 18 15"
-      fill="none"
-      xmlns="http://www.w3.org/2000/svg"
-    >
-      <path
-        fill-rule="evenodd"
-        clip-rule="evenodd"
-        d="M16.5789 2.80146H1.42105V12.6015H16.5789V2.80146ZM18 0.934798V2.80146V13.0681C18 13.5836 17.5758 14.0015 17.0526 14.0015H0.947369C0.42415 14.0015 0 13.5836 0 13.0681V2.80146V0.934798C0 0.419332 0.42415 0.00146484 0.947369 0.00146484H17.0526C17.5758 0.00146484 18 0.419332 18 0.934798ZM3.07895 2.3348C2.68653 2.3348 2.36842 2.0214 2.36842 1.6348C2.36842 1.2482 2.68653 0.934798 3.07895 0.934798C3.47136 0.934798 3.78947 1.2482 3.78947 1.6348C3.78947 2.0214 3.47136 2.3348 3.07895 2.3348ZM4.26316 1.6348C4.26316 2.0214 4.58127 2.3348 4.97368 2.3348C5.3661 2.3348 5.68421 2.0214 5.68421 1.6348C5.68421 1.2482 5.3661 0.934798 4.97368 0.934798C4.58127 0.934798 4.26316 1.2482 4.26316 1.6348ZM6.86842 2.3348C6.47601 2.3348 6.15789 2.0214 6.15789 1.6348C6.15789 1.2482 6.47601 0.934798 6.86842 0.934798C7.26083 0.934798 7.57895 1.2482 7.57895 1.6348C7.57895 2.0214 7.26083 2.3348 6.86842 2.3348Z"
-        fill="#CED4DA"
-      />
-    </svg>
-    <a aria-label="URL scanned" href="<%= urlScanned %>" target="_blank"><%= urlScanned %></a>
-  </div>
-  <div>
-    <% if (viewport.startsWith('Desktop')) { %>
-    <svg
-      aria-label="Viewport"
-      width="18"
-      height="15.5"
-      viewBox="0 0 18 15.5"
-      fill="none"
-      xmlns="http://www.w3.org/2000/svg"
-    >
-      <path
-        d="M16.56 0.19H1.44A1.26 1.26 0 0 0 0.18 1.452v10.092a1.26 1.26 0 0 0 1.26 1.262h5.67v1.242H5.85c-0.347 0 -0.63 0.282 -0.63 0.63 0 0.349 0.282 0.63 0.63 0.63h6.3c0.347 0 0.63 -0.282 0.63 -0.63 0 -0.349 -0.282 -0.63 -0.63 -0.63h-1.26v-1.242h5.67c0.697 0 1.26 -0.565 1.26 -1.262V1.452A1.26 1.26 0 0 0 16.56 0.19Zm0 10.98c0 0.218 -0.176 0.394 -0.394 0.394H1.834A0.394 0.394 0 0 1 1.44 11.17V1.866c0 -0.218 0.176 -0.394 0.394 -0.394H16.168c0.218 0 0.394 0.176 0.394 0.394L16.56 11.17Z"
-        fill="#CED4DA"
-      />
-    </svg>
-    <% } else if (viewport.startsWith('CustomWidth')) { %>
-    <svg
-      aria-label="Viewport"
-      width="18"
-      height="18"
-      viewBox="0 0 18 18"
-      fill="none"
-      xmlns="http://www.w3.org/2000/svg"
-    >
-      <path
-        fill-rule="evenodd"
-        clip-rule="evenodd"
-        d="M0 3.6a3.6 3.6 0 0 1 3.6 -3.6h10.8a3.6 3.6 0 0 1 3.6 3.6v10.8a3.6 3.6 0 0 1 -3.6 3.6H3.6a3.6 3.6 0 0 1 -3.6 -3.6V3.6Zm3.329 6.263a0.863 0.863 0 0 0 -0.863 0.863v3.945a0.863 0.863 0 0 0 0.986 0.854c0.041 0.006 0.081 0.009 0.123 0.009h3.945a0.863 0.863 0 1 0 0 -1.726H4.192v-3.083a0.863 0.863 0 0 0 -0.863 -0.863Zm12.452 -2.588a0.863 0.863 0 1 1 -1.726 0V4.192h-3.328a0.863 0.863 0 0 1 0 -1.726h3.945c0.042 0 0.083 0.004 0.123 0.009a0.863 0.863 0 0 1 0.986 0.854v3.946Z"
-        fill="#CED4DA"
-      />
-    </svg>
-    <% } else { %>
-    <svg
-      aria-label="Viewport"
-      width="12"
-      height="22"
-      viewBox="0 0 12 22"
-      fill="none"
-      xmlns="http://www.w3.org/2000/svg"
-    >
-      <path
-        fill-rule="evenodd"
-        clip-rule="evenodd"
-        d="M1.94595 0.00146484C0.87123 0.00146484 0 0.856193 0 1.91056V19.0924C0 20.1467 0.87123 21.0015 1.94595 21.0015H10.0541C11.1288 21.0015 12 20.1467 12 19.0924V1.91056C12 0.856194 11.1288 0.00146484 10.0541 0.00146484H1.94595ZM10.7027 2.54692H1.2973V17.8196H10.7027V2.54692ZM4.21622 1.1151C4.21622 1.02724 4.28882 0.95601 4.37838 0.95601H7.94595C8.03551 0.95601 8.10811 1.02724 8.10811 1.1151C8.10811 1.20296 8.03551 1.27419 7.94595 1.27419H4.37838C4.28882 1.27419 4.21622 1.20296 4.21622 1.1151ZM6.16216 20.3651C6.69952 20.3651 7.13514 19.9377 7.13514 19.4106C7.13514 18.8834 6.69952 18.456 6.16216 18.456C5.6248 18.456 5.18919 18.8834 5.18919 19.4106C5.18919 19.9377 5.6248 20.3651 6.16216 20.3651Z"
-        fill="#CED4DA"
-      />
-    </svg>
-    <% } %>
-    <span>
-      <%= viewport.startsWith("CustomWidth") ? `${viewport.split("_")[1]} width` : viewport %>
-      viewport
-      <%= scanType === 'Customized' ? '(customized scan)' : '' %>
-    </span>
-  </div>
-  <div>
-    <svg
-      aria-label="Pages scanned"
-      width="17"
-      height="18"
-      viewBox="0 0 17 18"
-      fill="none"
-      xmlns="http://www.w3.org/2000/svg"
-    >
-      <g clip-path="url(#clip0_1630_1547)">
+  <ul>
+    <li>
+      <svg
+        aria-label="Start time"
+        width="18"
+        height="19"
+        viewBox="0 0 18 19"
+        fill="none"
+        xmlns="http://www.w3.org/2000/svg"
+      >
         <path
-          d="M14.0299 1.09229H2.97102C2.59546 1.09229 2.29102 1.39673 2.29102 1.77228V16.231C2.29102 16.6065 2.59546 16.911 2.97102 16.911H14.0299C14.4054 16.911 14.7099 16.6065 14.7099 16.231V1.77228C14.7099 1.39673 14.4054 1.09229 14.0299 1.09229Z"
-          stroke="#CED4DA"
-          stroke-width="1.7369"
+          fill-rule="evenodd"
+          clip-rule="evenodd"
+          d="M3.69863 0.927936C3.69863 0.41626 4.11262 0.00146484 4.62329 0.00146484C5.13396 0.00146484 5.54795 0.41626 5.54795 0.927936V1.85441H9.24658V0.927936C9.24658 0.41626 9.66056 0.00146484 10.1712 0.00146484C10.6819 0.00146484 11.0959 0.41626 11.0959 0.927936V1.85441H12.0205C13.5526 1.85441 14.7945 3.09879 14.7945 4.63382V8.51434C14.6723 8.5058 14.549 8.50146 14.4247 8.50146C14.0768 8.50146 13.7367 8.53544 13.4075 8.60029V7.41323H1.38699V12.9721C1.38699 13.7396 2.00795 14.3618 2.77397 14.3618H9.1446C9.18737 14.8464 9.29359 15.3125 9.45476 15.7515H2.77397C1.24195 15.7515 0 14.5071 0 12.9721V4.63382C0 3.09879 1.24195 1.85441 2.77397 1.85441H3.69863V0.927936ZM9.24658 3.24411V3.70735C9.24658 4.21902 9.66056 4.63382 10.1712 4.63382C10.6819 4.63382 11.0959 4.21902 11.0959 3.70735V3.24411H12.0205C12.7866 3.24411 13.4075 3.8663 13.4075 4.63382V6.48676H1.38699V4.63382C1.38699 3.8663 2.00795 3.24411 2.77397 3.24411H3.69863V3.70735C3.69863 4.21902 4.11262 4.63382 4.62329 4.63382C5.13396 4.63382 5.54795 4.21902 5.54795 3.70735V3.24411H9.24658ZM17.0959 14.0015C17.0959 15.7043 15.7343 17.0848 14.0548 17.0848C12.3752 17.0848 11.0137 15.7043 11.0137 14.0015C11.0137 12.2986 12.3752 10.9181 14.0548 10.9181C15.7343 10.9181 17.0959 12.2986 17.0959 14.0015ZM18 14.0015C18 16.2106 16.2337 18.0015 14.0548 18.0015C11.8759 18.0015 10.1096 16.2106 10.1096 14.0015C10.1096 11.7923 11.8759 10.0015 14.0548 10.0015C16.2337 10.0015 18 11.7923 18 14.0015ZM14.0548 11.5015C13.8732 11.5015 13.726 11.6507 13.726 11.8348V13.9181C13.726 14.0241 13.7748 14.1185 13.8507 14.1795C13.8597 14.191 13.8696 14.2021 13.8803 14.2125L14.8486 15.161C14.9791 15.2889 15.1873 15.2853 15.3134 15.1529C15.4396 15.0205 15.436 14.8095 15.3054 14.6816L14.3836 13.7785V11.8348C14.3836 11.6507 14.2364 11.5015 14.0548 11.5015Z"
+          fill="#CED4DA"
         />
+      </svg>
+      <span><%= startTime %></span>
+    </li>
+    <li>
+      <svg
+        aria-label="URL scanned"
+        width="18"
+        height="15"
+        viewBox="0 0 18 15"
+        fill="none"
+        xmlns="http://www.w3.org/2000/svg"
+      >
         <path
-          d="M5.03369 4.92139H11.9663"
-          stroke="#CED4DA"
-          stroke-width="1.189"
-          stroke-linecap="round"
+          fill-rule="evenodd"
+          clip-rule="evenodd"
+          d="M16.5789 2.80146H1.42105V12.6015H16.5789V2.80146ZM18 0.934798V2.80146V13.0681C18 13.5836 17.5758 14.0015 17.0526 14.0015H0.947369C0.42415 14.0015 0 13.5836 0 13.0681V2.80146V0.934798C0 0.419332 0.42415 0.00146484 0.947369 0.00146484H17.0526C17.5758 0.00146484 18 0.419332 18 0.934798ZM3.07895 2.3348C2.68653 2.3348 2.36842 2.0214 2.36842 1.6348C2.36842 1.2482 2.68653 0.934798 3.07895 0.934798C3.47136 0.934798 3.78947 1.2482 3.78947 1.6348C3.78947 2.0214 3.47136 2.3348 3.07895 2.3348ZM4.26316 1.6348C4.26316 2.0214 4.58127 2.3348 4.97368 2.3348C5.3661 2.3348 5.68421 2.0214 5.68421 1.6348C5.68421 1.2482 5.3661 0.934798 4.97368 0.934798C4.58127 0.934798 4.26316 1.2482 4.26316 1.6348ZM6.86842 2.3348C6.47601 2.3348 6.15789 2.0214 6.15789 1.6348C6.15789 1.2482 6.47601 0.934798 6.86842 0.934798C7.26083 0.934798 7.57895 1.2482 7.57895 1.6348C7.57895 2.0214 7.26083 2.3348 6.86842 2.3348Z"
+          fill="#CED4DA"
         />
+      </svg>
+      <a aria-label="URL scanned" href="<%= urlScanned %>" target="_blank"><%= urlScanned %></a>
+    </li>
+    <li>
+      <% if (viewport.startsWith('Desktop')) { %>
+      <svg
+        aria-label="Viewport"
+        width="18"
+        height="15.5"
+        viewBox="0 0 18 15.5"
+        fill="none"
+        xmlns="http://www.w3.org/2000/svg"
+      >
         <path
-          d="M5.03369 7.64136H11.9663"
-          stroke="#CED4DA"
-          stroke-width="1.189"
-          stroke-linecap="round"
+          d="M16.56 0.19H1.44A1.26 1.26 0 0 0 0.18 1.452v10.092a1.26 1.26 0 0 0 1.26 1.262h5.67v1.242H5.85c-0.347 0 -0.63 0.282 -0.63 0.63 0 0.349 0.282 0.63 0.63 0.63h6.3c0.347 0 0.63 -0.282 0.63 -0.63 0 -0.349 -0.282 -0.63 -0.63 -0.63h-1.26v-1.242h5.67c0.697 0 1.26 -0.565 1.26 -1.262V1.452A1.26 1.26 0 0 0 16.56 0.19Zm0 10.98c0 0.218 -0.176 0.394 -0.394 0.394H1.834A0.394 0.394 0 0 1 1.44 11.17V1.866c0 -0.218 0.176 -0.394 0.394 -0.394H16.168c0.218 0 0.394 0.176 0.394 0.394L16.56 11.17Z"
+          fill="#CED4DA"
         />
+      </svg>
+      <% } else if (viewport.startsWith('CustomWidth')) { %>
+      <svg
+        aria-label="Viewport"
+        width="18"
+        height="18"
+        viewBox="0 0 18 18"
+        fill="none"
+        xmlns="http://www.w3.org/2000/svg"
+      >
         <path
-          d="M5.03369 10.3613H11.9663"
-          stroke="#CED4DA"
-          stroke-width="1.189"
-          stroke-linecap="round"
+          fill-rule="evenodd"
+          clip-rule="evenodd"
+          d="M0 3.6a3.6 3.6 0 0 1 3.6 -3.6h10.8a3.6 3.6 0 0 1 3.6 3.6v10.8a3.6 3.6 0 0 1 -3.6 3.6H3.6a3.6 3.6 0 0 1 -3.6 -3.6V3.6Zm3.329 6.263a0.863 0.863 0 0 0 -0.863 0.863v3.945a0.863 0.863 0 0 0 0.986 0.854c0.041 0.006 0.081 0.009 0.123 0.009h3.945a0.863 0.863 0 1 0 0 -1.726H4.192v-3.083a0.863 0.863 0 0 0 -0.863 -0.863Zm12.452 -2.588a0.863 0.863 0 1 1 -1.726 0V4.192h-3.328a0.863 0.863 0 0 1 0 -1.726h3.945c0.042 0 0.083 0.004 0.123 0.009a0.863 0.863 0 0 1 0.986 0.854v3.946Z"
+          fill="#CED4DA"
         />
+      </svg>
+      <% } else { %>
+      <svg
+        aria-label="Viewport"
+        width="12"
+        height="22"
+        viewBox="0 0 12 22"
+        fill="none"
+        xmlns="http://www.w3.org/2000/svg"
+      >
         <path
-          d="M5.03369 13.0813H11.9663"
-          stroke="#CED4DA"
-          stroke-width="1.189"
-          stroke-linecap="round"
+          fill-rule="evenodd"
+          clip-rule="evenodd"
+          d="M1.94595 0.00146484C0.87123 0.00146484 0 0.856193 0 1.91056V19.0924C0 20.1467 0.87123 21.0015 1.94595 21.0015H10.0541C11.1288 21.0015 12 20.1467 12 19.0924V1.91056C12 0.856194 11.1288 0.00146484 10.0541 0.00146484H1.94595ZM10.7027 2.54692H1.2973V17.8196H10.7027V2.54692ZM4.21622 1.1151C4.21622 1.02724 4.28882 0.95601 4.37838 0.95601H7.94595C8.03551 0.95601 8.10811 1.02724 8.10811 1.1151C8.10811 1.20296 8.03551 1.27419 7.94595 1.27419H4.37838C4.28882 1.27419 4.21622 1.20296 4.21622 1.1151ZM6.16216 20.3651C6.69952 20.3651 7.13514 19.9377 7.13514 19.4106C7.13514 18.8834 6.69952 18.456 6.16216 18.456C5.6248 18.456 5.18919 18.8834 5.18919 19.4106C5.18919 19.9377 5.6248 20.3651 6.16216 20.3651Z"
+          fill="#CED4DA"
         />
-      </g>
-      <defs>
-        <clipPath id="clip0_1630_1547">
-          <rect width="17" height="17" fill="white" transform="translate(0 0.501465)" />
-        </clipPath>
-      </defs>
-    </svg>
-    <span><%= totalPagesScanned %> pages</span>
-  </div>
-  <hr class="mt-3 mb-4" />
+      </svg>
+      <% } %>
+      <span>
+        <%= viewport.startsWith("CustomWidth") ? `${viewport.split("_")[1]} width` : viewport %>
+        viewport <%= scanType === 'Customized' ? '(customized scan)' : '' %>
+      </span>
+    </li>
+    <li>
+      <svg
+        aria-label="Pages scanned"
+        width="17"
+        height="18"
+        viewBox="0 0 17 18"
+        fill="none"
+        xmlns="http://www.w3.org/2000/svg"
+      >
+        <g clip-path="url(#clip0_1630_1547)">
+          <path
+            d="M14.0299 1.09229H2.97102C2.59546 1.09229 2.29102 1.39673 2.29102 1.77228V16.231C2.29102 16.6065 2.59546 16.911 2.97102 16.911H14.0299C14.4054 16.911 14.7099 16.6065 14.7099 16.231V1.77228C14.7099 1.39673 14.4054 1.09229 14.0299 1.09229Z"
+            stroke="#CED4DA"
+            stroke-width="1.7369"
+          />
+          <path
+            d="M5.03369 4.92139H11.9663"
+            stroke="#CED4DA"
+            stroke-width="1.189"
+            stroke-linecap="round"
+          />
+          <path
+            d="M5.03369 7.64136H11.9663"
+            stroke="#CED4DA"
+            stroke-width="1.189"
+            stroke-linecap="round"
+          />
+          <path
+            d="M5.03369 10.3613H11.9663"
+            stroke="#CED4DA"
+            stroke-width="1.189"
+            stroke-linecap="round"
+          />
+          <path
+            d="M5.03369 13.0813H11.9663"
+            stroke="#CED4DA"
+            stroke-width="1.189"
+            stroke-linecap="round"
+          />
+        </g>
+        <defs>
+          <clipPath id="clip0_1630_1547">
+            <rect width="17" height="17" fill="white" transform="translate(0 0.501465)" />
+          </clipPath>
+        </defs>
+      </svg>
+      <span><%= totalPagesScanned %> pages</span>
+    </li>
+  </ul>
+  <hr class="my-4" />
   <iframe
     id="a11y-online-banner"
     title="GovTech Accessibility Enabling Team information banner"
@@ -151,4 +152,4 @@
       document.getElementById('a11y-online-banner').style.display = 'none';
     }
   </script>
-</div>
+</aside>
diff --git a/static/ejs/partials/components/topFive.ejs b/static/ejs/partials/components/topFive.ejs
index 0a8ee10f..3fd60a4b 100644
--- a/static/ejs/partials/components/topFive.ejs
+++ b/static/ejs/partials/components/topFive.ejs
@@ -1,14 +1,15 @@
 <div id="top-five-card" class="card h-100">
   <div class="card-body">
-    <h2>Top 5 affected pages with the most must fix elements</h2>
-    <% topFiveMustFix.forEach((page, index) => { %>
-      <div class="d-flex justify-content-between">
-        <a href="<%= page.url %>" target="_blank"><%= page.pageTitle %></a>
-        <span aria-label="<%= page.totalMustFix %> must fix items" class="fw-bold ms-2"><%= page.totalMustFix %></span>
-      </div>
-      <% if (index < topFiveMustFix.length - 1) { %>
-        <hr class="my-2"/>
-      <% } %> 
-    <% }) %>
+    <h2>Top 5 affected pages with the most issues</h2>
+    <ul class="unbulleted-list">
+      <% topFiveMostIssues.forEach((page, index) => { %>
+        <% if (page.totalIssues !== 0) { %> 
+          <li class="d-flex justify-content-between">
+            <a href="<%= page.url %>" target="_blank"><%= page.pageTitle %></a>
+            <span aria-label="<%= page.totalIssues %> issues" class="fw-bold ms-2"><%= page.totalIssues %></span>
+          </li>
+        <% } %>
+      <% }) %>
+  </ul>
   </div>
 </div>
diff --git a/static/ejs/partials/components/wcagCompliance.ejs b/static/ejs/partials/components/wcagCompliance.ejs
index 5de8b491..590a43ab 100644
--- a/static/ejs/partials/components/wcagCompliance.ejs
+++ b/static/ejs/partials/components/wcagCompliance.ejs
@@ -44,7 +44,7 @@ parseFloat((Object.keys(wcagLinks).length - wcagViolations.length) / Object.keys
           </svg>
         </button>
       </div>
-      <span class="ms-2"><%= wcagPassPercentage %>%</span>
+      <span aria-label="Pass percentage" class="ms-2"><%= wcagPassPercentage %>%</span>
     </div>
     <div class="wcag-compliance-passes-bar">
       <div
diff --git a/static/ejs/partials/header.ejs b/static/ejs/partials/header.ejs
index e3ac2eb7..992de531 100644
--- a/static/ejs/partials/header.ejs
+++ b/static/ejs/partials/header.ejs
@@ -2,6 +2,7 @@
   <div class="z-2 card flex-row justify-content-between px-3 py-4">
     <div class="d-flex align-items-center">
       <svg
+        aria-hidden="true"
         width="48"
         height="48"
         viewBox="0 0 48 48"
diff --git a/static/ejs/partials/main.ejs b/static/ejs/partials/main.ejs
index f8778ef3..2a377840 100644
--- a/static/ejs/partials/main.ejs
+++ b/static/ejs/partials/main.ejs
@@ -1,21 +1,32 @@
-<main aria-label="Report main content" class="d-flex flex-grow-1 align-items-stretch">
+<div class="d-flex flex-grow-1 align-items-stretch">
   <%- include("components/scanAbout") %>
-  <div class="d-flex flex-column flex-grow-1">
+  <main aria-label="Report main content" class="d-flex flex-column flex-grow-1">
     <div class="row m-0 py-4 px-3">
       <div class="col-md-6 pe-md-2"><%- include("components/wcagCompliance") %></div>
       <div class="col-md-6 ps-md-2 mt-3 mt-md-0"><%- include("components/topFive") %></div>
     </div>
     <hr class="my-2 mx-3" />
-    <div class="row m-0 pt-4 px-2">
+    <nav class="row m-0 pt-4 px-2" aria-label="Issue category">
       <% Object.keys(items).forEach((category) => { %>
       <div class="col-md-4 px-2">
         <%- include("components/categorySelector", { category: category }) %>
       </div>
       <% }) %>
-    </div>
-    <div id="categorySummary" class="px-3 py-4 mb-3 flex-grow-1">
+    </nav>
+    <ul id="categorySummary" class="unbulleted-list px-3 py-4 mb-3 flex-grow-1">
       <%# dynamically generated section from scripts/categorySummary %>
-    </div>
+    </ul>
     <%- include("components/ruleOffcanvas") %> <%- include("footer") %>
-  </div>
-</main>
+    <p id="mustFixAriaDescription" class="d-none">
+      Tooltip: Issues that need to be addressed promptly, as they create significant barriers for
+      persons with disabilities and can prevent them from accessing essential content or features.
+    </p>
+    <p id="goodToFixAriaDescription" class="d-none">
+      Tooltip: Issues that could pose certain challenges for persons with disabilities (PWDs), but
+      are unlikely to completely hinder their access to essential content or features.
+    </p>
+    <p id="passedAriaDescription" class="d-none">
+      Tooltip: Occurrences that passed the automated checks.
+    </p>
+  </main>
+</div>
diff --git a/static/ejs/partials/scripts/categorySummary.ejs b/static/ejs/partials/scripts/categorySummary.ejs
index 1a0e2f2e..f48f0b30 100644
--- a/static/ejs/partials/scripts/categorySummary.ejs
+++ b/static/ejs/partials/scripts/categorySummary.ejs
@@ -12,6 +12,9 @@
         selected.classList.remove('selected');
       }
       event.currentTarget.classList.add('selected');
+      document
+        .getElementById('categorySummary')
+        .setAttribute('aria-label', `${getFormattedCategoryTitle(category)} summary`);
       selected = event.currentTarget;
       loadRulesSummary(category);
     };
@@ -26,21 +29,31 @@
       return `${Math.floor(count / 1000)}k`;
     };
 
+    if (scanItems[category].rules.length === 0) {
+      const emptyMessage = generateEmptyCategoryMessage(category);
+      document.getElementById('categorySummary').replaceChildren(emptyMessage);
+      return;
+    }
+
     scanItems[category].rules.forEach(rule => {
       const ruleItem = createElementFromString(`
-        <button class="rule-item" data-bs-toggle="offcanvas" data-bs-target="#expandedRule" aria-controls="expandedRule">
-          <div class="text-start">
-            <div class="rule-items-count ${category}">
-              ${formatItemsCount(rule.totalItems)}
+        <li>
+          <button aria-label="${rule.description}, ${
+        rule.totalItems
+      } occurrences" class="rule-item" data-bs-toggle="offcanvas" data-bs-target="#expandedRule" aria-controls="expandedRule">
+            <div class="text-start">
+              <div class="rule-items-count ${category}">
+                ${formatItemsCount(rule.totalItems)}
+              </div>
+              ${htmlEscapeString(rule.description)}
+            </div>
+            <div>
+              <svg width="9" height="16" viewBox="0 0 9 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+              <path d="M1.03847 16C0.833084 16 0.632306 15.9388 0.461529 15.8241C0.290753 15.7095 0.157649 15.5465 0.0790493 15.3558C0.000449621 15.1651 -0.0201154 14.9553 0.0199549 14.7529C0.0600251 14.5505 0.158931 14.3645 0.304165 14.2186L6.49293 7.99975L0.304165 1.78088C0.109639 1.58514 0.000422347 1.31979 0.000518839 1.04315C0.000615331 0.766523 0.110018 0.501248 0.30468 0.30564C0.499341 0.110032 0.763331 9.70251e-05 1.03862 6.41929e-08C1.31392 -9.68968e-05 1.57798 0.109652 1.77278 0.305123L8.69586 7.26187C8.8906 7.45757 9 7.72299 9 7.99975C9 8.2765 8.8906 8.54192 8.69586 8.73763L1.77278 15.6944C1.67646 15.7914 1.562 15.8684 1.43598 15.9208C1.30996 15.9733 1.17487 16.0002 1.03847 16Z" fill="#333333"/>
+              </svg>
             </div>
-            ${htmlEscapeString(rule.description)}
-          </div>
-          <div>
-            <svg width="9" height="16" viewBox="0 0 9 16" fill="none" xmlns="http://www.w3.org/2000/svg">
-            <path d="M1.03847 16C0.833084 16 0.632306 15.9388 0.461529 15.8241C0.290753 15.7095 0.157649 15.5465 0.0790493 15.3558C0.000449621 15.1651 -0.0201154 14.9553 0.0199549 14.7529C0.0600251 14.5505 0.158931 14.3645 0.304165 14.2186L6.49293 7.99975L0.304165 1.78088C0.109639 1.58514 0.000422347 1.31979 0.000518839 1.04315C0.000615331 0.766523 0.110018 0.501248 0.30468 0.30564C0.499341 0.110032 0.763331 9.70251e-05 1.03862 6.41929e-08C1.31392 -9.68968e-05 1.57798 0.109652 1.77278 0.305123L8.69586 7.26187C8.8906 7.45757 9 7.72299 9 7.99975C9 8.2765 8.8906 8.54192 8.69586 8.73763L1.77278 15.6944C1.67646 15.7914 1.562 15.8684 1.43598 15.9208C1.30996 15.9733 1.17487 16.0002 1.03847 16Z" fill="#333333"/>
-            </svg>
-          </div>
-        </button>
+          </button>
+        </li>
       `);
 
       ruleItem.addEventListener('click', () => expandRule(category, rule));
@@ -49,4 +62,29 @@
 
     document.getElementById('categorySummary').replaceChildren(...newItems);
   }
+
+  function generateEmptyCategoryMessage(category) {
+    const messageContainer = createElementFromString(
+      '<li id="empty-category-summary-section"></li>',
+    );
+
+    let message;
+    if (category === 'passed') {
+      message = createElementFromString('<p>There are no passed occurrences here.</p>');
+    } else if (scanItems.mustFix.totalItems === 0 && scanItems.goodToFix.totalItems === 0) {
+      message = createElementFromString(
+        '<p id="no-issues-message">Good job! There are no issues here.</p>',
+      );
+    } else if (category === 'mustFix') {
+      message = createElementFromString(
+        `<p>There are no issues here but there are still ${scanItems.goodToFix.rules.length} Good to Fix issues to review.</p>`,
+      );
+    } else {
+      message = createElementFromString(
+        `<p>There are no issues here but there are still ${scanItems.mustFix.rules.length} Must Fix issues to review.</p>`,
+      );
+    }
+    messageContainer.appendChild(message);
+    return messageContainer;
+  }
 </script>
diff --git a/static/ejs/partials/scripts/ruleOffcanvas.ejs b/static/ejs/partials/scripts/ruleOffcanvas.ejs
index 69d92ac4..351e6b21 100644
--- a/static/ejs/partials/scripts/ruleOffcanvas.ejs
+++ b/static/ejs/partials/scripts/ruleOffcanvas.ejs
@@ -44,7 +44,6 @@ category summary is clicked %>
       wcag2a: 'Level A',
       wcag2aa: 'Level AA',
       wcag21aa: 'Level AA',
-      'best-practice': 'Best practice',
     };
 
     document.getElementById('expandedRuleName').innerHTML = htmlEscapeString(
@@ -55,9 +54,11 @@ category summary is clicked %>
     document.getElementById('expandedRuleConformance').replaceChildren(
       createElementFromString(`
       <div class="d-flex align-items-center">
-        <div aria-label="${
-          conformanceLevels[selectedRule.conformance[0]]
-        }" class="conformance-bubble ${selectedRule.conformance[0]}"></div>
+        <div role="group" ${
+          selectedRule.conformance[0] === 'best-practice'
+            ? 'aria-hidden="true"'
+            : `aria-label="${conformanceLevels[selectedRule.conformance[0]]}"`
+        } class="conformance-bubble ${selectedRule.conformance[0]}"></div>
         ${
           selectedRule.conformance[0] === 'best-practice'
             ? `<span>Best practice</span>`
@@ -67,34 +68,6 @@ category summary is clicked %>
     `),
     );
 
-    let expandedRuleDescription = document.getElementById('expandedRuleDescription');
-    let expandedRuleCollapseButton = document.getElementById('expandedRuleCollapseButton');
-
-    if (expandedRuleDescription.classList.contains('show')) {
-      expandedRuleDescription.classList.remove('show');
-    }
-
-    if (expandedRuleDescription.ariaExpanded === 'true') {
-      expandedRuleDescription.ariaExpanded = 'false';
-    }
-
-    if (expandedRuleCollapseButton.classList.contains('collapsed') !== true) {
-      expandedRuleCollapseButton.classList.add('collapsed');
-    }
-
-    expandedRuleDescription.style.minHeight = '';
-
-    if (expandedRuleDescription.offsetHeight === expandedRuleDescription.scrollHeight) {
-      expandedRuleCollapseButton.style.display = 'none';
-      expandedRuleDescription.ariaExpanded = 'true';
-    } else {
-      expandedRuleDescription.classList.add('collapse');
-
-      expandedRuleCollapseButton.style.display = 'block';
-      expandedRuleDescription.ariaExpanded = 'false';
-      expandedRuleDescription.style.minHeight = '3rem'; // Prevents bootstrap collapse from going to 0px
-    }
-
     const availableFixCategories = [];
     const categorySelectors = [];
 
@@ -118,11 +91,13 @@ category summary is clicked %>
           availableFixCategories.push(category);
         }
         const element = createElementFromString(`
-          <button class="category-selector ${category}">
-            <h4 class="d-flex align-items-center category-name">${getFormattedCategoryTitle(
+          <button aria-label="${getFormattedCategoryTitle(category)}, ${
+          ruleInCategory.totalItems
+        } occurrences" class="category-selector ${category}">
+            <span class="d-flex align-items-center category-name">${getFormattedCategoryTitle(
               category,
-            )}</h4>
-            <span>${ruleInCategory.totalItems} occurrences</span>
+            )}</span>
+            <span class="category-information">${ruleInCategory.totalItems} occurrences</span>
           </button>
         `);
         element.addEventListener('click', event => {
@@ -134,7 +109,7 @@ category summary is clicked %>
           } else if (category === 'goodToFix' && availableFixCategories.includes('mustFix')) {
             ruleInfoText.innerHTML =
               '<p class="mb-4">There are also occurrences of this issue that falls under "Must Fix”.</p>';
-          } else if (category === 'passed') {
+          } else if (category === 'passed' && availableFixCategories.length > 0) {
             ruleInfoText.innerHTML = `<p class="mb-4">There are also occurrences of this issue that falls under ${availableFixCategories
               .map(c => `"${getFormattedCategoryTitle(c)}"`)
               .join(' and ')}.</p>`;
@@ -163,68 +138,89 @@ category summary is clicked %>
     }
 
     const contentTitle = createElementFromString(`
-      <h5 class="mb-4">
+      <h4 id="issue-page-count" class="mb-4">
         Pages with this issue (${ruleInCategory.pagesAffected.length})
-      </h5>`);
+      </h4>`);
 
-    const accordions = ruleInCategory.pagesAffected.map((page, index) => {
+    const accordionsList = createElementFromString(`<ul class="unbulleted-list"></ul>`);
+
+    ruleInCategory.pagesAffected.forEach((page, index) => {
       const accordionId = `${ruleInCategory.rule}-${category}-page-${index}`;
       const accordion = createElementFromString(`
-        <div class="accordion mt-2 ${category}">
-          <div class="accordion-item">
-            <div class="accordion-header" id="${accordionId}-title">
-              <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#${accordionId}-content" aria-expanded="false" aria-controls="${accordionId}-content">
-                <div class="me-3">${page.pageTitle}</div>
-                <div class="ms-auto counter">${page.items.length}</div>
-              </button>
-            </div>
-            <div id="${accordionId}-content" class="accordion-collapse collapse" aria-labelledby="${accordionId}-title">
-              <div class="accordion-body p-3">
-                <a href="${page.url}" target="_blank">${page.url}</a>
-                <div class="page-accordion-content-title">
-                  <span>${getFormattedCategoryTitle(category)} elements</span>
-                  <span class="page-items-count">${page.items.length}</span>
+        <li>
+          <div class="accordion mt-2 ${category}">
+            <div class="accordion-item">
+              <div class="accordion-header" id="${accordionId}-title">
+                <button 
+                  aria-label="Page ${index + 1}: ${page.pageTitle}, ${
+        page.items.length
+      } occurrences" class="accordion-button collapsed" 
+                  type="button" 
+                  data-bs-toggle="collapse" 
+                  data-bs-target="#${accordionId}-content" 
+                  aria-expanded="false" 
+                  aria-controls="${accordionId}-content"
+                >
+                  <div class="me-3">${page.pageTitle}</div>
+                  <div class="ms-auto counter">${page.items.length}</div>
+                </button>
+              </div>
+              <div id="${accordionId}-content" class="accordion-collapse collapse" aria-labelledby="${accordionId}-title">
+                <div class="accordion-body p-3">
+                  <a aria-label="URL to ${page.pageTitle}" href="${page.url}" target="_blank">${
+        page.url
+      }</a>
+                  <div class="page-accordion-content-title">
+                    <span>${getFormattedCategoryTitle(category)} elements</span>
+                    <span class="page-items-count">${page.items.length}</span>
+                  </div>
                 </div>
               </div>
             </div>
           </div>
-        </div>
+        </li>
       `);
 
+      accordionsList.appendChild(accordion);
+
       const accordionBody = accordion.getElementsByClassName('accordion-body')[0];
+      const elementCardsList = createElementFromString('<ul class="unbulleted-list"></ul>');
 
       page.items.forEach(item => {
         const itemCard = createElementFromString(`
-          <div class="card mt-3">
-            ${
-              item.needsReview
-                ? `<div class="needsReview">This occurrence might be a false positive that needs to be verified by a human.</div>`
-                : ``
-            }
-            <div class="p-3">
-              <div class="d-flex justify-content-between">
-                <div class="fw-bold">HTML element</div>
-                <pre class="page-item-card-section-content"><code class="language-html">${htmlEscapeString(
-                  item.html,
-                )}</code></pre>
-              </div>
-              <hr />
-              <div class="d-flex justify-content-between">
-                <div class="fw-bold">${item.needsReview ? 'Details' : 'How to fix'}</div>
-                <div class="page-item-card-section-content">
-                  ${generateItemMessageElement(item.needsReview, item.message)}
+          <li>
+            <div class="card mt-3">
+              ${
+                item.needsReview
+                  ? `<div class="needsReview">This occurrence might be a false positive that needs to be verified by a human.</div>`
+                  : ``
+              }
+              <div class="p-3">
+                <div class="d-flex justify-content-between">
+                  <div class="fw-bold">HTML element</div>
+                  <pre class="page-item-card-section-content"><code class="language-html">${htmlEscapeString(
+                    item.html,
+                  )}</code></pre>
+                </div>
+                <hr />
+                <div class="d-flex justify-content-between">
+                  <div class="fw-bold">${item.needsReview ? 'Details' : 'How to fix'}</div>
+                  <div class="page-item-card-section-content">
+                    ${generateItemMessageElement(item.needsReview, item.message)}
+                  </div>
                 </div>
               </div>
             </div>
-          </div>
+          <li>
         `);
 
-        accordionBody.appendChild(itemCard);
+        elementCardsList.appendChild(itemCard);
       });
 
+      accordionBody.appendChild(elementCardsList);
       return accordion;
     });
-    contentContainer.replaceChildren(contentTitle, ...accordions);
+    contentContainer.replaceChildren(contentTitle, accordionsList);
     hljs.highlightAll();
   }
 
@@ -264,53 +260,53 @@ category summary is clicked %>
 
   const whyItMatters = {
     accesskeys:
-      '<p>\n  Specifying a <code>accesskey</code> attribute value for some part of a\n  document allows users to quickly activate or move the focus to a specific\n  element by pressing the specified key (usually in combination with the\n  <code><kbd>alt</kbd></code> key). Duplicating <code>accesskey</code> values\n  creates unexpected effects that ultimately make the page less accessible.\n</p>\n<p>\n  For each defined <code>accesskey</code>, ensure the value is unique and does\n  not conflict with any default browser and screen reader shortcut keys.\n</p>\n<p>\n  Content is not operable by keyboard users with no or low vision who cannot use\n  devices such as mice that require eye-hand coordination, users who have\n  trouble tracking a pointer, or users who must use alternate keyboards or input\n  devices acting as keyboard emulators.\n</p>',
+      '<p>\n  Specifying a <code>accesskey</code> attribute value for some part of a\n  document allows users to quickly activate or move the focus to a specific\n  element by pressing the specified key (usually in combination with the\n  <code><kbd>alt</kbd></code> key). Duplicating <code>accesskey</code> values\n  creates unexpected effects that ultimately make the page less accessible.\n</p>',
     'area-alt':
-      '<p>\n  Screen readers have no way of translating images into words. It is important\n  that all images, including image maps, have <code>alt</code> text values.\n</p>\n\n<p>\n  Screen readers typically announce the filename of the image if alternative\n  text is missing. Filenames do not adequately describe images and are not\n  helpful to screen reader users.\n</p>',
+      '<p>\n  Screen readers have no way of translating images into words. It is important\n  that all images, including image maps, have <code>alt</code> text values.\n</p>',
     'aria-allowed-attr':
-      '<p>\n  Using ARIA attributes in roles where they are not allowed can interfere with\n  the accessibility of the web page. Using an invalid role-attribute combination\n  will, at best, result in no effect on the accessibility of the application\n  and, at worst, may trigger behavior that disables accessibility for entire\n  portions of an application.\n</p>\n<p>\n  When ARIA attributes are used on HTML elements that are not in accordance with\n  WAI-ARIA 1.1, they conflict with the semantics of the elements which can cause\n  assistive technology products report nonsensical user interface (UI)\n  information that does not represent the actual UI of the document.\n</p>',
+      '<p>\n  Using ARIA attributes in roles where they are not allowed can interfere with\n  the accessibility of the web page. Using an invalid role-attribute combination\n  will, at best, result in no effect on the accessibility of the application\n  and, at worst, may trigger behavior that disables accessibility for entire\n  portions of an application.\n</p>',
     'aria-command-name':
-      '<p>\n  Screen reader users are not able to discern the purpose of elements with\n  <code>role="link"</code>, <code>role="button"</code>, or\n  <code>role="menuitem"</code> that do not have an accessible name.\n</p>',
+      '<p>\n  Screen reader users are not able to discern the purpose of elements with\n  <code>role=&quot;link&quot;</code>, <code>role=&quot;button&quot;</code>, or\n  <code>role=&quot;menuitem&quot;</code> that do not have an accessible name.\n</p>',
     'aria-dialog-name':
-      '<p>\n  Screen reader users are not able to discern the purpose of elements with\n  <code>role="dialog"</code> or <code>role="alertdialog"</code> that do not have\n  an accessible name.\n</p>',
+      '<p>\n  Screen reader users are not able to discern the purpose of elements with\n  <code>role=&quot;dialog&quot;</code> or <code>role=&quot;alertdialog&quot;</code> that do not have\n  an accessible name.\n</p>',
     'aria-hidden-focus':
-      '<p>\n  Using the <code>aria-hidden="true"</code> attribute on an element removes the\n  element and ALL of its child nodes from the accessibility API making it\n  completely inaccessible to screen readers and other assistive technologies.\n  Aria-hidden may be used with extreme caution to hide visibly rendered content\n  from assistive technologies only if the act of hiding this content is intended\n  to improve the experience for users of assistive technologies by removing\n  redundant or extraneous content. If aria-hidden is used to hide visible\n  content from screen readers, the identical or equivalent meaning and\n  functionality must be exposed to assistive technologies.\n</p>\n\n<p>\n  <strong>Note:</strong> Using <code>aria-hidden="false"</code> on content that\n  is a descendent of an element that is hidden using\n  <code>aria-hidden="true"</code> will NOT expose that content to the\n  accessibility API and it will not be accessible to screen readers or other\n  assistive technologies.\n</p>\n\n<p>\n  The rule applies to any element with an\n  <code>aria-hidden="true"</code> attribute.\n</p>\n\n<p>\n  By adding <code>aria-hidden="true"</code> to an element, content authors\n  ensure that assistive technologies will ignore the element. This can be used\n  to hide decorative parts of a web page, such as icon fonts - that are not\n  meant to be read by assistive technologies.\n</p>\n\n<p>\n  A focusable element with <code>aria-hidden="true"</code> is ignored as part of\n  the reading order, but still part of the focus order, making it’s state of\n  visible or hidden unclear.\n</p>\n\n<ul>\n  <li>\n    <p>\n      <a href="https://www.w3.org/WAI/WCAG21/Understanding/name-role-value.html">https://www.w3.org/WAI/WCAG21/Understanding/name-role-value.html</a>\n    </p>\n  </li>\n  <li>\n    <p>\n      <a href="https://www.w3.org/TR/wai-aria-1.1/#aria-hidden">https://www.w3.org/TR/wai-aria-1.1/#aria-hidden</a>\n    </p>\n  </li>\n  <li>\n    <p>\n      <a href="https://www.w3.org/TR/html/editing.html#can-be-focused">https://www.w3.org/TR/html/editing.html#can-be-focused</a>\n    </p>\n  </li>\n</ul>',
+      '<p>\n  Using the <code>aria-hidden=&quot;true&quot;</code> attribute on an element removes the\n  element and ALL of its child nodes from the accessibility API making it\n  completely inaccessible to screen readers and other assistive technologies.\n  Aria-hidden may be used with extreme caution to hide visibly rendered content\n  from assistive technologies only if the act of hiding this content is intended\n  to improve the experience for users of assistive technologies by removing\n  redundant or extraneous content. If aria-hidden is used to hide visible\n  content from screen readers, the identical or equivalent meaning and\n  functionality must be exposed to assistive technologies.\n</p>',
     'aria-input-field-name':
       '<p>\n  This new rule ensures every ARIA input field has an accessible name.\n  Accessible names must exist for the following input field roles:\n</p>\n<ul>\n  <li>combobox</li>\n  <li>listbox</li>\n  <li>searchbox</li>\n  <li>slider</li>\n  <li>spinbutton</li>\n  <li>textbox</li>\n</ul>',
     'aria-meter-name':
-      '<p>\n  Screen reader users are not able to discern the purpose of elements with\n  <code>role="meter"</code> that do not have an accessible name.\n</p>',
+      '<p>\n  Screen reader users are not able to discern the purpose of elements with\n  <code>role=&quot;meter&quot;</code> that do not have an accessible name.\n</p>',
     'aria-progressbar-name':
-      '<p>\n  Screen reader users are not able to discern the purpose of elements with\n  <code>role="progressbar"</code> that do not have an accessible name.\n</p>',
+      '<p>\n  Screen reader users are not able to discern the purpose of elements with\n  <code>role=&quot;progressbar&quot;</code> that do not have an accessible name.\n</p>',
     'aria-required-children':
-      '<p>\n  For each role, WAI-ARIA explicitly defines which child and parent roles are\n  allowable and/or required. ARIA <code>role</code>s missing required child\n  <code>role</code>s will not be able to perform the accessibility functions\n  intended by the developer.\n</p>\n<p>\n  Assistive technology needs to convey the context to the user. For example, in\n  a <code>treeitem</code>, it is important to know the parent (container), item,\n  or siblings in the folder. This can be done in two ways:\n</p>\n<ol>\n  <li>\n    <strong>Code order or DOM:</strong> The necessary context is often clear\n    from the code order or DOM.\n  </li>\n  <li>\n    <strong>ARIA:</strong> ARIA (such as <code>aria-owns</code>) can be used\n    provide the relationships when the hierarchy is not the same as the code\n    structure or DOM tree.\n  </li>\n</ol>',
+      '<p>\n  For each role, WAI-ARIA explicitly defines which child and parent roles are\n  allowable and/or required. ARIA <code>role</code>s missing required child\n  <code>role</code>s will not be able to perform the accessibility functions\n  intended by the developer.\n</p>',
     'aria-required-parent':
-      '<p>\n  For each role, WAI-ARIA explicitly defines which child and parent roles are\n  allowable and/or required. Elements containing ARIA <code>role</code> values\n  missing required parent element <code>role</code> values will not enable\n  assistive technology to function as intended by the developer.\n</p>\n<p>\n  When it is necessary to convey context to the user of assistive technology in\n  the form of hierarchy (for example, the importance of a parent container, item\n  or sibling in a folder tree), and the hierarchy is not the same as the code\n  structure or DOM tree, there is no way to provide the relationship information\n  without the use of ARIA role parent elements.\n</p>',
+      '<p>\n  For each role, WAI-ARIA explicitly defines which child and parent roles are\n  allowable and/or required. Elements containing ARIA <code>role</code> values\n  missing required parent element <code>role</code> values will not enable\n  assistive technology to function as intended by the developer.\n</p>',
     'aria-roledescription':
-      "<p>\n  Inappropriate <code>aria-roledescription</code> attribute values that conflict\n  with an element's implied or explicit <code>role</code> value can interfere\n  with the accessibility of the web page. A conflicting\n  <code>aria-roledescription</code> attribute value may result in no effect on\n  the accessibility of the application and may trigger behavior that disables\n  accessibility for entire portions of an application.\n</p>\n<p>\n  When <code>aria-roledescription</code>&gt; attributes are applied to HTML\n  elements not in accordance with WAI-ARIA 1.1, semantics conflict between the\n  <code>aria-roledescription</code> value and the implicit or explicit element\n  <code>role</code> value which may result in assistive technology products\n  reporting nonsensical user interface (UI) information that does not correctly\n  represent the intended UI experience.\n</p>",
+      '<p>\n  Inappropriate <code>aria-roledescription</code> attribute values that conflict\n  with an element&apos;s implied or explicit <code>role</code> value can interfere\n  with the accessibility of the web page. A conflicting\n  <code>aria-roledescription</code> attribute value may result in no effect on\n  the accessibility of the application and may trigger behavior that disables\n  accessibility for entire portions of an application.\n</p>',
     'aria-text':
-      '<p>\n  When a text node is split by markup (e.g.\n  <code>&lt;h1&gt;Hello &lt;span&gt;World&lt;/span&gt;&lt;/h1&gt;</code>)\n  VoiceOver will treat it as two separate phrases instead of just one. Adding\n  <code>role="text"</code> around the elements solves the problem. However, it\n  also overrides the role of the element and all descendants and treats them all\n  as text nodes. If one of the descendant elements is also focusable it would\n  create an empty tab stop. That is, you could tab to the element but VoiceOver\n  would not announce its name, role, or value.\n</p>',
+      '<p>\n  When a text node is split by markup (e.g.\n  <code>&lt;h1&gt;Hello &lt;span&gt;World&lt;/span&gt;&lt;/h1&gt;</code>)\n  VoiceOver will treat it as two separate phrases instead of just one. Adding\n  <code>role=&quot;text&quot;</code> around the elements solves the problem. However, it\n  also overrides the role of the element and all descendants and treats them all\n  as text nodes. If one of the descendant elements is also focusable it would\n  create an empty tab stop. That is, you could tab to the element but VoiceOver\n  would not announce its name, role, or value.\n</p>',
     'aria-toggle-field-name':
       '<p>\n  Ensures every element with a semantic role also has an accessible name.\n  Semantic roles include:\n</p>\n<ul>\n  <li>checkbox</li>\n  <li>menu</li>\n  <li>menuitemcheckbox</li>\n  <li>menuitemradio</li>\n  <li>radio</li>\n  <li>radiogroup</li>\n  <li>switch</li>\n</ul>',
     'aria-tooltip-name':
-      '<p>\n  Screen reader users are not able to discern the purpose of elements with\n  <code>role="tooltip"</code> that do not have an accessible name.\n</p>',
+      '<p>\n  Screen reader users are not able to discern the purpose of elements with\n  <code>role=&quot;tooltip&quot;</code> that do not have an accessible name.\n</p>',
     'aria-treeitem-name':
-      '<p>\n  Screen reader users are not able to discern the purpose of elements with\n  <code>role="treeitem"</code> that do not have an accessible name.\n</p>',
+      '<p>\n  Screen reader users are not able to discern the purpose of elements with\n  <code>role=&quot;treeitem&quot;</code> that do not have an accessible name.\n</p>',
     'aria-valid-attr-value':
-      '<p>\n  ARIA attributes (i.e. starting with <code>aria-</code>) must contain valid\n  values. These values must be spelled correctly and correspond to values that\n  make sense for a particular attribute to perform the intended accessibility\n  function.\n</p>\n\n<p>\n  Many ARIA attributes accept a specific set of values. Allowed values,\n  acceptable "undefined" values, and acceptable "default" values are required.\n  Failure to comply with allowed values results in content that is not\n  accessible to assistive technology users.\n</p>',
+      '<p>\n  ARIA attributes (i.e. starting with <code>aria-</code>) must contain valid\n  values. These values must be spelled correctly and correspond to values that\n  make sense for a particular attribute to perform the intended accessibility\n  function.\n</p>',
     'aria-valid-attr':
-      '<p>\n  If the developer uses a non-existent or misspelled ARIA attribute, the\n  attribute will not be able to perform the accessibility function intended by\n  the developer.\n</p>\n<p>\n  In order to allow assistive technologies to convey appropriate information to\n  persons with disabilities, user interface elements intended to improve the\n  accessibility and interoperability of web and application content must conform\n  to properly spelled and current ARIA attributes.\n</p>\n<p>\n  When developers do not use attributes defined in the WAI-ARIA 1.1 W3C\n  Recommendation, they do not properly convey user interface behaviors and\n  structural information to assistive technologies in document-level markup.\n</p>',
+      '<p>\n  If the developer uses a non-existent or misspelled ARIA attribute, the\n  attribute will not be able to perform the accessibility function intended by\n  the developer.\n</p>',
     'autocomplete-valid':
       '<p>\n  Failure to provide autocomplete values in form fields results in inaccessible\n  content. Screen readers do not read identified autocomplete form fields if the\n  appropriate autocomplete attribute values are missing. Users cannot correctly\n  navigate forms when screen readers cannot provide adequate information to the\n  user regarding form field interaction requirements.\n</p>',
     'avoid-inline-spacing':
       '<p>\n  Many people with cognitive disabilities have trouble tracking lines of text\n  when a block of text is single spaced. Providing spacing between 1.5 to 2\n  allows them to start a new line more easily once they have finished the\n  previous one.\n</p>',
     blink:
-      '<p>\n  As the name suggests, <code>blink</code> tags cause content to flash. Though\n  you may like the effect, blinking text can be difficult to read, and blinking\n  objects (links, buttons, etc.) can be difficult to activate, especially for\n  users with imprecise or limited dexterity.\n</p>\n<p>\n  It can be very difficult for people with visual and cognitive disabilities to\n  see and understand text that blinks. Blinking text be distracting, especially\n  for users with cognitive disabilities. It can also be difficult for some\n  individuals to comprehend. For these reasons, the <code>blink</code> element\n  should never be used.\n</p>',
+      '<p>\n  As the name suggests, <code>blink</code> tags cause content to flash. Though\n  you may like the effect, blinking text can be difficult to read, and blinking\n  objects (links, buttons, etc.) can be difficult to activate, especially for\n  users with imprecise or limited dexterity.\n</p>',
     'definition-list':
-      '<p>\n  Screen readers have a specific way of announcing definition lists. When such\n  lists are not properly marked up, this creates the opportunity for confusing\n  or inaccurate screen reader output.\n</p>\n<p>\n  A definition list is used to provide the definitions of words or phrases. The\n  Definition List is marked up using the <code>dl</code> element. Within the\n  list, each term is put in a separate <code>dt</code> element, and its\n  definition goes in the <code>dd</code> element directly following it.\n</p>',
+      '<p>\n  Screen readers have a specific way of announcing definition lists. When such\n  lists are not properly marked up, this creates the opportunity for confusing\n  or inaccurate screen reader output.\n</p>',
     dlitem:
-      "<p>\n  A definition list item must be wrapped in parent <code>dl</code> elements,\n  otherwise it will be invalid.\n</p>\n<p>\n  A definition list must follow a specific hierarchy. A list is defined using\n  the <code>dl</code> element. What follows are alternating sets of\n  <code>dt</code> and <code>dd</code> elements, starting with the\n  <code>dt</code> element. <code>dt</code> elements define a term while\n  <code>dd</code> elements denote a term's description. Each set of\n  <code>dt</code> elements must have a corresponding set of\n  <code>dd</code> elements. Only <code>dt</code> and <code>dd</code> elements\n  are allowed in definition list. If this hierarchy is not followed, the list\n  will be invalid.\n</p>",
+      '<p>\n  A definition list item must be wrapped in parent <code>dl</code> elements,\n  otherwise it will be invalid.\n</p>',
     'duplicate-id-active':
-      '<p>\n  The ID attribute uniquely identifies focusable elements on a page. It does not\n  make sense to duplicate an active ID.\n</p>\n\n<p>\n  Duplicate active ID values break the accessibility of focusable elements\n  including labels for forms, table header cells, etc., Screen readers and\n  client-side scripts will skip any duplication other than the first instance.\n  Validating HTML files help prevent and eliminate possible sources of\n  accessibility problems, when not breaking accessibility.\n</p>\n\n<p>\n  Those experienced with client-side scripting know that when you re-use an\n  active ID, typically the only one that gets acted upon by the scripting is the\n  first instance of the use of that active ID. Similarly, assistive technologies\n  may, when referencing an active ID, only reference the first one accurately.\n</p>',
+      '<p>\n  The ID attribute uniquely identifies focusable elements on a page. It does not\n  make sense to duplicate an active ID.\n</p>',
     'empty-table-header':
       '<p>\n  Table header elements should have visible text that describes the purpose of\n  the row or column to both sighted users and screen reader users.\n</p>',
     'frame-focusable-content':
@@ -318,123 +314,123 @@ category summary is clicked %>
     'frame-tested':
       '<p>\n  Without the axe-core script, it is not possible for the tool to perform\n  violation checking on multiple levels of nested iframes.\n</p>',
     'frame-title-unique':
-      '<p>\n  Screen reader users rely on a frame title to describe the contents of the\n  <code>frame</code>. Navigating through frames and iframes can quickly become\n  difficult and confusing for users of this technology if the frames are not\n  marked with a <code>title</code> attribute.\n</p>\n\n<p>\n  Screen reader users have the option to pull up a list of titles for all frames\n  on a page. Adding descriptive, unique titles allows users to quickly find the\n  frame they need. If no titles are present, navigating through frames can\n  quickly become difficult and confusing. If no title is listed, screen readers\n  will instead give information like “frame,” “javascript,” the filename, or the\n  URL. In most cases, this information won’t be very helpful.\n</p>',
+      '<p>\n  Screen reader users rely on a frame title to describe the contents of the\n  <code>frame</code>. Navigating through frames and iframes can quickly become\n  difficult and confusing for users of this technology if the frames are not\n  marked with a <code>title</code> attribute.\n</p>',
     'frame-title':
-      '<p>\n  Screen reader users rely on a frame title to describe the contents of the\n  <code>frame</code>. Navigating through <code>frame</code> and\n  <code>iframe</code> elements quickly becomes difficult and confusing for users\n  of this technology if the markup does not contain a\n  <code>title</code> attribute.\n</p>\n\n<p>\n  Screen reader users have the option to pull up a list of titles for all frames\n  on a page. Adding descriptive, unique titles allows users to quickly find the\n  frame they need. If no titles are present, navigating through frames can\n  quickly become difficult and confusing. If no title is listed, screen readers\n  will instead give information like “frame,” “JavaScript,” the filename, or the\n  URL. In most cases, this information won’t be very helpful.\n</p>',
+      '<p>\n  Screen reader users rely on a frame title to describe the contents of the\n  <code>frame</code>. Navigating through <code>frame</code> and\n  <code>iframe</code> elements quickly becomes difficult and confusing for users\n  of this technology if the markup does not contain a\n  <code>title</code> attribute.\n</p>',
     'html-xml-lang-mismatch':
-      "<p>\n  When configuring a screen reader, users select a default language. If the\n  language of a webpage is not specified, the screen reader assumes the default\n  language set by the user. Multiple languages are an issue for users who speak\n  and access websites in multiple languages. It is essential to specify a\n  default language and ensure that it is valid for screen readers to function\n  correctly.\n</p>\n<p>\n  Screen readers use different sound libraries for each language, based on the\n  pronunciation and characteristics of that language. Screen readers can switch\n  between language libraries easily, but only if documents specify which\n  language(s) should to read. If the language is not specified, screen readers\n  read documents in the user's default language, resulting in garbled language.\n  It can be challenging to understand anything when screen readers are using the\n  wrong language library.\n</p>",
+      '<p>\n  When configuring a screen reader, users select a default language. If the\n  language of a webpage is not specified, the screen reader assumes the default\n  language set by the user. Multiple languages are an issue for users who speak\n  and access websites in multiple languages. It is essential to specify a\n  default language and ensure that it is valid for screen readers to function\n  correctly.\n</p>',
     'image-alt':
-      "<p>\n  Screen readers have no way of translating an image into words that gets read\n  to the user, even if the image only consists of text. As a result, it's\n  necessary for images to have short, descriptive <code>alt</code> text so\n  screen reader users clearly understand the image's contents and purpose.\n</p>\n<p>\n  If you can't see, all types of visual information, such as images, are\n  completely useless unless a digital text alternative is provided so that\n  screen readers can convert that text into either sound or braille. The same is\n  true in varying degrees for people with low vision or color-blindness.\n</p>",
+      '<p>\n  Screen readers have no way of translating an image into words that gets read\n  to the user, even if the image only consists of text. As a result, it&apos;s\n  necessary for images to have short, descriptive <code>alt</code> text so\n  screen reader users clearly understand the image&apos;s contents and purpose.\n</p>',
     'image-redundant-alt':
-      '<p>\n  It is unnecessary and potentially confusing to have alternative text for a\n  link or image to be repeated in text adjacent to the link or image since it\n  would be read twice by a screen reader.\n</p>\n\n<p>\n  Since image buttons use alt attributes for labels, the labels must not\n  duplicate the text next to the button. Duplicated alternative text for an\n  image or link in the text adjacent to that image or link results in screen\n  readers announcing the text to the user twice.\n</p>',
+      '<p>\n  It is unnecessary and potentially confusing to have alternative text for a\n  link or image to be repeated in text adjacent to the link or image since it\n  would be read twice by a screen reader.\n</p>',
     'input-button-name':
-      '<p>\n  Screen reader users are not able to discern the purpose of an\n  <code>input type="button"</code> without an accessible name.\n</p>\n<p>\n  Screen reader users cannot understand the purpose of an image without a\n  discernable and accessible textual name. A title for an image may provide only\n  advisory information about the image itself. Unnamed actionable graphic images\n  such as buttons have no clear description of the destination, purpose,\n  function or action for the non-text content when it is intended to be used as\n  a control.\n</p>',
+      '<p>\n  Screen reader users are not able to discern the purpose of an\n  <code>input type=&quot;button&quot;</code> without an accessible name.\n</p>',
     'input-image-alt':
-      '<p>\n  An <code>&lt;input type="image"&gt;</code> button must have\n  alternate text, otherwise screen reader users will not know the button\'s\n  purpose. Even if the image contains only text, it still requires alternate\n  text, since a screen reader cannot translate images of words into output.\n</p>\n\n<p>\n  <strong>Text Alone Is Not A Label</strong>: Just typing text next to the form\n  element is not sufficient to create a true label. Assistive technologies like\n  screen readers require labels in code that can be determined programmatically.\n  Some screen readers are programmed to guess what the label should be, based on\n  the surrounding text, but this method is not fool-proof and can lead to\n  confusion if the screen reader guesses wrong.\n</p>',
+      '<p>\n  An <code>&lt;input type=&quot;image&quot;&gt;</code> button must have\n  alternate text, otherwise screen reader users will not know the button&apos;s\n  purpose. Even if the image contains only text, it still requires alternate\n  text, since a screen reader cannot translate images of words into output.\n</p>',
     'landmark-banner-is-top-level':
-      '<p>\n  If the banner landmark is not the top-level landmark (and is contained within\n  another landmark), it does not effectively designate the pre-defined header\n  portion of the layout in the design and therefore prevents screen reader users\n  from being able to easily find their way around the layout.\n</p>\n\n<div class="note">\n  <h3>Note</h3>\n  <p>\n    Landmarks are used to designate sections of the overall page design and\n    layout. Headings are used to designate sections within the content.\n  </p>\n</div>',
+      '<p>\n  If the banner landmark is not the top-level landmark (and is contained within\n  another landmark), it does not effectively designate the pre-defined header\n  portion of the layout in the design and therefore prevents screen reader users\n  from being able to easily find their way around the layout.\n</p>',
     'landmark-complementary-is-top-level':
       '<p>\n  Complementary content is ancillary content to the main theme of a document or\n  page. Screen reader users have the option to skip over complementary content\n  when it appears at the top level of the accessibility API. Embedding an\n  <code>&lt;aside&gt;</code> element in another landmark may disable screen\n  reader functionality allowing users to navigate through complementary content.\n</p>',
     'landmark-contentinfo-is-top-level':
-      "<p>\n  The purpose of the <code>contentinfo</code> landmark can be defeated when\n  placed within another landmark, as it can prevent blind screen reader users\n  from being able to quickly find and navigate to the appropriate landmark.\n</p>\n\n<p>\n  When screen reader users have to sort through too much extra information to\n  find what they're looking for, such as not being able to quickly figure out\n  which landmark contains the content information they're looking for negates\n  the purpose of an existing <code>contentinfo</code> landmark.\n</p>",
+      '<p>\n  The purpose of the <code>contentinfo</code> landmark can be defeated when\n  placed within another landmark, as it can prevent blind screen reader users\n  from being able to quickly find and navigate to the appropriate landmark.\n</p>',
     'landmark-main-is-top-level':
-      '<p>\n  Navigating a web page is far simpler for screen reader users if the content\n  splits between some high-level sections. Content outside of these sections is\n  difficult to find, and its purpose may be unclear.\n</p>\n\n<p>\n  HTML has historically lacked some key semantic markers, such as the ability to\n  designate sections of the page as the header, navigation, main content, and\n  footer. Using both HTML5 elements and ARIA landmarks in the same element is\n  considered a best practice, but the future probably favors HTML regions as\n  browser support increases.\n</p>\n\n<p>\n  The HTML Living Standard states "A hierarchically correct main element is one\n  whose ancestor elements <em>are limited</em> to <samp>&lt;html&gt;</samp>,\n  <samp>&lt;body&gt;</samp>, <samp>&lt;div&gt;</samp>,\n  <samp>&lt;form</samp> without an accessible name, and autonomous custom\n  elements. Each main element must be a hierarchically correct main element."\n  This may reflect a "best practice" based on W3C validation.\n</p>',
+      '<p>\n  Navigating a web page is far simpler for screen reader users if the content\n  splits between some high-level sections. Content outside of these sections is\n  difficult to find, and its purpose may be unclear.\n</p>',
     'landmark-no-duplicate-banner':
-      '<p>\n  Landmarks allow blind users to navigate and find content quickly. Missing\n  landmarks require screen reader users to sort through too much extra\n  information to find anything.\n</p>\n<p>\n  JAWS, NVDA, and VoiceOver support the ability to navigate to sections of a web\n  page using ARIA landmarks. Landmarks provide a more elegant solution to the\n  problem of providing a way for users to skip to the main content of the web\n  page. There is no visible alteration to the web design, making it unobtrusive\n  and invisible. Of course, the fact that this technique is invisible is fine\n  for blind screen reader users, but not so fine for sighted keyboard users or\n  screen enlarger users with low vision. In this sense, HTML 5 regions and ARIA\n  landmarks cannot yet replace the old-fashioned "skip navigation" links.\n  Browsers still do not have a built-in way to notify users that HTML 5 regions\n  or ARIA landmarks are present. Screen reader users are the only ones who can\n  take advantage of them. There is a\n  <a href="https://github.com/davidtodd/landmarks" class="external" target="_blank">Firefox ARIA landmark extension\n    <img src="/assets/images/template/courses2014/new-window.png" alt="opens in a new window" class="new_window" width="13" height="13"></a>\n  available, which adds the ability to navigate by landmarks in Firefox, but\n  this is not a native feature of the browser.\n</p>',
+      '<p>\n  Landmarks allow blind users to navigate and find content quickly. Missing\n  landmarks require screen reader users to sort through too much extra\n  information to find anything.\n</p>',
     'landmark-no-duplicate-contentinfo':
-      '<p>\n  One of the main purposes of landmarks is to allow blind users to quickly find\n  and navigate to the appropriate landmark, so you should keep the total number\n  of landmarks relatively low. If you don\'t, screen reader users will have to\n  sort through too much extra information to find what they\'re looking for.\n</p>\n<p>\n  Despite all of the talk about using correct semantic structure for\n  accessibility, HTML has historically lacked some key semantic markers, such as\n  the ability to designate sections of the page as the header, navigation, main\n  content, and footer. With HTML5, these designations are possible, using the\n  new elements <code>header</code>, <code>nav</code>, <code>main</code>, and\n  <code>footer</code>. Similar functionality is available using the ARIA\n  (Accessible Rich Internet Application) attributes <code>role="banner"</code>,\n  <code>role="navigation"</code>, <code>role="main"</code> and\n  <code>role="contentinfo"</code>.\n</p>\n\n<p>\n  JAWS, NVDA, and VoiceOver support the ability to navigate to sections of a web\n  page using ARIA landmarks. Landmarks provide a more elegant solution to the\n  problem of providing a way for users to skip to the main content of the web\n  page. There is no visible alteration to the web design, making it unobtrusive\n  and invisible. Of course, the fact that this technique is invisible is fine\n  for blind screen reader users, but not so fine for sighted keyboard users or\n  screen enlarger users with low vision. In this sense, HTML 5 regions and ARIA\n  landmarks cannot yet replace the old-fashioned "skip navigation" links.\n  Browsers still do not have a built-in way to notify users that HTML 5 regions\n  or ARIA landmarks are present. Screen reader users are the only ones who can\n  take advantage of them. There is a\n  <a href="https://github.com/davidtodd/landmarks" class="external" target="_blank">Firefox ARIA landmark extension\n    <img src="/assets/images/template/courses2014/new-window.png" alt="opens in a new window" class="new_window" width="13" height="13"></a>\n  available, which adds the ability to navigate by landmarks in Firefox, but\n  this is not a native feature of the browser.\n</p>',
+      '<p>\n  One of the main purposes of landmarks is to allow blind users to quickly find\n  and navigate to the appropriate landmark, so you should keep the total number\n  of landmarks relatively low. If you don&apos;t, screen reader users will have to\n  sort through too much extra information to find what they&apos;re looking for.\n</p>',
     'landmark-no-duplicate-main':
-      '<p>\n  Navigating a web page is far simpler for screen reader users if all of the\n  content splits between one or more high-level sections. Content outside of\n  these sections is difficult to find, and its purpose may be unclear.\n</p>\n\n<p>\n  HTML has historically lacked some key semantic markers, such as the ability to\n  designate sections of the page as the header, navigation, main content, and\n  footer. Using both HTML5 elements and ARIA landmarks in the same element is\n  considered a best practice, but the future will favor HTML regions as browser\n  support increases.\n</p>',
+      '<p>\n  Navigating a web page is far simpler for screen reader users if all of the\n  content splits between one or more high-level sections. Content outside of\n  these sections is difficult to find, and its purpose may be unclear.\n</p>',
     'landmark-unique':
       '<p>\n  <code>landmark-unique</code> is a new best practice rule ensures that\n  landmarks have a unique role or accessible name (i.e. role, label, title)\n  combination.\n</p>',
-    list: '<p>\n  Screen readers have a specific way of announcing lists. This feature makes\n  lists clearer to understand, but will only work if lists are properly\n  structured.\n</p>\n<p>\n  When content elements other than list items are contained within a set of list\n  elements, screen readers cannot inform the listener that they are listening to\n  items within the list.\n</p>\n<p>\n  For a list to be valid, it must have both parent elements (a set of\n  <code>ul</code> elements or a set of <code>ol</code> elements) and child\n  elements (declared inside of these tags using the <code>li</code> element),\n  and any other content elements are invalid.\n</p>\n<p>\n  Although some <em>non-content</em> elements such as script, template, style,\n  meta, link, map, area, and datalist are permitted within lists,\n  <em>content</em> elements other than <code>li</code> are not permitted.\n</p>',
+    list: '<p>\n  Screen readers have a specific way of announcing lists. This feature makes\n  lists clearer to understand, but will only work if lists are properly\n  structured.\n</p>',
     listitem:
-      "<p>\n  For a list to be valid, it must have both parent and child elements. Parent\n  elements can either be a set of <code>ul</code> tags or a set of\n  <code>ol</code> tags. Child elements must be declared inside of these tags\n  using the <code>li</code> tag.\n</p>\n\n<p>\n  Screen readers notify users when they come to a list, and tell them how many\n  items are in a list. Announcing the number of items in a list and the current\n  list item helps listeners know what they are listening to, and what to expect\n  as they listen to it.\n</p>\n\n<p>\n  If you don't mark up a list using proper semantic markup in a hierarchy, list\n  items cannot inform the listener that they are listening to a list when no\n  parent is indicating the presence of a list and the type of list.\n</p>",
+      '<p>\n  For a list to be valid, it must have both parent and child elements. Parent\n  elements can either be a set of <code>ul</code> tags or a set of\n  <code>ol</code> tags. Child elements must be declared inside of these tags\n  using the <code>li</code> tag.\n</p>',
     marquee:
-      '<p>\n  The <code>marquee</code> element creates scrolling text that is difficult to\n  read and click on. Beyond that, it can be distracting to viewers, especially\n  to those with low vision, cognitive disabilities, or attention deficits.\n</p>\n<p>\n  People with attention deficits or cognitive disabilities could become\n  distracted by content that scrolls. If scrolling content contains links,\n  people with limited fine motor abilities may not be able to click on the links\n  accurately. Users with visual impairments may not be able to see the scrolling\n  text with enough acuity to know what the content says.\n</p>',
+      '<p>\n  The <code>marquee</code> element creates scrolling text that is difficult to\n  read and click on. Beyond that, it can be distracting to viewers, especially\n  to those with low vision, cognitive disabilities, or attention deficits.\n</p>',
     'meta-refresh':
-      '<p>\n  Since users do not expect a page to refresh automatically, such refreshing can\n  be disorienting. Refreshing also moves the programmatic focus back to the top\n  of the page, away from where the user had it. Such resetting is frustrating\n  for users.\n</p>\n<p>\n  Redirection and page refresh through the use of the\n  <code>&lt;meta&gt;</code> element is problematic for users with disabilities\n  in many ways. The primary reason why redirects and refreshes are problematic\n  is that the user has no control over when the redirect or refresh occurs. If\n  the purpose of the <code>&lt;meta&gt;</code> element is to redirect the user\n  to a new location, server-side means should be employed instead of\n  client-side. Content that moves or auto-updates can be a barrier to anyone who\n  has trouble reading the stationary text as quickly as well as to anyone who\n  has trouble tracking moving objects. It can also cause problems for screen\n  readers.\n</p>',
+      '<p>\n  Since users do not expect a page to refresh automatically, such refreshing can\n  be disorienting. Refreshing also moves the programmatic focus back to the top\n  of the page, away from where the user had it. Such resetting is frustrating\n  for users.\n</p>',
     'object-alt':
-      '<p>\n  Screen readers have no way of translating non-text content into text announced\n  to users. Instead, they read out alternative text. For screen reader users to\n  obtain the information contained in embedded <code>object</code> elements\n  which must contain short, descriptive alternative text.\n</p>\n\n<p>\n  The <code>object</code> element defines an embedded object within a document.\n  It is used to embed multimedia (audio, video, applets, etcetera.) or another\n  web page into the document. The object element needs a text alternative so\n  that users of screen readers know the contents of the object.\n</p>\n<p>\n  When writing a text alternative, keep in mind that the purpose of the\n  alternative text is to relay information to blind users about the image’s\n  contents and purpose - blind users should be able to get as much information\n  from alternative text as a sighted user gets from the image. Alternative text\n  should give the intent, purpose, and meaning of the image.\n</p>\n<p>\n  When writing alternative text, it’s helpful to keep the following questions in\n  mind:\n</p>\n<ul>\n  <li>Why is the non-text content here?</li>\n  <li>What information is it presenting?</li>\n  <li>What purpose does it fulfill?</li>\n  <li>\n    If I could not use the non-text content, what words would I use to convey\n    the same information or function?\n  </li>\n</ul>\n\n<p>\n  Be sure that all text contained in this attribute is useful. Words like\n  “chart”, “image”, “diagram”, or image file names tend not to be very useful.\n</p>',
+      '<p>\n  Screen readers have no way of translating non-text content into text announced\n  to users. Instead, they read out alternative text. For screen reader users to\n  obtain the information contained in embedded <code>object</code> elements\n  which must contain short, descriptive alternative text.\n</p>',
     'presentation-role-conflict':
-      '<p>\n  There are certain cases where the semantic role of an element with\n  <code>role="none"</code> or <code>role="presentation"</code> does not resolve\n  to none or presentation (respectively). When this happens, the element is not\n  removed from the accessibility tree (as expected) and screen readers are able\n  to interact with it.\n</p>\n<p>\n  To ensure the element remains removed from the accessibility tree, you should\n  not add any global ARIA attributes to the element or make if focusable.\n</p>',
+      '<p>\n  There are certain cases where the semantic role of an element with\n  <code>role=&quot;none&quot;</code> or <code>role=&quot;presentation&quot;</code> does not resolve\n  to none or presentation (respectively). When this happens, the element is not\n  removed from the accessibility tree (as expected) and screen readers are able\n  to interact with it.\n</p>',
     'role-img-alt':
-      "<p>\n  Screen readers have no way of translating an image into words that gets read\n  to the user, even if the image only consists of text. As a result, it's\n  necessary for images to have short, descriptive and accessible alternative\n  text so screen reader users clearly understand the image's contents and\n  purpose.\n</p>\n<p>\n  If you can't see, all types of visual information, including images, are\n  completely useless unless an accessible text alternative is provided which\n  screen readers can convert into either sound or braille. People with low\n  vision or color-blindness disabilities also require accessible alternative\n  text to varying degrees.\n</p>\n<p>\n  Screen readers cannot convert visual image information to speech or braille in\n  the absence of an accessible text alternative associated with the image.\n</p>",
+      '<p>\n  Screen readers have no way of translating an image into words that gets read\n  to the user, even if the image only consists of text. As a result, it&apos;s\n  necessary for images to have short, descriptive and accessible alternative\n  text so screen reader users clearly understand the image&apos;s contents and\n  purpose.\n</p>',
     'scope-attr-valid':
-      '<p>\n  The <code>scope</code> attribute makes table navigation much easier for screen\n  reader users, provided that it is used correctly. Incorrectly used,\n  <code>scope</code> can make table navigation much harder and less efficient.\n</p>\n\n<p>\n  A screen reader operates under the assumption that a table has a header and\n  that this header specifies a scope. Because of the way screen readers\n  function, having an accurate header makes viewing a table far more accessible\n  and more efficient for people who use the device.\n</p>',
+      '<p>\n  The <code>scope</code> attribute makes table navigation much easier for screen\n  reader users, provided that it is used correctly. Incorrectly used,\n  <code>scope</code> can make table navigation much harder and less efficient.\n</p>',
     'scrollable-region-focusable':
       '<p>\n  Checks scrollable content for focusable elements enabling keyboard navigation.\n  Keyboard navigation should not fail when focus moves to an element within a\n  scrollable region.\n</p>',
     'select-name':
-      '<p>\n  Effective form labels are required to make forms accessible. The purpose of\n  form elements such as checkboxes, radio buttons, input fields, etcetera, is\n  often apparent to sighted users, even if the form element is not\n  programmatically labeled. Screen readers users require useful form labels to\n  identify form fields. Adding a label to all form elements eliminates ambiguity\n  and contributes to a more accessible product.\n</p>\n<p>\n  When labels for form elements are absent, screen reader users do not know the\n  input data expectations. Screen readers cannot programmatically determine\n  information about input objects without an established label relationship (or\n  redundant text serving as a label).\n</p>',
+      '<p>\n  Effective form labels are required to make forms accessible. The purpose of\n  form elements such as checkboxes, radio buttons, input fields, etcetera, is\n  often apparent to sighted users, even if the form element is not\n  programmatically labeled. Screen readers users require useful form labels to\n  identify form fields. Adding a label to all form elements eliminates ambiguity\n  and contributes to a more accessible product.\n</p>',
     'server-side-image-map':
-      '<p>\n  Server-side image maps are not keyboard accessible; mouse clicks are required\n  to access the links contained in the image, making the image inaccessible to\n  people who only use keyboards for their navigation.\n</p>\n\n<p>\n  Server side image maps pass the coordinates of the mouse click to the\n  server-side script used to process the image map. Because they rely on mouse\n  clicks, they are not keyboard accessible, whereas client-side image maps are\n  keyboard accessible. Further, it is not possible to provide text alternatives\n  to the actionable areas of a server-side image map like you can with the\n  <code>area</code>s of a client-side image map.\n</p>',
+      '<p>\n  Server-side image maps are not keyboard accessible; mouse clicks are required\n  to access the links contained in the image, making the image inaccessible to\n  people who only use keyboards for their navigation.\n</p>',
     'skip-link':
       '<p>\n  Screen readers announce content sequentially as it appears in the HTML file.\n  What this means for users of assistive technology is that the content at the\n  top of the page, typically including the entire navigation, is read out to the\n  user before reaching any of the main content. Since content at the top of the\n  page can often be very lengthy, it can be time-consuming to listen to or tab\n  through all of it when the user is only interested in the main content.\n  Including a skip link in an HTML page is beneficial to blind users, users with\n  low vision, and mouse-only users.\n</p>',
     'svg-img-alt':
-      '<p>\n  The intent of\n  <a href="https://www.w3.org/WAI/WCAG21/Understanding/non-text-content">Success Criterion 1.1.1</a>\n  is to make information conveyed by non-text content (including SVG images)\n  accessible through the use of a text alternative. Text alternatives are a\n  primary way for making information accessible because they can be rendered\n  through any sensory modality (for example, visual, auditory or tactile) to\n  match the needs of the user. Providing text alternatives allows the\n  information to be rendered in a variety of ways by a variety of user agents.\n  For example, a person who cannot see a picture can have the text alternative\n  read aloud using synthesized speech. A person who cannot hear an audio file\n  can have the text alternative displayed so that he or she can read it. In the\n  future, text alternatives will also allow information to be more easily\n  translated into sign language or into a simpler form of the same language.\n</p>',
+      "<p>\n If you can't see, images are completely useless without a digital text alternative. The same is true in varying degrees for people with low vision or colour-blindness. \n</p>",
     tabindex:
-      '<p>\n  Using <code>tabindex</code> with a value greater than 0 can create as many\n  problems as it solves. It creates an unexpected tab order, which makes the\n  page less intuitive and can give the appearance of skipping certain elements\n  entirely.\n</p>\n\n<p>\n  Here are some of the problems that <code>tabindex</code> (with a value of 1 or\n  greater) causes:\n</p>\n<ul>\n  <li>\n    <strong>Unexpected tab order:</strong> From the perspective of the user,\n    <code>tabindex</code> changes the default tab order in unexpected ways,\n    possibly causing disorientation.\n  </li>\n  <li>\n    <strong>Items can appear to be skipped entirely:</strong> Items appear in\n    the tab order only once. If a user tabs past the <code>tabindex</code> items\n    and continues through the rest of the web page, at some point the user\n    arrives at the location of the <code>tabindex</code> items, but the tabbing\n    process skips over these links, because the user already tabbed through them\n    at the beginning of the cycle. Incorrect tab orders are frustrating when\n    users are unable access items, and may not know that (s)he needs to cycle\n    through the entire set of links on the page to reaccess those links.\n  </li>\n  <li>\n    <strong>All <code>tabindex</code> items are tabbed to before any non-<code>tabindex</code>\n      items.</strong>\n    If you want to change the tab order of the first items AND of a section\n    later in the page, you would need to set the <code>tabindex</code> value for\n    every single item through to the end of the modified section. Taken to a bit\n    of an extreme, if you have 20 links on a page, and if you set the\n    <code>tabindex</code> of one of those links to <code>tabindex="100"</code>,\n    the user tabs to that link first, even though there are fewer than 100 links\n    on the page. There is no way to modify the tab order of sections later in\n    the page unless you manually set the tab order of all the links before that\n    section.\n  </li>\n</ul>',
+      '<p>\n  Using <code>tabindex</code> with a value greater than 0 can create as many\n  problems as it solves. It creates an unexpected tab order, which makes the\n  page less intuitive and can give the appearance of skipping certain elements\n  entirely.\n</p>',
     'table-duplicate-name':
-      '<p>\n  Screen readers have a specific way of announcing tables. When tables are not\n  properly marked up, this creates the opportunity for confusing or inaccurate\n  screen reader output.\n</p>\n<p>\n  When tables have summary and caption text that is identical, screen reader\n  users can be confused and find it difficult to know the name and purpose of\n  the table.\n</p>',
+      '<p>\n  When tables have summary and caption text that is identical, screen reader\n  users can be confused and find it difficult to know the name and purpose of\n  the table.\n</p>',
     'td-headers-attr':
-      "<p>\n  Screen readers have a specific way of announcing tables. When tables are not\n  properly marked up, this creates the opportunity for confusing or inaccurate\n  screen reader output.\n</p>\n<p>\n  Sighted users can usually tell at a glance what the table's headers are and\n  what their relationship to the data is. For non-sighted users this must be\n  done in the markup.\n</p>\n\n<p>\n  When a data table is designed with accessibility in mind, the user enters into\n  table navigation mode, which allows the user to navigate from cell to cell\n  within the table while hearing the screen reader announce the corresponding\n  table headers for the data cells. Hearing the table headers is especially\n  helpful when navigating through large data tables, or when cells contain\n  similar-sounding data that could be easily confused.\n</p>\n\n<p>\n  Table navigation mode is not useful, though, if the table lacks accessibility\n  features.\n</p>",
+      "<p>\n  Sighted users can usually tell at a glance what the table's headers are and\n  what their relationship to the data is. For non-sighted users this must be\n  done in the markup.\n</p>",
     'th-has-data-cells':
-      '<p>\n  Screen readers have a specific way of announcing tables. When tables are not\n  properly marked up, this creates the opportunity for confusing or inaccurate\n  screen reader output.\n</p>\n<p>\n  When tables are not marked up semantically and do not have the correct header\n  structure, screen reader users cannot correctly perceive the relationships\n  between the cells and their contents visually.\n</p>',
+      '<p>\n  When tables are not marked up semantically and do not have the correct header\n  structure, screen reader users cannot correctly perceive the relationships\n  between the cells and their contents visually.\n</p>',
     'valid-lang':
-      "<p>\n  When configuring a screen reader, users select a default language. If the\n  language of a webpage is not specified, the screen reader assumes it is the\n  default language set by the user. Language selection becomes an issue for\n  users who speak multiple languages and access the website in more than one\n  language. It is essential to specify a language and ensure that it is valid so\n  website text is pronounced correctly.\n</p>\n<p>\n  Screen readers use different sound libraries for each language, based on the\n  pronunciation and characteristics of that language. Screen readers can switch\n  between these language libraries easily, but only if the documents specify\n  which language(s) to read. If the language is not specified, the screen reader\n  reads the document in the user's default language, resulting in a confusing\n  experience!\n</p>",
+      '<p>\n  When configuring a screen reader, users select a default language. If the\n  language of a webpage is not specified, the screen reader assumes it is the\n  default language set by the user. Language selection becomes an issue for\n  users who speak multiple languages and access the website in more than one\n  language. It is essential to specify a language and ensure that it is valid so\n  website text is pronounced correctly.\n</p>',
     'video-caption':
-      '<p>\n  If a video has no caption, deaf users have limited or no access to the\n  information contained in it. Even if a captions track is available, ensure\n  that it contains all meaningful information in the video, not just dialogue.\n</p>\n<p>\n  Deaf viewers can see everything in the video but are not able to hear any of\n  it without captions. Without a caption track, deaf viewers do not have a way\n  of knowing the dialog, narration, or the essential sounds not spoken by\n  people, such as "dramatic instrumental music," applause, screams, or other\n  sounds that set the scene, provide context, or give meaning to the video.\n</p>',
+      '<p>\n  If a video has no caption, deaf users have limited or no access to the\n  information contained in it. Even if a captions track is available, ensure\n  that it contains all meaningful information in the video, not just dialogue.\n</p>',
     'no-autoplay-audio':
-      '<p>\n  People who are blind or have low vision and use screen reading software can\n  find it hard to hear the screen reader\'s speech output if there is other audio\n  playing at the same time. If automatically playing audio lasts more than three\n  seconds, an easily located, accessible mechanism must be provided to pause or\n  stop the audio or control the audio volume. An audio control allows screen\n  reader users to hear the screen reader without other sounds playing.\n</p>\n\n<div class="note">\n  <h3>Note:</h3>\n  <p>\n    Playing audio automatically when landing on a page may affect a screen\n    reader user\'s ability to find the mechanism to stop it because they navigate\n    by listening and automatically started sounds might interfere with that\n    navigation. Therefore, we discourage the practice of automatically starting\n    sounds (especially if they last more than three seconds), and encourage that\n    the sound be started by an action initiated by the user after they reach the\n    page, rather than requiring that the sound be stopped by an action of the\n    user after they land on the page.\n  </p>\n</div>',
+      '<p>\n  People who are blind or have low vision and use screen reading software can\n  find it hard to hear the screen reader&apos;s speech output if there is other audio\n  playing at the same time. If automatically playing audio lasts more than three\n  seconds, an easily located, accessible mechanism must be provided to pause or\n  stop the audio or control the audio volume. An audio control allows screen\n  reader users to hear the screen reader without other sounds playing.\n</p>',
     'aria-hidden-body':
-      '<p>\n  When <code>&lt;body aria-hidden="true"</code>, content is not\n  accessible to assistive technology.\n</p>\n<p>\n  Applying <code>aria-hidden="true"</code> to otherwise accessible objects: A\n  web page is designed to be fully accessible, and it would be accessible if\n  elements do not contain the\n  <code>aria-hidden="true"</code> attribute value. Screen readers do\n  not read content marked with the\n  <code>aria-hidden="true"</code> attribute value. Users can still tab\n  to focusable elements in the hidden objects, but screen readers remain silent.\n</p>\n<p>\n  Any content or interface elements intentionally hidden from users — e.g.,\n  inactive dialogs, collapsed menus — must also be hidden from screen reader\n  users. When items are available to sighted users — such as when they activate\n  a button or expand a menu item — the same items must be available to screen\n  reader users. The goal is to provide screen reader users an equivalent user\n  experience to sighted users. If there is a compelling reason to hide content\n  from sighted users, there is usually a compelling reason also to hide that\n  content from blind users. Further, when content is made available to sighted\n  users, it makes sense to make it available to blind users as well.\n</p>',
+      '<p>\n  Screen readers do not read content marked with the <code>aria-hidden="true"</code> attribute value. Users can still tab to focusable elements in the hidden objects, but screen readers remain silent.\n</p>',
     'aria-required-attr':
-      "<p>\n  ARIA widget roles require additional attributes that describe the state of the\n  widget. The state of the widget is not communicated to screen reader users if\n  a required attribute is omitted.\n</p>\n\n<p>\n  Certain roles act as composite user interface widgets. As such, they typically\n  act as containers that manage other, contained widgets. When an object\n  inherits from multiple ancestors and one ancestor indicates support for one\n  property while another ancestor indicates that the same property is required,\n  the property becomes required on the inheriting object. In some cases, default\n  values are sufficient to meet ARIA attribute requirements.\n</p>\n\n<p>\n  When required state and property attributes for specific roles (and subclass\n  roles) are not present, screen readers may not be able to convey the\n  definition of what the element's role is to the users.\n</p>",
+      '<p>\n  ARIA widget roles require additional attributes that describe the state of the\n  widget. The state of the widget is not communicated to screen reader users if\n  a required attribute is omitted.\n</p>',
     bypass:
-      '<p>\n  Since web sites often display secondary, repeated content on multiple pages\n  (such as navigation links, heading graphics, and advertising frames),\n  keyboard-only users benefit from faster, more direct access to the primary\n  content on a page. This reduces keystrokes and minimizes associated physical\n  pain.\n</p>\n\n<p>\n  For users who cannot use a mouse, navigating with a keyboard is more difficult\n  and time-consuming when the interface does not include methods to make\n  keyboard navigation easier. For example, to activate a link in the middle of a\n  web page, a keyboard user may have to tab through a large number of links and\n  buttons in the header and main navigation of the page.\n</p>\n\n<p>\n  At the extreme end, users with severe motor limitations might require several\n  minutes to tab through all of those elements, and can lead to fatigue and\n  possible physical pain for some users. Even users with less severe constraints\n  will require longer than mouse users, who can click on the desired link in a\n  second or two.\n</p>',
+      '<p>\n  Since web sites often display secondary, repeated content on multiple pages\n  (such as navigation links, heading graphics, and advertising frames),\n  keyboard-only users benefit from faster, more direct access to the primary\n  content on a page. This reduces keystrokes and minimizes associated physical\n  pain.\n</p>',
     'color-contrast':
-      "<p>\n  Some people with low vision experience low contrast, meaning that there aren't\n  very many bright or dark areas. Everything tends to appear about the same\n  brightness, which makes it hard to distinguish outlines, borders, edges, and\n  details. Text that is too close in luminance (brightness) to the background\n  can be hard to read.\n</p>\n<p>\n  There are nearly three times more individuals with low vision than those with\n  total blindness. One in twelve people cannot see the average full spectrum of\n  colors - about 8% of men and 0.4% of women in the US. A person with low vision\n  or color blindness is unable to distinguish text against a background without\n  sufficient contrast.\n</p>\n<p>Color transparency and opacity is taken into account in the background.</p>\n<p>\n  Color transparency and opacity in the foreground is more difficult to detect\n  and account for due to:\n</p>\n<ul>\n  <li>1:1 colors in foreground and background.</li>\n  <li>CSS background gradients.</li>\n  <li>Background colors in CSS pseudo-elements.</li>\n  <li>Background colors created with CSS borders.</li>\n  <li>\n    Overlap by another element in the foreground - this sometimes comes up with\n    tricky positioning.\n  </li>\n  <li>Elements moved outside the viewport via CSS.</li>\n</ul>",
+      '<p>\n  Some people with low vision experience low contrast, meaning that there aren&apos;t\n  very many bright or dark areas. Everything tends to appear about the same\n  brightness, which makes it hard to distinguish outlines, borders, edges, and\n  details. Text that is too close in luminance (brightness) to the background\n  can be hard to read.\n</p>',
     'document-title':
-      '<p>\n  Screen reader users use page titles to get an overview of the contents of the\n  page. Navigating through pages can quickly become difficult and confusing for\n  screen reader users if the pages are not marked with a title. The page\n  <code>title</code> element is the first thing screen reader users hear when\n  first loading a web page.\n</p>\n\n<p>\n  The <code>title</code> is the first thing that screen reader users hear when\n  they arrive at a page. If there is no <code>title</code> or if the\n  <code>title</code> is not descriptive and unique, screen reader users must\n  read through the page to determine its contents and purpose.\n</p>',
+      '<p>\n  Screen reader users use page titles to get an overview of the contents of the\n  page. Navigating through pages can quickly become difficult and confusing for\n  screen reader users if the pages are not marked with a title. The page\n  <code>title</code> element is the first thing screen reader users hear when\n  first loading a web page.\n</p>',
     'duplicate-id-aria':
-      "<p>\n  Duplicate IDs are common validation errors that may break the accessibility of\n  labels, e.g., ARIA elements, form fields, table header cells.\n</p>\n<p>\n  Unique ID's differentiate each element from another and prevent invalid\n  markup, wherein only the first instance gets acted upon by client-side\n  scripting, or where assistive technologies typically only reference the first\n  one accurately.\n</p>",
+      '<p>\n  Duplicate IDs are common validation errors that may break the accessibility of\n  labels, e.g., ARIA elements, form fields, table header cells.\n</p>',
     'duplicate-id':
-      "<p>\n  The ID attribute uniquely identifies elements on a page. It does not make\n  sense to duplicate an ID.\n</p>\n\n<p>\n  Duplicate ID's can break the accessibility of labels for forms, table header\n  cells, etc., by the second instance being skipped by screen readers, or by\n  client-side scripts. They are common markup validation errors that can\n  eliminate possible sources of accessibility problems, when not breaking\n  accessibility.\n</p>\n\n<p>\n  Those experienced with client-side scripting know that when you re-use an id,\n  typically the only one that gets acted upon by the scripting is the first\n  instance of the use of that ID. Similarly, assistive technologies may, when\n  referencing an id, only reference the first one accurately.\n</p>",
+      "<p>\n  The ID attribute uniquely identifies elements on a page. It does not make\n  sense to duplicate an ID.\n</p>\n\n<p>\n  Duplicate ID's can break the accessibility of labels for forms, table header\n  cells, etc., by the second instance being skipped by screen readers, or by\n  client-side scripts. They are common markup validation errors that can\n  eliminate possible sources of accessibility problems, when not breaking\n  accessibility.\n</p>",
     'empty-heading':
-      "<p>\n  Screen readers alert users to the presence of a heading tag. If the heading is\n  empty or the text cannot be accessed, this could either confuse users or even\n  prevent them from accessing information on the page's structure.\n</p>\n\n<p>\n  If the text inside a heading cannot be accessed by a screen reader, users of\n  this technology will not be able to hear the contents of the heading. Since\n  headings relay the structure of a webpage, it's crucial that users of screen\n  readers are able to access the contents.\n</p>\n<p>\n  Applying heading markup (<code>&lt;h1&gt;</code> through\n  <code>&gt;&lt;h6&gt;</code>) is a quick way to make text stand out, however,\n  using it for anything other than headings will make navigating a web page more\n  confusing for users of assistive technology.\n</p>\n<p>\n  In addition to making the page more accessible, headings have other benefits,\n  since search engines use headings when filtering, ordering, and displaying\n  results. Improving the accessibility of your site can also have the effect of\n  making your page more findable.\n</p>\n<p>\n  In the same way that sighted users can glance at a page and get a sense of its\n  contents, users of screen readers can do the same by navigating through\n  headings. Well written and properly ordered headings can save users,\n  especially those who use screen readers, a lot of time and frustration.\n</p>",
+      '<p>\n  Screen readers alert users to the presence of a heading tag. If the heading is\n  empty or the text cannot be accessed, this could either confuse users or even\n  prevent them from accessing information on the page&apos;s structure.\n</p>',
     'form-field-multiple-labels':
       '<p>\n  Assigning multiple labels to the same form field can cause problems for some\n  combinations of screen readers and browsers, and the results are inconsistent\n  from one combination to the next. Some combinations will read the first label.\n  Some will read the last label. Others will read both labels.\n</p>',
     'heading-order':
-      '<p>\n  The underlying purpose of headers is to convey the structure of the page. For\n  sighted users, the same purpose is achieved using different sizes of text.\n  Text size, however, is not helpful for users of screen readers, because a\n  screen reader identifies a header only if it is properly marked-up. When\n  heading elements are applied correctly, the page becomes much easier to\n  navigate for screen reader users and sighted users alike.\n</p>\n\n<p>\n  In the same way that sighted users can glance at a page and get a sense of its\n  contents, users of screen readers can do the same by navigating through\n  headings. Well written and properly ordered headings can save users,\n  especially those who use screen readers, a lot of time and frustration.\n</p>\n\n<p>\n  The purpose of headings is to describe the structure of the webpage, not just\n  highlight important text. They should be brief, clear, unique, and marked with\n  <code>h1</code> through <code>h6</code> elements applied in hierarchical\n  order. All of these qualities make headings valuable tools for screen reader\n  users. Similar to the way sighted users can glance at a page and get a sense\n  of its contents, screen reader users can navigate through headings. Well\n  written and properly ordered headings can save screen reader time and\n  frustration.\n</p>\n\n<p>\n  In addition to making the page more accessible, headings have other benefits\n  since search engines use headings when filtering, ordering, and displaying\n  results. Improving the accessibility of your site can also have the effect of\n  making your page more findable.\n</p>',
+      '<p>\n  The underlying purpose of headers is to convey the structure of the page. For\n  sighted users, the same purpose is achieved using different sizes of text.\n  Text size, however, is not helpful for users of screen readers, because a\n  screen reader identifies a header only if it is properly marked-up. When\n  heading elements are applied correctly, the page becomes much easier to\n  navigate for screen reader users and sighted users alike.\n</p>',
     'html-has-lang':
-      "<p>\n  When configuring a screen reader, users select a default language. If the\n  language of a webpage is not specified, the screen reader assumes the default\n  language set by the user. Language settings become an issue for users who\n  speak multiple languages and access website in more than one language. It is\n  essential to specify a language and ensure that it is valid so website text is\n  pronounced correctly.\n</p>\n<p>\n  Screen readers use different sound libraries for each language, based on the\n  pronunciation and characteristics of that language. Screen readers can switch\n  between these language libraries easily, but only if the documents specify\n  which language(s) to read and when. If the language is not specified, the\n  screen reader reads the document in the user's default language, resulting in\n  a strange accent! It is impossible to understand anything when screen readers\n  are using the wrong language library.\n</p>",
+      '<p>\n  When configuring a screen reader, users select a default language. If the\n  language of a webpage is not specified, the screen reader assumes the default\n  language set by the user. Language settings become an issue for users who\n  speak multiple languages and access website in more than one language. It is\n  essential to specify a language and ensure that it is valid so website text is\n  pronounced correctly.\n</p>',
     'html-lang-valid':
-      "<p>\n  When configuring a screen reader, users select a default language. If the\n  language of a webpage is not specified, the screen reader assumes the default\n  language set by the user. Language settings are an issue for users who speak\n  multiple languages and access website in more than one language. It is\n  essential to specify a language and ensure that it is valid so website text is\n  pronounced correctly.\n</p>\n<p>\n  Screen readers use different sound libraries for each language, based on the\n  pronunciation and characteristics of that language. Screen readers can switch\n  between these language libraries easily, but only if the documents correctly\n  specify which language(s) to read. If the language is not specified, the\n  screen reader reads the document in the user's default language, resulting in\n  a confusing accent! It is impossible to understand anything when screen\n  readers are using the wrong language library.\n</p>",
+      '<p>\n  When configuring a screen reader, users select a default language. If the\n  language of a webpage is not specified, the screen reader assumes the default\n  language set by the user. Language settings are an issue for users who speak\n  multiple languages and access website in more than one language. It is\n  essential to specify a language and ensure that it is valid so website text is\n  pronounced correctly.\n</p>',
     'label-title-only':
-      '<p>\n  The <code>title</code> and <code>aria-describedby</code> attributes are used\n  to provide additional information such as a hint. Hints are exposed to\n  accessibility APIs differently than labels and as such, this can cause\n  problems with assistive technologies.\n</p>\n\n<p>\n  When form inputs such as text entry fields, radio buttons, check boxes, and\n  select menus contain no labels other than <code>title</code> and\n  <code>aria-describedby</code> attribute values, screen readers interpret the\n  content as advisory information only. Labels created by the\n  <code>title</code> and <code>aria-describedby</code> values are not sufficient\n  to create a true label that can be determined programmatically from the code\n  to convey the purpose of the input form element.\n</p>',
+      '<p>\n  The <code>title</code> and <code>aria-describedby</code> attributes are used\n  to provide additional information such as a hint. Hints are exposed to\n  accessibility APIs differently than labels and as such, this can cause\n  problems with assistive technologies.\n</p>',
     'link-in-text-block':
-      "<p>\n  Some people with low vision experience low contrast, meaning that there aren't\n  very many bright or dark areas. Everything tends to appear about the same\n  brightness, which makes it hard to distinguish outlines, borders, edges, and\n  details. Text that is too close in luminance (brightness) to the background\n  can be hard to read.\n</p>\n<p>\n  There are nearly three times more individuals with low vision than those with\n  total blindness. One person in twelve has a color deficiency - about 8% of men\n  and 0.4% of women in the US. A person with low vision or color blindness is\n  unable to distinguish text against a background without sufficient contrast.\n</p>\n<p>\n  When a sufficient color contrast ratio of 3:1 is not present to distinguish\n  link text color from surrounding text color, users with low vision who\n  experience low contrast cannot detect visually that the text is intended to\n  function as a link.\n</p>",
+      '<p>\n  Some people with low vision experience low contrast, meaning that there aren&apos;t\n  very many bright or dark areas. Everything tends to appear about the same\n  brightness, which makes it hard to distinguish outlines, borders, edges, and\n  details. Text that is too close in luminance (brightness) to the background\n  can be hard to read.\n</p>',
     'link-name':
-      '<ul>\n  <li>\n    <p>\n      Inaccessible link elements pose barriers to accessibility, as they are a\n      fundamental component of a website.\n    </p>\n  </li>\n  <li>\n    <p>\n      Users who rely exclusively on a keyboard (and no mouse) to navigate a\n      webpage can only click on links that can receive programmatic focus. A\n      link that cannot receive programmatic focus is inaccessible to these\n      users.\n    </p>\n  </li>\n\n  <li>\n    <p>\n      Like sighted users, screen reader users need to know where a link is\n      pointing. Inner link text provides this information, though it won\'t get\n      used if a screen reader can\'t access it.\n    </p>\n  </li>\n\n  <li>\n    <p>\n      Keyboard users, including visually impaired screen reader users or people\n      who cannot use a mouse, can activate only the links and form elements that\n      can receive programmatic focus. Any events activated exclusively by other\n      types of focus, for example <code>onmouseover</code> events that depend on\n      the mouse hover focus, are inaccessible to keyboard users. Only links and\n      form elements receive keyboard focus by default. Modify elements that are\n      not links or form components to receive focus by adding\n      <code>tabindex="0"</code>.\n    </p>\n  </li>\n</ul>',
+      '<p>\n Inaccessible link elements pose barriers to accessibility, as they are a fundamental component of a website.\n </p>',
     'meta-viewport-large':
-      '<p>\n  The <code>user-scalable="no"</code> parameter inside the\n  <code>content</code> attribute of\n  <code>&lt;meta name="viewport"&gt;</code> element disables zooming on a page.\n  The <code>maximum-scale</code> parameter limits the amount the user can zoom.\n  This is problematic for people with low vision who rely on screen magnifiers\n  to properly see the contents of a web page.\n</p>\n\n<p>\n  Users with partial vision and low vision often choose to enlarge the fonts on\n  their browser to make text on the web easier to read. The browser\'s viewport\n  focus is everything visible in the browser window at a given moment. If the\n  user maximizes the browser to full size on a high-resolution monitor, the\n  viewport focus area is large and may include the entire web page.\n</p>\n<p>\n  If the browser window is small, the viewport focus area includes only a small\n  part of the web page. The browser\'s viewport focus does not affect the\n  programmatic focus. Users can scroll up and down the web page, but the\n  programmatic focus does not follow the viewport. The Web Content Accessibility\n  Guidelines calls for developers to design pages so that they support resize up\n  to 200%; however, it is a best practice to require 5x zoom.\n</p>',
+      '<p>\n  The <code>user-scalable=&quot;no&quot;</code> parameter inside the\n  <code>content</code> attribute of\n  <code>&lt;meta name=&quot;viewport&quot;&gt;</code> element disables zooming on a page.\n  The <code>maximum-scale</code> parameter limits the amount the user can zoom.\n  This is problematic for people with low vision who rely on screen magnifiers\n  to properly see the contents of a web page.\n</p>',
     'meta-viewport':
-      '<p>\n  The <code>user-scalable="no"</code> parameter inside the\n  <code>content</code> attribute of\n  <code>&lt;meta name="viewport"&gt;</code> element disables zooming on a page.\n  The <code>maximum-scale</code> parameter limits the amount the user can zoom.\n  This is problematic for people with low vision who rely on screen magnifiers\n  to properly see the contents of a web page.\n</p>\n\n<p>\n  Users with partial vision and low vision often choose to enlarge the fonts on\n  their browser to make text on the web easier to read. The browser\'s viewport\n  focus is everything visible in the browser window at a given moment.\n  Maximizing the browser to full size on a high-resolution monitor creates a\n  large the viewport focus area and may include the entire web page.\n</p>\n<p>\n  If the browser window is small, the viewport focus area only includes a small\n  part of the web page. The browser\'s viewport focus does not affect the\n  programmatic focus. Users can scroll up and down the web page, but the\n  programmatic focus does not follow the viewport. The Web Content Accessibility\n  Guidelines calls for developers to design pages so that they support resize up\n  to 200%.\n</p>\n<p>\n  Ensures that the <code>user-scalable="no"</code> parameter is not present in\n  the <code>&lt;meta name="viewport"&gt;</code> element and the\n  <code>maximum-scale</code> parameter is not less than 2.\n</p>',
+      '<p>\n  The <code>user-scalable=&quot;no&quot;</code> parameter inside the\n  <code>content</code> attribute of\n  <code>&lt;meta name=&quot;viewport&quot;&gt;</code> element disables zooming on a page.\n  The <code>maximum-scale</code> parameter limits the amount the user can zoom.\n  This is problematic for people with low vision who rely on screen magnifiers\n  to properly see the contents of a web page.\n</p>',
     'nested-interactive':
       '<p>\n  Focusable elements with an interactive control ancestor (any element that\n  accepts user input such as button or anchor elements) are not announced by\n  screen readers and create an empty tab stop. That is, you could tab to the\n  element but the screen reader will not announce its name, role, or state.\n</p>',
     'page-has-heading-one':
-      "<p>\n  Screen reader users can use keyboard shortcuts to navigate directly to the\n  first <code>h1</code>, which, in principle, should allow them to jump directly\n  to the main content of the web page. If there is no <code>h1</code>, or if the\n  <code>h1</code> appears somewhere other than at the start of the main content,\n  screen reader users must listen to more of the web page to understand its\n  structure, wasting valuable time.\n</p>\n\n<p>\n  Keep in mind that blind users can't just look at a web page and immediately\n  understand its layout the way that a visual user can. Visual users can take in\n  much information about the page layout without having to read all of the\n  content. Blind users don't have that luxury. Screen readers read linearly,\n  which means listening to the entire web page unless there is some other\n  convenient way to get a \"glimpse\" of the page's layout and structure. It turns\n  out that headings are a way to do that. Screen reader users can use keyboard\n  shortcuts to navigate through the heading structure of a document.\n</p>",
+      '<p>\n  Screen reader users can use keyboard shortcuts to navigate directly to the\n  first <code>h1</code>, which, in principle, should allow them to jump directly\n  to the main content of the web page. If there is no <code>h1</code>, or if the\n  <code>h1</code> appears somewhere other than at the start of the main content,\n  screen reader users must listen to more of the web page to understand its\n  structure, wasting valuable time.\n</p>',
     region:
-      "<p>\n  Navigating a web page is far simpler for screen reader users if the content\n  splits between multiple high-level sections. Content outside of sections is\n  difficult to find, and the content's purpose may be unclear.\n</p>\n\n<p>\n  Historically, HTML lacked some key semantic markers such as the ability to\n  designate sections of the page as the header, navigation, main content, and\n  footer. Using both HTML5 elements and ARIA landmarks in the same element is\n  considered a best practice, but the future favors using native HTML5 element\n  regions as browser support increases.\n</p>",
+      '<p>\n  Navigating a web page is far simpler for screen reader users if the content\n  splits between multiple high-level sections. Content outside of sections is\n  difficult to find, and the content&apos;s purpose may be unclear.\n</p>',
     'button-name':
-      '<p>\n  Screen reader users are not able to discern the purpose of elements with\n  <code>role="link"</code>, <code>role="button"</code>, or\n  <code>role="menuitem"</code> that do not have an accessible name.\n</p>',
+      '<p>\n  Screen reader users are not able to discern the purpose of elements with\n  <code>role=&quot;link&quot;</code>, <code>role=&quot;button&quot;</code>, or\n  <code>role=&quot;menuitem&quot;</code> that do not have an accessible name.\n</p>',
     'aria-allowed-role':
-      '<p>\n  Intended accessible technology behavior by a developer is not enabled when an\n  assigned WAI-ARIA role value is invalid for the parent element.\n</p>\n<p>\n  When screen readers and other assistive technologies do not know the role of\n  each element on the web page, they are not able to interact with it\n  intelligently, nor are they able to communicate the role to the user. When the\n  value for a role is invalid, there is no way to communicate the element\'s\n  features, properties, and methods to assistive technologies. For example,\n  applying <code>role="table"</code> to a <code>&lt;ul&gt;</code> effectively\n  hijacks the default semantics associated with the\n  <code>&lt;ul&gt;</code> element in a way that screenreaders do not expect\n  resulting in unexpected behavior.\n</p>',
+      '<p>\n  Intended accessible technology behavior by a developer is not enabled when an\n  assigned WAI-ARIA role value is invalid for the parent element.\n</p>',
     'aria-roles':
-      "<p>\n  Elements assigned invalid ARIA role values are not interpreted by assistive\n  technology as intended by the developer.\n</p>\n<p>\n  When screen readers and other assistive technologies do not know the role of\n  each element on the web page, they are not able to interact with it\n  intelligently, nor are they able to communicate the role to the user. An\n  element's features, properties, and methods of conveying information to and/or\n  from the user can't be communicated via assistive technologies when a role\n  value is invalid.\n</p>",
+      '<p>\n  Elements assigned invalid ARIA role values are not interpreted by assistive\n  technology as intended by the developer.\n</p>',
     label:
-      '<p>\n  Effective form labels are required to make forms accessible. The purpose of\n  form elements such as checkboxes, radio buttons, input fields, etcetera, is\n  often apparent to sighted users, even if the form element is not\n  programmatically labeled. Screen readers users require useful form labels to\n  identify form fields. Adding a label to all form elements eliminates ambiguity\n  and contributes to a more accessible product.\n</p>\n<p>\n  When labels for form elements are absent, screen reader users do not know the\n  input data expectations. Screen readers cannot programmatically determine\n  information about input objects without an established label relationship (or\n  redundant text serving as a label).\n</p>\n<p>\n  The absence of labels prevent fields from receiving focus when read by screen\n  readers, and users with impaired motor control do not get the benefit of a\n  larger clickable area for the control since clicking the label activates the\n  control.\n</p>',
+      '<p>\n  Effective form labels are required to make forms accessible. The purpose of\n  form elements such as checkboxes, radio buttons, input fields, etcetera, is\n  often apparent to sighted users, even if the form element is not\n  programmatically labeled. Screen readers users require useful form labels to\n  identify form fields. Adding a label to all form elements eliminates ambiguity\n  and contributes to a more accessible product.\n</p>',
     'landmark-one-main':
-      '<p>\n  Navigating a web page is far simpler for screen reader users if all of the\n  content splits between one or more high-level sections. Content outside of\n  these sections is difficult to find, and its purpose may be unclear.\n</p>\n\n<p>\n  HTML has historically lacked some key semantic markers, such as the ability to\n  designate sections of the page as the header, navigation, main content, and\n  footer. Using both HTML5 elements and ARIA landmarks in the same element is\n  considered a best practice, but the future will favor HTML regions as browser\n  support increases.\n</p>',
+      '<p>\n  Navigating a web page is far simpler for screen reader users if all of the\n  content splits between one or more high-level sections. Content outside of\n  these sections is difficult to find, and its purpose may be unclear.\n</p>',
   };
 </script>
diff --git a/static/ejs/partials/styles/styles.ejs b/static/ejs/partials/styles/styles.ejs
index fba357f5..05e41f2d 100644
--- a/static/ejs/partials/styles/styles.ejs
+++ b/static/ejs/partials/styles/styles.ejs
@@ -61,7 +61,7 @@
     font-size: 1.125rem;
     font-weight: 700;
     margin-top: 0;
-    margin-bottom: 1rem;
+    margin-bottom: 1.5rem;
     line-height: 2rem;
   }
   #accessibility-site-report p {
@@ -91,13 +91,13 @@
   a[target='_blank']:after {
     content: url("data:image/svg+xml,%3Csvg width='12' height='12' viewBox='0 0 12 12' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M6.477 2.625C6.477 2.52554 6.43749 2.43016 6.36716 2.35984C6.29684 2.28951 6.20146 2.25 6.102 2.25H1.125C0.826631 2.25 0.540483 2.36853 0.329505 2.5795C0.118526 2.79048 0 3.07663 0 3.375L0 10.875C0 11.1734 0.118526 11.4595 0.329505 11.6705C0.540483 11.8815 0.826631 12 1.125 12H8.625C8.92337 12 9.20952 11.8815 9.42049 11.6705C9.63147 11.4595 9.75 11.1734 9.75 10.875V5.898C9.75 5.79854 9.71049 5.70316 9.64016 5.63283C9.56984 5.56251 9.47446 5.523 9.375 5.523C9.27554 5.523 9.18016 5.56251 9.10983 5.63283C9.03951 5.70316 9 5.79854 9 5.898V10.875C9 10.9745 8.96049 11.0698 8.89016 11.1402C8.81984 11.2105 8.72446 11.25 8.625 11.25H1.125C1.02554 11.25 0.930161 11.2105 0.859835 11.1402C0.789509 11.0698 0.75 10.9745 0.75 10.875V3.375C0.75 3.27554 0.789509 3.18016 0.859835 3.10984C0.930161 3.03951 1.02554 3 1.125 3H6.102C6.20146 3 6.29684 2.96049 6.36716 2.89016C6.43749 2.81984 6.477 2.72446 6.477 2.625Z' fill='%230047FA'/%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M12 0.375C12 0.275544 11.9605 0.180161 11.8902 0.109835C11.8198 0.0395088 11.7245 0 11.625 0L7.875 0C7.77554 0 7.68016 0.0395088 7.60983 0.109835C7.53951 0.180161 7.5 0.275544 7.5 0.375C7.5 0.474456 7.53951 0.569839 7.60983 0.640165C7.68016 0.710491 7.77554 0.75 7.875 0.75H10.7197L4.6095 6.8595C4.57463 6.89437 4.54697 6.93576 4.5281 6.98131C4.50924 7.02687 4.49952 7.07569 4.49952 7.125C4.49952 7.17431 4.50924 7.22313 4.5281 7.26869C4.54697 7.31424 4.57463 7.35563 4.6095 7.3905C4.64436 7.42537 4.68576 7.45302 4.73131 7.47189C4.77686 7.49076 4.82569 7.50047 4.875 7.50047C4.92431 7.50047 4.97313 7.49076 5.01869 7.47189C5.06424 7.45302 5.10563 7.42537 5.1405 7.3905L11.25 1.28025V4.125C11.25 4.22446 11.2895 4.31984 11.3598 4.39016C11.4302 4.46049 11.5255 4.5 11.625 4.5C11.7245 4.5 11.8198 4.46049 11.8902 4.39016C11.9605 4.31984 12 4.22446 12 4.125V0.375Z' fill='%230047FA'/%3E%3C/svg%3E%0A");
     display: inline-block;
-    padding-left: 0.5rem;
+    padding-left: 0.25rem;
     text-decoration-line: none;
   }
-  /* hr {
-    border-color: #b5c5ca !important;
-    opacity: 1 !important;
-  } */
+  .unbulleted-list {
+    list-style: none;
+    padding-left: 0;
+  }
   #header .card {
     box-shadow: 0 3px 5px 0 #736ccb1a;
   }
@@ -367,6 +367,11 @@
   #wcagLinksList li {
     margin-bottom: 0.5rem;
   }
+  #top-five-card li:not(:last-of-type) {
+    border-bottom: 1px solid #b5c5ca;
+    padding-bottom: 0.5rem;
+    margin-bottom: 0.5rem;
+  }
   .category-selector {
     border: 1px solid #b5c5ca;
     background-color: white;
@@ -377,22 +382,20 @@
     display: flex;
     flex-direction: column;
   }
-  .category-selector:focus {
-    outline: none;
-  }
   .category-selector.selected {
     border: 2px solid #0047fa;
     padding: calc(1rem - 1px);
     cursor: default;
   }
-  .category-selector:not(.selected):focus,
   .category-selector:not(.selected):hover {
     cursor: pointer;
     background-color: #f2f6ff;
     border: 1px solid #0047fa;
   }
-  .category-selector h3 {
+  .category-selector .category-name {
+    font-weight: bold;
     font-size: 1.125rem;
+    line-height: 2rem;
   }
   .category-selector .category-name::before {
     height: 1.25rem;
@@ -415,21 +418,24 @@
   .category-selector.passed .category-name::before {
     background-image: var(--passed-icon);
   }
-  .category-selector span {
+  .category-selector .category-information {
     color: #4a6168;
     text-align: start;
   }
   #scan-about {
     width: 300px;
     padding: 1.5rem 1rem;
-    overflow-wrap: anywhere;
+    word-break: break-all;
+  }
+  #scan-about ul {
+    padding-left: 0;
   }
-  #scan-about > div {
+  #scan-about li {
     display: flex;
     align-items: center;
     margin-bottom: 1rem;
   }
-  #scan-about > div > svg {
+  #scan-about li > svg {
     flex-shrink: 0;
     margin-right: 1rem;
     height: 1.125rem;
@@ -441,6 +447,29 @@
     font-size: 0.875rem;
     line-height: 1rem;
   }
+  #empty-category-summary-section {
+    padding-top: 1.5rem;
+    width: 100%;
+    text-align: center;
+  }
+  #empty-category-summary-section p {
+    color: #4A6168;
+  }
+  #no-issues-message {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+  }
+  #no-issues-message::before {
+    content: '';
+    display: inline-block;
+    width: 1.75rem;
+    height: 1.75rem;
+    background-image: url("data:image/svg+xml,%3Csvg width='28' height='28' viewBox='0 0 28 28' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M14.8408 3.56156C13.5637 3.24229 12.3775 4.20812 12.292 5.4585C12.1958 6.8625 11.9847 8.15161 11.7202 8.9184C11.5532 9.39932 11.0803 10.2716 10.3309 11.1079C9.58682 11.9401 8.61832 12.6816 7.48416 12.9915C6.58646 13.2359 5.67139 14.0134 5.67139 15.1489V20.4937C5.67139 21.6225 6.58245 22.4494 7.60573 22.5576C9.03511 22.7099 9.69503 23.112 10.3683 23.5235L10.4324 23.5636C10.7958 23.784 11.2046 24.0284 11.7282 24.2101C12.2586 24.3918 12.8784 24.5 13.6866 24.5H18.3622C19.6139 24.5 20.4982 23.8628 20.9457 23.0786C21.162 22.7086 21.2789 22.2889 21.285 21.8603C21.285 21.6573 21.2543 21.4435 21.1822 21.2405C21.4507 20.8891 21.6898 20.4683 21.8341 20.0369C21.981 19.596 22.0639 19.0189 21.8394 18.5019C21.9316 18.3283 21.9997 18.1426 22.0518 17.9636C22.1547 17.6029 22.2028 17.2048 22.2028 16.8187C22.2028 16.434 22.1547 16.0373 22.0518 15.6752C22.0051 15.5088 21.9434 15.347 21.8675 15.1917C22.1014 14.8589 22.2519 14.4747 22.3063 14.0716C22.3607 13.6684 22.3174 13.2582 22.1801 12.8753C21.9049 12.0844 21.269 11.4058 20.577 11.176C19.4455 10.7993 18.1685 10.8073 17.216 10.8942C17.0182 10.9119 16.8209 10.9342 16.6242 10.961C17.0876 8.97636 17.0592 6.90861 16.5414 4.93751C16.4513 4.62169 16.2785 4.33568 16.0408 4.10904C15.8031 3.8824 15.5092 3.72337 15.1895 3.64839L14.8408 3.56156ZM18.3622 23.1655H13.6866C13.0053 23.1655 12.5338 23.0733 12.1637 22.9464C11.7883 22.8168 11.4878 22.6418 11.1271 22.4214L11.0736 22.3893C10.3322 21.9365 9.47327 21.4128 7.74733 21.2298C7.30248 21.1817 7.00726 20.8424 7.00726 20.4951V15.1489C7.00726 14.8096 7.30916 14.4235 7.8355 14.2806C9.29828 13.8798 10.4765 12.9501 11.3275 11.9989C12.1757 11.0505 12.7488 10.0285 12.9813 9.35657C13.3059 8.42146 13.525 6.99475 13.6252 5.54934C13.6586 5.06575 14.1061 4.75583 14.5162 4.85736L14.8662 4.94552C15.0799 4.99896 15.2108 5.13655 15.2509 5.28617C15.7965 7.36481 15.7292 9.55688 15.0572 11.5982C15.0192 11.7117 15.0124 11.8334 15.0375 11.9504C15.0626 12.0675 15.1187 12.1757 15.2 12.2636C15.2812 12.3516 15.3846 12.416 15.4993 12.4503C15.614 12.4846 15.7359 12.4874 15.8521 12.4585L15.8561 12.4571L15.8748 12.4531L15.9522 12.4344C16.4091 12.3374 16.8712 12.2674 17.3362 12.2247C18.2219 12.1445 19.2826 12.1525 20.1549 12.4438C20.3887 12.5212 20.756 12.8445 20.9163 13.3121C21.0593 13.7235 21.0326 14.2071 20.561 14.6773L20.0894 15.1489L20.561 15.6218C20.6184 15.6792 20.7013 15.8102 20.7667 16.0426C20.8308 16.2657 20.8669 16.5369 20.8669 16.8187C20.8669 17.1019 20.8308 17.3718 20.7667 17.5962C20.6999 17.8287 20.6184 17.9596 20.561 18.017L20.0894 18.4886L20.561 18.9615C20.6238 19.0243 20.7066 19.1979 20.5677 19.6134C20.4229 20.0163 20.1928 20.3831 19.8931 20.6888L19.4215 21.1603L19.8931 21.6332C19.9011 21.6399 19.9478 21.7 19.9478 21.8603C19.9419 22.0563 19.8863 22.2475 19.7862 22.416C19.5658 22.8008 19.1143 23.1641 18.3622 23.1641V23.1655Z' fill='%234A6168'/%3E%3C/svg%3E%0A");
+    background-repeat: no-repeat;
+    background-size: auto;
+    margin-right: 0.5rem;
+  }
   .rule-item {
     display: flex;
     align-items: center;
@@ -479,66 +508,21 @@
     width: 55%;
     overflow-y: auto;
   }
-  #expandedRuleName {
+  #expandedRule #expandedRuleName {
     font-size: 1.5rem;
     font-weight: bold;
     line-height: 2rem;
+    margin-bottom: 0;
   }
-
   #expandedRuleDescription {
-    position: relative;
-  }
-
-  #expandedRuleDescription.collapse::after {
-    content: '';
-    position: absolute;
-    z-index: 1;
-    bottom: 0;
-    left: 0;
-    pointer-events: none;
-    background-image: linear-gradient(
-      to bottom,
-      rgba(255, 255, 255, 0),
-      rgba(255, 255, 255, 1) 80%
-    );
-    width: 100%;
-    height: 1rem;
-  }
-
-  #expandedRuleDescription.collapse.show::after {
-    content: none;
-  }
-
-  #expandedRuleDescription.collapse:not(.show) {
     margin-top: 2rem;
-    overflow: hidden;
-    display: block;
-    max-height: 3rem;
   }
-
-  #expandedRuleCollapseButton {
-    margin-top: 0.5rem;
-    margin-bottom: 1.5rem;
-    border: 0;
-    background: none;
-    color: #0047fa;
-    padding: 0;
-  }
-
-  #expandedRuleCollapseButton.collapsed::after {
-    content: 'Read More';
-  }
-
-  #expandedRuleCollapseButton:not(.collapsed)::after {
-    content: 'Show Less';
-  }
-
   #expandedRuleHelpUrl {
     display: block;
     margin-bottom: 1rem;
     width: fit-content;
   }
-  #expandedRule h4 {
+  #expandedRule #conformance-header {
     font-size: 1rem;
     font-weight: bold;
     line-height: 1.75rem;
@@ -547,6 +531,11 @@
     position: static;
     margin-bottom: 2rem;
   }
+  #expandedRule #issue-page-count {
+    font-size: 1.125rem;
+    line-height: 2rem;
+    font-weight: bold;
+  }
   #expandedRule .offcanvas-body {
     background-color: #f6f8f9;
     border-top: 1px solid #b5c5ca;
@@ -598,6 +587,10 @@
     border-top-right-radius: 0.25rem;
     border-bottom-right-radius: 0.25rem;
   }
+  #expandedRuleCategorySelectors .category-name {
+    font-size: 1rem;
+    line-height: 1.75rem;
+  }
   #expandedRuleCategorySelectors .category-name::before {
     height: 1.125rem;
     width: 1.125rem;
@@ -695,6 +688,10 @@
     width: 80%;
     flex-shrink: 0;
   }
+  .page-item-card-section-content ul {
+    list-style: inside;
+    list-style-position: outside;
+  }
   #expandedRuleCategoryContent .accordion-body pre {
     background-color: #f6f8f9;
     border: 1px solid #b5c5ca;