Add ARIA landmarks via semantic HTML

By using tags like `<main>`, `<main>`, and `<footer>`, the accessibility tree correctly labels major landmarks (like 'banner' and 'main') instead of how it is currently labelled ('generic' with no distinction between landmarks).
internetarchive · Jun 5, 2024 · 3c372c1 · 3c372c1
1 parent ad65aeb
commit 3c372c1
Show file tree

Hide file tree

Showing 6 changed files with 24 additions and 24 deletions.
diff --git a/webextension/about.html b/webextension/about.html
@@ -11,11 +11,11 @@
 </head>
 <body>
   <div class="container">
-    <div class="about-header">
+    <header>
       <img src="images/app-icon/app-icon128.png" alt="Internet Archive icon" class="ia-logo">
       <h1>The Official Wayback Machine Extension</h1>
-    </div>
-    <div class="row about-body">
+    </header>
+    <main class="row">
       <div class="col-sm-7">
         <p>
           In cooperation with <a href="https://summerofcode.withgoogle.com" target="_blank">Google Summer of Code</a>, The <a href="https://archive.org" target="_blank">Internet Archive</a> presents <em>The Official Wayback Machine Extension</em>. With the power of the Wayback Machine, we let you go back in time to see how a URL has changed and evolved through the history of the Web!
@@ -147,14 +147,14 @@ <h3>License</h3>
         <p>Copyright &copy; 2017-<span id="year"></span> Internet Archive. All rights reserved. Licensed under the terms of the <a href="https://www.gnu.org/licenses/agpl-3.0.html" target="_blank">GNU Affero General Public License version 3</a>.</p>
 
       </div>
-    </div>
+    </main>
 
-    <p class="about-footer">
+    <footer>
       Chrome, the Chrome logo, and the <i>Get It On Google Play</i> logo are trademarks of Google LLC.<br>
       Edge and the Edge logo are trademarks of the Microsoft group of companies.<br>
       Firefox and the Firefox logo are trademarks of the Mozilla Foundation in the U.S. and other countries.<br>
       Safari, the Safari logo, Apple, and the Apple logo are registered trademarks of Apple, Inc.<br>
-    </p>
+    </footer>
 
   </div>
 

diff --git a/webextension/css/about.css b/webextension/css/about.css
@@ -6,28 +6,28 @@ h1.underlined {
     padding-bottom: 0.5em;
 }
 
-.about-header {
+header {
     /* float: left; */
     margin-bottom: 3em;
     text-align: center;
 }
-.about-header * {
+header * {
     /* float: left; */
 }
-.about-header img {
+header img {
     margin: 1em 1em 0 0;
 }
 
-.about-body {
+main {
     float: left;
     font-size: 14pt;
     margin-bottom: 2em;
 }
-.about-body div {
+main div {
     padding-right: 3em;
 }
 
-.about-footer {
+footer {
     font-size: 11pt;
     line-height: 1.1;
     margin: 2em 0;

diff --git a/webextension/css/exclude-list.css b/webextension/css/exclude-list.css
@@ -14,11 +14,11 @@ p {
     height: 100vh;
 }
 
-.header-container {
+header {
     text-align: center;
 }
 
-.outer-container {
+main {
     display: contents;
 }
 

diff --git a/webextension/css/welcome.css b/webextension/css/welcome.css
@@ -26,11 +26,11 @@ p {
     padding: 0;
 }
 
-.header-container {
+header {
     text-align: center;
 }
 
-.content-container {
+main {
     margin: 2em 15vw 10vh 15vw;
     padding-bottom: 5em;
 }

diff --git a/webextension/exclude-list.html b/webextension/exclude-list.html
@@ -12,12 +12,12 @@
 <body>
   <div class="body-container">
 
-    <div class="header-container">
+    <header>
       <h4 id="main-title">Exclude URLs</h4>
       <p id="main-info">Enter URL patterns below to exclude from Auto Save.</p>
-    </div>
+    </header>
 
-    <div class="outer-container">
+    <main>
 
       <div class="btn-flex-block">
         <button class="btn btn-auto btn-dark-gray" id="clear-btn">Clear All</button>
@@ -34,7 +34,7 @@ <h4 id="main-title">Exclude URLs</h4>
         <button class="btn btn-auto btn-red" id="save-btn">Save</button>
       </div>
 
-    </div>
+    </main>
 
   </div>
 

diff --git a/webextension/welcome.html b/webextension/welcome.html
@@ -11,15 +11,15 @@
   </head>
   <body>
     <div class="body-container">
-      <div class="header-container">
+      <header>
         <div class="welcome-logo"></div>
         <h1>
           Welcome to the Internet Archive's<br>
           Wayback Machine Browser Extension
         </h1>
-      </div>
+      </header>
 
-      <div class="content-container">
+      <main>
         <h3>
           The Internet Archive Wayback Machine Browser Extension Privacy Policy
         </h3>
@@ -65,7 +65,7 @@ <h4>
         <p>
           We retain collected URLs for as long as they provide value to our mission.
         </p>
-      </div>
+      </main>
 
       <div class="bottom-container">
         <button type="submit" name="accept-terms" id="accept-btn" class="btn btn-auto btn-blue">