✨Enhance accessibility (#91)

* Add lang=“en” attribute to HTML element Adding this will improve the interpretation of your template by users in different locales. * Add doctype to top of index.html * Add alt attribute to product line items in summary * A web page should one have one banner landmark The role="banner" ARIA landmark should only appear once on an element that is unique to the HTML document even though the HMTL5 specification allows multiple instances of an equivalent header landmark value. It is appropriate in most web designs to have only one banner landmark whether it is specified using ARIA or HTML5. https://dequeuniversity.com/rules/axe/3.3/landmark-no-duplicate-banner * Page must have one main landmark * Mark up sidebar as an aside https://developer.mozilla.org/en-US/docs/Web/HTML/Element/aside
stripe-archive · Aug 19, 2019 · d860219 · d860219
1 parent 540a33e
commit d860219
Show file tree

Hide file tree

Showing 3 changed files with 19 additions and 17 deletions.
diff --git a/public/index.html b/public/index.html
@@ -1,4 +1,6 @@
 <html>
+<!DOCTYPE html>
+<html lang="en">
 
 <head>
   <title>Stripe Payments Demo</title>
@@ -14,8 +16,8 @@
 </head>
 
 <body>
-  <div id="main" class="loading">
-    <header>
+  <main id="main" class="loading">
+    <header class="header">
       <a class="shop" href="/">Stripe Payments Demo</a>
       <a class="github" href="https://github.com/stripe/stripe-payments-demo">View on GitHub</a>
     </header>
@@ -203,11 +205,11 @@ <h1>Oops, payment failed.</h1>
         <p class="error-message"></p>
       </div>
     </div>
-  </div>
-  <div id="summary">
-    <header>
+  </main>
+  <aside id="summary">
+    <div class="header">
       <h1>Order Summary</h1>
-    </header>
+    </div>
     <div id="order-items"></div>
     <div id="order-total">
       <div class="line-item subtotal">
@@ -243,7 +245,7 @@ <h1>Order Summary</h1>
         <p class="price" data-total></p>
       </div>
     </div>
-  </div>
+  </aside>
   <!-- Stripe.js v3 for Elements -->
   <script src="https://js.stripe.com/v3/"></script>
   <!-- Library to render QR codes -->

diff --git a/public/javascripts/store.js b/public/javascripts/store.js
@@ -174,7 +174,7 @@ class Store {
       let lineItem = document.createElement('div');
       lineItem.classList.add('line-item');
       lineItem.innerHTML = `
-        <img class="image" src="/images/products/${product.id}.png">
+        <img class="image" src="/images/products/${product.id}.png" alt="${product.name}">
         <div class="label">
           <p class="product">${product.name}</p>
           <p class="sku">${Object.values(sku.attributes).join(' ')}</p>

diff --git a/public/stylesheets/store.css b/public/stylesheets/store.css
@@ -39,7 +39,7 @@ body {
 
 /* Header */
 
-header {
+.header {
   display: flex;
   flex-direction: row;
   justify-content: space-between;
@@ -49,8 +49,8 @@ header {
   border-bottom: 1px solid #f3f3ff;
 }
 
-header a.shop,
-header a.github {
+.header a.shop,
+.header a.github {
   margin: 30px;
   font-size: 13px;
   font-weight: 500;
@@ -60,12 +60,12 @@ header a.github {
   text-decoration: none;
 }
 
-header a.github {
+.header a.github {
   padding-left: 20px;
   background: url(/images/github.svg) left center no-repeat;
 }
 
-header a:hover {
+.header a:hover {
   text-decoration: underline;
 }
 
@@ -558,7 +558,7 @@ button:active {
   right: 0;
 }
 
-#summary header {
+#summary .header {
   background: #fff;
 }
 
@@ -825,12 +825,12 @@ button:active {
 }
 
 @media only screen and (max-width: 500px) {
-  header {
+  .header {
     height: 60px;
     background-size: 40px 40px;
   }
-  header a.shop,
-  header a.github {
+  .header a.shop,
+  .header a.github {
     display: none;
   }
   #payment-request {