Browse Source

aria lighthouse :hammer:

windhamdavid 4 years ago
parent
commit
e89a758489
2 changed files with 35 additions and 11 deletions
  1. 24 0
      css/style.css
  2. 11 11
      index.html

+ 24 - 0
css/style.css

@@ -775,6 +775,7 @@ ul.pricing {
 }
 .vendor-image {
   filter: grayscale(1);
+  width:100%;
 }
 .vendor-image:hover {
   filter: grayscale(0);
@@ -1175,6 +1176,7 @@ blockquote {
   font-weight: 400;
   src: url("./_font/Inter-Regular.woff2") format("woff2"),
   url("./_font/Inter-Regular.woff") format("woff");
+  font-display: swap;
 }
 @font-face {
   font-family: 'Inter';
@@ -1182,6 +1184,7 @@ blockquote {
   font-weight: 400;
   src: url("./_font/Inter-Italic.woff2") format("woff2"),
   url("./_font/Inter-Italic.woff") format("woff");
+  font-display: swap;
 }
 @font-face {
   font-family: 'Inter';
@@ -1189,6 +1192,7 @@ blockquote {
   font-weight: 500;
   src: url("./_font/Inter-Medium.woff2") format("woff2"),
   url("./_font/Inter-Medium.woff") format("woff");
+  font-display: swap;
 }
 @font-face {
   font-family: 'Inter';
@@ -1196,6 +1200,7 @@ blockquote {
   font-weight: 500;
   src: url("./_font/Inter-MediumItalic.woff2") format("woff2"),
   url("./_font/Inter-MediumItalic.woff") format("woff");
+  font-display: swap;
 }
 @font-face {
   font-family: 'Inter';
@@ -1203,6 +1208,7 @@ blockquote {
   font-weight: 600;
   src: url("./_font/Inter-SemiBold.woff2") format("woff2"),
   url("./_font/Inter-SemiBold.woff") format("woff");
+  font-display: swap;
 }
 @font-face {
   font-family: 'Inter';
@@ -1210,6 +1216,7 @@ blockquote {
   font-weight: 600;
   src: url("./_font/Inter-SemiBoldItalic.woff2") format("woff2"),
   url("./_font/Inter-SemiBoldItalic.woff") format("woff");
+  font-display: swap;
 }
 @font-face {
   font-family: 'Inter';
@@ -1217,6 +1224,7 @@ blockquote {
   font-weight: 700;
   src: url("./_font/Inter-Bold.woff2") format("woff2"),
   url("./_font/Inter-Bold.woff") format("woff");
+  font-display: swap;
 }
 @font-face {
   font-family: 'Inter';
@@ -1224,6 +1232,7 @@ blockquote {
   font-weight: 700;
   src: url("./_font/Inter-BoldItalic.woff2") format("woff2"),
   url("./_font/Inter-BoldItalic.woff") format("woff");
+  font-display: swap;
 }
 @font-face {
   font-family: 'Inter';
@@ -1231,6 +1240,7 @@ blockquote {
   font-weight: 800;
   src: url("./_font/Inter-ExtraBold.woff2") format("woff2"),
   url("./_font/Inter-ExtraBold.woff") format("woff");
+  font-display: swap;
 }
 @font-face {
   font-family: 'Inter';
@@ -1238,6 +1248,7 @@ blockquote {
   font-weight: 800;
   src: url("./_font/Inter-ExtraBoldItalic.woff2") format("woff2"),
   url("./_font/Inter-ExtraBoldItalic.woff") format("woff");
+  font-display: swap;
 }
 @font-face {
   font-family: 'Inter';
@@ -1245,6 +1256,7 @@ blockquote {
   font-weight: 900;
   src: url("./_font/Inter-Black.woff2") format("woff2"),
   url("./_font/Inter-Black.woff") format("woff");
+  font-display: swap;
 }
 @font-face {
   font-family: 'Inter';
@@ -1252,6 +1264,7 @@ blockquote {
   font-weight: 900;
   src: url("./_font/Inter-BlackItalic.woff2") format("woff2"),
   url("./_font/Inter-BlackItalic.woff") format("woff");
+  font-display: swap;
 }
 
 @font-face {
@@ -1265,6 +1278,7 @@ blockquote {
     url('_font/montserrat-v14-latin-italic.woff') format('woff'), /* Modern Browsers */
     url('_font/montserrat-v14-latin-italic.ttf') format('truetype'), /* Safari, Android, iOS */
     url('_font/montserrat-v14-latin-italic.svg#Montserrat') format('svg'); /* Legacy iOS */
+  font-display: swap;
 }
 
 @font-face {
@@ -1278,6 +1292,7 @@ blockquote {
     url('_font/montserrat-v14-latin-regular.woff') format('woff'), /* Modern Browsers */
     url('_font/montserrat-v14-latin-regular.ttf') format('truetype'), /* Safari, Android, iOS */
     url('_font/montserrat-v14-latin-regular.svg#Montserrat') format('svg'); /* Legacy iOS */
+  font-display: swap;
 }
 
 @font-face {
@@ -1291,6 +1306,7 @@ blockquote {
     url('_font/montserrat-v14-latin-500.woff') format('woff'), /* Modern Browsers */
     url('_font/montserrat-v14-latin-500.ttf') format('truetype'), /* Safari, Android, iOS */
     url('_font/montserrat-v14-latin-500.svg#Montserrat') format('svg'); /* Legacy iOS */
+  font-display: swap;
 }
 
 @font-face {
@@ -1304,6 +1320,7 @@ blockquote {
     url('_font/montserrat-v14-latin-500italic.woff') format('woff'), /* Modern Browsers */
     url('_font/montserrat-v14-latin-500italic.ttf') format('truetype'), /* Safari, Android, iOS */
     url('_font/montserrat-v14-latin-500italic.svg#Montserrat') format('svg'); /* Legacy iOS */
+  font-display: swap;
 }
 
 @font-face {
@@ -1317,6 +1334,7 @@ blockquote {
     url('_font/montserrat-v14-latin-900.woff') format('woff'), /* Modern Browsers */
     url('_font/montserrat-v14-latin-900.ttf') format('truetype'), /* Safari, Android, iOS */
     url('_font/montserrat-v14-latin-900.svg#Montserrat') format('svg'); /* Legacy iOS */
+  font-display: swap;
 }
 
 @font-face {
@@ -1330,6 +1348,7 @@ blockquote {
     url('_font/playfair-display-v20-latin-regular.woff') format('woff'), /* Modern Browsers */
     url('_font/playfair-display-v20-latin-regular.ttf') format('truetype'), /* Safari, Android, iOS */
     url('_font/playfair-display-v20-latin-regular.svg#PlayfairDisplay') format('svg'); /* Legacy iOS */
+  font-display: swap;
 }
 
 @font-face {
@@ -1343,6 +1362,7 @@ blockquote {
     url('_font/playfair-display-v20-latin-700.woff') format('woff'), /* Modern Browsers */
     url('_font/playfair-display-v20-latin-700.ttf') format('truetype'), /* Safari, Android, iOS */
     url('_font/playfair-display-v20-latin-700.svg#PlayfairDisplay') format('svg'); /* Legacy iOS */
+  font-display: swap;
 }
 
 @font-face {
@@ -1356,6 +1376,7 @@ blockquote {
     url('_font/playfair-display-v20-latin-900.woff') format('woff'), /* Modern Browsers */
     url('_font/playfair-display-v20-latin-900.ttf') format('truetype'), /* Safari, Android, iOS */
     url('_font/playfair-display-v20-latin-900.svg#PlayfairDisplay') format('svg'); /* Legacy iOS */
+  font-display: swap;
 }
 
 @font-face {
@@ -1369,6 +1390,7 @@ blockquote {
     url('_font/playfair-display-v20-latin-italic.woff') format('woff'), /* Modern Browsers */
     url('_font/playfair-display-v20-latin-italic.ttf') format('truetype'), /* Safari, Android, iOS */
     url('_font/playfair-display-v20-latin-italic.svg#PlayfairDisplay') format('svg'); /* Legacy iOS */
+  font-display: swap;
 }
 
 @font-face {
@@ -1382,6 +1404,7 @@ blockquote {
     url('_font/playfair-display-v20-latin-700italic.woff') format('woff'), /* Modern Browsers */
     url('_font/playfair-display-v20-latin-700italic.ttf') format('truetype'), /* Safari, Android, iOS */
     url('_font/playfair-display-v20-latin-700italic.svg#PlayfairDisplay') format('svg'); /* Legacy iOS */
+  font-display: swap;
 }
 
 @font-face {
@@ -1394,6 +1417,7 @@ blockquote {
        url('_font/fontello.svg?25243633#fontello') format('svg');
   font-weight: normal;
   font-style: normal;
+  font-display: swap;
 }
 /* Chrome hack: SVG is rendered more smooth in Windozze. 100% magic, uncomment if you need it. */
 /* Note, that will break hinting! In other OS-es font will be not as sharp as it could be */

+ 11 - 11
index.html

@@ -33,7 +33,7 @@
     <img class="light" src="./img/dw-sm-white.svg" srcset="./img/dw-sm-white.svg 2x" alt="David Windham logo"/>
     <img class="dark" src="./img/dw-sm.svg" srcset="./img/dw-sm.svg 2x" alt="David Windham logo"/>
   </a>
-  <button class="hamburger" type="button">
+  <button class="hamburger" type="button" aria-label="Open Close Menu">
     <span class="hamburger-box">
       <span class="hamburger-inner"></span>
     </span>
@@ -449,26 +449,26 @@
                             <div class="btn-group btn-group-toggle" data-toggle="buttons">
                               <label class="btn btn-light">
                                 <input type="radio" name="options" id="option1" autocomplete="off">
-                                <a target="_blank" href="https://cloud.google.com">
-                                  <img class="vendor-image" src="img/vendor-google.png" width="100%">
+                                <a href="https://cloud.google.com" target="_blank" rel="noopener">
+                                  <img class="vendor-image" src="img/vendor-google.png">
                                 </a>
                               </label>
                               <label class="btn btn-light">
                                 <input type="radio" name="options" id="option2" autocomplete="off">
-                                <a target="_blank" href="https://linode.com">
-                                <img class="vendor-image" src="img/vendor-linode.png" width="100%">
+                                <a href="https://linode.com" target="_blank" rel="noopener">
+                                <img class="vendor-image" src="img/vendor-linode.png">
                                 </a>
                               </label>
                               <label class="btn btn-light">
-                                <input type="radio" name="options" id="option2" autocomplete="off">
-                                <a target="_blank" href="https://aws.amazon.com">
-                                <img class="vendor-image" src="img/vendor-amazon.png" width="100%">
+                                <input type="radio" name="options" id="option3" autocomplete="off">
+                                <a href="https://aws.amazon.com" target="_blank" rel="noopener">
+                                <img class="vendor-image" src="img/vendor-amazon.png">
                                 </a>
                               </label>
                               <label class="btn btn-light">
-                                <input type="radio" name="options" id="option3" autocomplete="off">
-                                <a target="_blank" href="https://azure.microsoft.com/">
-                                <img class="vendor-image" src="img/vendor-microsoft.png" width="100%">
+                                <input type="radio" name="options" id="option4" autocomplete="off">
+                                <a href="https://azure.microsoft.com/" target="_blank" rel="noopener">
+                                <img class="vendor-image" src="img/vendor-microsoft.png">
                                 </a>
                               </label>
                             </div>