accessibility stuff added

Vikkkkk · Oct 26, 2018 · 4f83715 · 4f83715
1 parent 8b30d54
commit 4f83715
Show file tree

Hide file tree

Showing 2 changed files with 23 additions and 5 deletions.
diff --git a/index.html b/index.html
@@ -19,11 +19,12 @@
 </head>
 
 <body>
+    <a class="screen-reader-text" href="#about">Skip to content</a>
     <header id='myHeader'>
 
 
         <div class='container' id='myHeader'>
-            <div class='logo'>
+            <div class='logo' tabindex="-1">
                 <img src="./images/aloha-logo.svg" alt='aloha-logo'>
             </div>
             <!-- It's better to use relative path rather than absolute path, because if you need to move your 
@@ -72,7 +73,7 @@ <h1><span>Hand-Crafted </span> Styles</h1>
         </ul>
     </section>
 
-    <section class='featured' id='featured'>
+    <section class='featured' id='featured' tabindex="-1">
         <h2>Most-Loved <span>Products</span></h2>
         <ul class='main-carousel'>
             <li class='carousel-cell'> <img src='./images/checked-stretch-dress.jpg'>
@@ -155,14 +156,14 @@ <h2>Sign-up for <span>Updates</span></h2>
 
 
 
-    <script src="https://code.jquery.com/jquery-3.3.1.min.js" integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8="
+    <script async src="https://code.jquery.com/jquery-3.3.1.min.js" integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8="
         crossorigin="anonymous"></script>
 
 
     <!-- JavaScript flikity -->
-    <script src="https://unpkg.com/flickity@2/dist/flickity.pkgd.min.js"></script>
+    <script defer src="https://unpkg.com/flickity@2/dist/flickity.pkgd.min.js"></script>
 
-    <script src='js/script.js'></script>
+    <script defer src='js/script.js'></script>
 </body>
 
 </html>
diff --git a/styles.css b/styles.css
@@ -93,6 +93,23 @@ a:visited {
 img {
   max-width: 100%;
 }
+.screen-reader-text {
+  clip: rect(1px, 1px, 1px, 1px);
+  position: absolute !important;
+  height: 1px;
+  width: 1px;
+  overflow: hidden;
+}
+
+.screen-reader-text:focus {
+  clip: auto !important;
+  display: block;
+  height: auto;
+  left: 5px;
+  top: 5px;
+  width: auto;
+  z-index: 100000; /* above all content */
+}
 
 /* Mobile Version */
 @media screen and (min-width: 0px) {