Improve site accessibility score

Fixes: #1016 Updates to site colours to align with VMware branding and improve contrast rations for site accessibility. Update to youtube plugin for that it can will insert an iframes title as well. New usage of liquid template `{% youtube "<title>" %} Updates to links to provide link text Updates to images to add alt text. Accessibility changes assist people visiting the site with visual impairments and improve the function of text to speech tools such as Jaws. Change includes moving custom-site/css/sonobouy.css to /site/_scss/settings/ for configuration consistency. Signed-off-by: Brett Johnson <[email protected]>
vmware-tanzu · Dec 2, 2019 · a7ae205 · a7ae205
1 parent 05dc053
commit a7ae205
Show file tree

Hide file tree

Showing 25 changed files with 58 additions and 41 deletions.
diff --git a/README.md b/README.md
@@ -1,4 +1,4 @@
-# <img src="site/docs/master/img/sonobuoy-logo.png" width="400px" > [![CircleCI](https://circleci.com/gh/vmware-tanzu/sonobuoy.svg?style=svg)](https://circleci.com/gh/vmware-tanzu/sonobuoy)
+# <img src="site/docs/master/img/sonobuoy-logo.png" width="400px" alt="Sonobuoy logo" > [![CircleCI](https://circleci.com/gh/vmware-tanzu/sonobuoy.svg?style=svg)](https://circleci.com/gh/vmware-tanzu/sonobuoy)
 
 ## [Overview][oview]
 

diff --git a/site/_includes/footer.html b/site/_includes/footer.html
@@ -28,13 +28,13 @@ <h5>{{ site.footer.title }}</h5>
                 </ul>
             </div>
             <div class="col-12 col-md-7 text-center text-md-right">
-              <a href="/" alt="Homepage"><img src="/img/{{ site.logo }}" class="logo" /></a>
+              <a href="/" aria-label="Sonobuoy homepage" ><img src="/img/{{ site.logo }}" class="logo" alt="Homepage" /></a>
             </div>
         </div>
         <div class="row align-items-center">
           <div class="col copyright text-center text-md-right mt-4">
             &copy; {{ site.time | date: '%Y' }} {{ site.author }}.
-            <a href="{{ site.footer.vm-link }}" class="vm-logo">A VMware-backed project. <img src="/img/{{ site.vm_logo }}" /></a>
+            <a href="{{ site.footer.vm-link }}" class="vm-logo">A VMware-backed project. <img src="/img/{{ site.vm_logo }}" alt="VMware logo" /></a>
           </div>
         </div>
     </div>

diff --git a/site/_includes/head-docs.html b/site/_includes/head-docs.html
@@ -5,6 +5,5 @@
   <link rel="shortcut icon" href="/favicon.ico" type="image/x-icon">
   <link rel="icon" href="/favicon.ico" type="image/x-icon">
   <link rel="stylesheet" href="/css/styles.css?{{site.time | date: '%s%N'}}">
-  <link rel="stylesheet" type="text/css" href="/css/custom-sonobuoy.css">
   {% seo title=false %}
 </head>
diff --git a/site/_includes/site-header.html b/site/_includes/site-header.html
@@ -1,7 +1,7 @@
 <header class="site-header">
     <div class="site-header-content">
         <div class="logo">
-            <a href="/" alt="Homepage"><img src="/img/{{ site.logo }}" class="logo" /></a>
+            <a href="/" aria-label="Sonobuoy homepage" ><img src="/img/{{ site.logo }}" class="logo" alt="Homepage" /></a>
         </div>
         <ul class="nav-menu" id="header-nav">
             <li class="home"><a href="/" title="{{ site.title }}">Home</a></li>

diff --git a/site/_scss/_styles.scss b/site/_scss/_styles.scss
@@ -7,6 +7,7 @@
 @import "./site/common/fonts";
 @import "./site/common/core";
 @import "./site/common/type";
+@import "./site/settings/custom-sonobuoy";
 
 // Layouts
 @import "./site/layouts/container";

diff --git a/site/_scss/site/objects/_card.scss b/site/_scss/site/objects/_card.scss
@@ -21,7 +21,7 @@
       color: $card-light-link;
       font-weight: $font-weight-medium
     }
-    color: #777777;
+    color: #575757;
     background-color: $card-light-background;
     p {
       font-size: .875rem;

diff --git a/site/_scss/site/objects/_post.scss b/site/_scss/site/objects/_post.scss
@@ -17,14 +17,17 @@
 
 .post-single-hero {
   background-color: map-get($field-backgrounds, 'med-blue'); // default
-  padding-bottom: 105px;  
+  padding-bottom: 105px;
   h1,
   h2,
   h3 {
     color: $white;
     font-weight: $font-weight-light;
     text-align: center;
   }
+  &.post-single-hero-short {
+    padding-bottom: 0;
+  }
 }
 
 .post-single-body {
@@ -128,4 +131,16 @@
   img {
     max-width: 100%;
   }
-}
+}
+
+table {
+  border-collapse: collapse;
+}
+
+table, th, td {
+  border: 1px solid black;
+}
+
+th, td {
+  padding: 10px;
+}
diff --git a/site/css/custom-sonobuoy.css → ..._scss/site/settings/_custom-sonobuoy.scss b/site/css/custom-sonobuoy.css → ..._scss/site/settings/_custom-sonobuoy.scss
@@ -1,5 +1,5 @@
 blockquote {
-    color: grey;
+    color: $dark-grey;
     padding: .25em;
     border-left: .25em solid lightgrey;
     page-break-inside: avoid;

diff --git a/site/_scss/site/settings/_variables.scss b/site/_scss/site/settings/_variables.scss
@@ -5,9 +5,11 @@ $path-images: "img";
 // Colors
 
 $black: #000;
-$white: #fff;
+$white: #FFFFFF;
 $light: $white;
-
+$pink:    #A41458;
+$darkest-blue: #1D428A;
+$dark-grey: #717074;
 // Bootstrap overrides
 
 $body-bg: #bbb;
@@ -21,7 +23,7 @@ $card-border-color: $border-color;
 $font-family-base: "Metropolis", Helvetica, Arial, sans-serif;
 $font-size-base: 1.125rem; // 18px
 
-$link-color: #0096D9;
+$link-color: #004C70;
 $link-decoration: none;
 $link-hover-color: $link-color;
 $link-hover-decoration: underline;
@@ -45,13 +47,13 @@ $container-max-width: 1440px;
 // Header
 
 $header-background: $white;
-$header-foreground: #777;
-$header-foreground-selected: #777777;
+$header-foreground: $black;
+$header-foreground-selected: $black;
 
 // Footer
-$footer-foreground: #E8E8E8;
-$footer-link-color: #777777;
-$footer-copyright: #777777;
+$footer-foreground: #808080;
+$footer-link-color: #474747;
+$footer-copyright: $black;
 
 // Sections
 
@@ -100,16 +102,16 @@ $field-backgrounds: (
 // Buttons
 
 $button-primary-background: $white;
-$button-primary-background-hover: #0091DA;
-$button-primary-foreground: #0091DA;
-$button-primary-border: $button-primary-background;
-$button-primary-border-hover: $button-primary-background;
+$button-primary-background-hover: $darkest-blue;
+$button-primary-foreground: $darkest-blue;
+$button-primary-border: $white;
+$button-primary-border-hover: $white;
 
-$button-secondary-background: #0091DA;
+$button-secondary-background: $darkest-blue;
 $button-secondary-background-hover: $white;
 $button-secondary-foreground: $white;
 $button-secondary-border: $white;
-$button-secondary-border-hover: #0091DA;
+$button-secondary-border-hover: $darkest-blue;
 
 // Posts
 $post-hero-gradient-start: #fafafa;

diff --git a/site/docs/master/README.md b/site/docs/master/README.md
@@ -1,4 +1,4 @@
-# <img src="img/sonobuoy-logo.png" width="400px" > [![CircleCI](https://circleci.com/gh/vmware-tanzu/sonobuoy.svg?style=svg)](https://circleci.com/gh/vmware-tanzu/sonobuoy)
+# <img src="img/sonobuoy-logo.png" width="400px" alt="Sonobuoy logo" > [![CircleCI](https://circleci.com/gh/vmware-tanzu/sonobuoy.svg?style=svg)](https://circleci.com/gh/vmware-tanzu/sonobuoy)
 
 ## [Overview][oview]
 

diff --git a/site/docs/v0.14.0/README.md b/site/docs/v0.14.0/README.md
@@ -1,4 +1,4 @@
-# <img src="img/sonobuoy-logo.png" width="400px" > [![CircleCI](https://circleci.com/gh/vmware-tanzu/sonobuoy.svg?style=svg)](https://circleci.com/gh/vmware-tanzu/sonobuoy)
+# <img src="img/sonobuoy-logo.png" alt="Sonobuoy logo" width="400px" > [![CircleCI](https://circleci.com/gh/vmware-tanzu/sonobuoy.svg?style=svg)](https://circleci.com/gh/vmware-tanzu/sonobuoy)
 
 ## [Overview][oview]
 

diff --git a/site/docs/v0.14.1/README.md b/site/docs/v0.14.1/README.md
@@ -1,4 +1,4 @@
-# <img src="img/sonobuoy-logo.png" width="400px" > [![CircleCI](https://circleci.com/gh/vmware-tanzu/sonobuoy.svg?style=svg)](https://circleci.com/gh/vmware-tanzu/sonobuoy)
+# <img src="img/sonobuoy-logo.png" alt="Sonobuoy logo" width="400px" > [![CircleCI](https://circleci.com/gh/vmware-tanzu/sonobuoy.svg?style=svg)](https://circleci.com/gh/vmware-tanzu/sonobuoy)
 
 ## [Overview][oview]
 

diff --git a/site/docs/v0.14.2/README.md b/site/docs/v0.14.2/README.md
@@ -1,4 +1,4 @@
-# <img src="img/sonobuoy-logo.png" width="400px" > [![CircleCI](https://circleci.com/gh/vmware-tanzu/sonobuoy.svg?style=svg)](https://circleci.com/gh/vmware-tanzu/sonobuoy)
+# <img src="img/sonobuoy-logo.png" alt="Sonobuoy logo" width="400px" > [![CircleCI](https://circleci.com/gh/vmware-tanzu/sonobuoy.svg?style=svg)](https://circleci.com/gh/vmware-tanzu/sonobuoy)
 
 ## [Overview][oview]
 

diff --git a/site/docs/v0.14.3/README.md b/site/docs/v0.14.3/README.md
@@ -1,4 +1,4 @@
-# <img src="img/sonobuoy-logo.png" width="400px" > [![CircleCI](https://circleci.com/gh/vmware-tanzu/sonobuoy.svg?style=svg)](https://circleci.com/gh/vmware-tanzu/sonobuoy)
+# <img src="img/sonobuoy-logo.png" alt="Sonobuoy logo" width="400px" > [![CircleCI](https://circleci.com/gh/vmware-tanzu/sonobuoy.svg?style=svg)](https://circleci.com/gh/vmware-tanzu/sonobuoy)
 
 ## [Overview][oview]
 

diff --git a/site/docs/v0.15.0/README.md b/site/docs/v0.15.0/README.md
@@ -1,4 +1,4 @@
-# <img src="img/sonobuoy-logo.png" width="400px" > [![CircleCI](https://circleci.com/gh/vmware-tanzu/sonobuoy.svg?style=svg)](https://circleci.com/gh/vmware-tanzu/sonobuoy)
+# <img src="img/sonobuoy-logo.png" alt="Sonobuoy logo" width="400px" > [![CircleCI](https://circleci.com/gh/vmware-tanzu/sonobuoy.svg?style=svg)](https://circleci.com/gh/vmware-tanzu/sonobuoy)
 
 ## [Overview][oview]
 

diff --git a/site/docs/v0.15.1/README.md b/site/docs/v0.15.1/README.md
@@ -1,4 +1,4 @@
-# <img src="img/sonobuoy-logo.png" width="400px" > [![CircleCI](https://circleci.com/gh/vmware-tanzu/sonobuoy.svg?style=svg)](https://circleci.com/gh/vmware-tanzu/sonobuoy)
+# <img src="img/sonobuoy-logo.png" alt="Sonobuoy logo" width="400px" > [![CircleCI](https://circleci.com/gh/vmware-tanzu/sonobuoy.svg?style=svg)](https://circleci.com/gh/vmware-tanzu/sonobuoy)
 
 ## [Overview][oview]
 

diff --git a/site/docs/v0.15.2/README.md b/site/docs/v0.15.2/README.md
@@ -1,4 +1,4 @@
-# <img src="img/sonobuoy-logo.png" width="400px" > [![CircleCI](https://circleci.com/gh/vmware-tanzu/sonobuoy.svg?style=svg)](https://circleci.com/gh/vmware-tanzu/sonobuoy)
+# <img src="img/sonobuoy-logo.png" alt="Sonobuoy logo" width="400px" > [![CircleCI](https://circleci.com/gh/vmware-tanzu/sonobuoy.svg?style=svg)](https://circleci.com/gh/vmware-tanzu/sonobuoy)
 
 ## [Overview][oview]
 

diff --git a/site/docs/v0.15.3/README.md b/site/docs/v0.15.3/README.md
@@ -1,4 +1,4 @@
-# <img src="img/sonobuoy-logo.png" width="400px" > [![CircleCI](https://circleci.com/gh/vmware-tanzu/sonobuoy.svg?style=svg)](https://circleci.com/gh/vmware-tanzu/sonobuoy)
+# <img src="img/sonobuoy-logo.png" alt="Sonobuoy logo" width="400px" > [![CircleCI](https://circleci.com/gh/vmware-tanzu/sonobuoy.svg?style=svg)](https://circleci.com/gh/vmware-tanzu/sonobuoy)
 
 ## [Overview][oview]
 

diff --git a/site/docs/v0.15.4/README.md b/site/docs/v0.15.4/README.md
@@ -1,4 +1,4 @@
-# <img src="img/sonobuoy-logo.png" width="400px" > [![CircleCI](https://circleci.com/gh/vmware-tanzu/sonobuoy.svg?style=svg)](https://circleci.com/gh/vmware-tanzu/sonobuoy)
+# <img src="img/sonobuoy-logo.png" alt="Sonobuoy logo" width="400px" > [![CircleCI](https://circleci.com/gh/vmware-tanzu/sonobuoy.svg?style=svg)](https://circleci.com/gh/vmware-tanzu/sonobuoy)
 
 ## [Overview][oview]
 

diff --git a/site/docs/v0.16.0/README.md b/site/docs/v0.16.0/README.md
@@ -1,4 +1,4 @@
-# <img src="img/sonobuoy-logo.png" width="400px" > [![CircleCI](https://circleci.com/gh/vmware-tanzu/sonobuoy.svg?style=svg)](https://circleci.com/gh/vmware-tanzu/sonobuoy)
+# <img src="img/sonobuoy-logo.png" alt="Sonobuoy logo" width="400px" > [![CircleCI](https://circleci.com/gh/vmware-tanzu/sonobuoy.svg?style=svg)](https://circleci.com/gh/vmware-tanzu/sonobuoy)
 
 ## [Overview][oview]
 

diff --git a/site/docs/v0.16.1/README.md b/site/docs/v0.16.1/README.md
@@ -1,4 +1,4 @@
-# <img src="img/sonobuoy-logo.png" width="400px" > [![CircleCI](https://circleci.com/gh/vmware-tanzu/sonobuoy.svg?style=svg)](https://circleci.com/gh/vmware-tanzu/sonobuoy)
+# <img src="img/sonobuoy-logo.png" alt="Sonobuoy logo" width="400px" > [![CircleCI](https://circleci.com/gh/vmware-tanzu/sonobuoy.svg?style=svg)](https://circleci.com/gh/vmware-tanzu/sonobuoy)
 
 ## [Overview][oview]
 

diff --git a/site/docs/v0.16.2/README.md b/site/docs/v0.16.2/README.md
@@ -1,4 +1,4 @@
-# <img src="img/sonobuoy-logo.png" width="400px" > [![CircleCI](https://circleci.com/gh/vmware-tanzu/sonobuoy.svg?style=svg)](https://circleci.com/gh/vmware-tanzu/sonobuoy)
+# <img src="img/sonobuoy-logo.png" alt="Sonobuoy logo" width="400px" > [![CircleCI](https://circleci.com/gh/vmware-tanzu/sonobuoy.svg?style=svg)](https://circleci.com/gh/vmware-tanzu/sonobuoy)
 
 ## [Overview][oview]
 

diff --git a/site/docs/v0.16.3/README.md b/site/docs/v0.16.3/README.md
@@ -1,4 +1,4 @@
-# <img src="img/sonobuoy-logo.png" width="400px" > [![CircleCI](https://circleci.com/gh/vmware-tanzu/sonobuoy.svg?style=svg)](https://circleci.com/gh/vmware-tanzu/sonobuoy)
+# <img src="img/sonobuoy-logo.png" alt="Sonobuoy logo" width="400px" > [![CircleCI](https://circleci.com/gh/vmware-tanzu/sonobuoy.svg?style=svg)](https://circleci.com/gh/vmware-tanzu/sonobuoy)
 
 ## [Overview][oview]
 

diff --git a/site/docs/v0.16.4/README.md b/site/docs/v0.16.4/README.md
@@ -1,4 +1,4 @@
-# <img src="img/sonobuoy-logo.png" width="400px" > [![CircleCI](https://circleci.com/gh/vmware-tanzu/sonobuoy.svg?style=svg)](https://circleci.com/gh/vmware-tanzu/sonobuoy)
+# <img src="img/sonobuoy-logo.png" alt="Sonobuoy logo" width="400px" > [![CircleCI](https://circleci.com/gh/vmware-tanzu/sonobuoy.svg?style=svg)](https://circleci.com/gh/vmware-tanzu/sonobuoy)
 
 ## [Overview][oview]
 

diff --git a/site/resources.md b/site/resources.md
@@ -8,15 +8,15 @@ Here you will find external resources about Sonobuoy, such as videos, podcasts,
 
 * A first look at Sonobuoy (video): 
 
-<iframe width="560" height="315" src="https://www.youtube.com/embed/1e6SAZfkqUk" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
+<iframe title="A first look at Sonobuoy" width="560" height="315" src="https://www.youtube.com/embed/1e6SAZfkqUk" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
 
 * Overview of Sonobuoy (video): 
 
-<iframe width="560" height="315" src="https://www.youtube.com/embed/k-P4hXdruRs?start=568" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
+<iframe title="Overview of Sonobuoy" width="560" height="315" src="https://www.youtube.com/embed/k-P4hXdruRs?start=568" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
 
 * Sonobuoy in 10 minutes, presented at Kubernetes Community Meeting (video): 
 
-<iframe width="560" height="315" src="https://www.youtube.com/embed/Aqp6Rk1J5Jw?start=222" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
+<iframe title="Sonobuoy in 10 minutes, presented at Kubernetes Community Meeting" width="560" height="315" src="https://www.youtube.com/embed/Aqp6Rk1J5Jw?start=222" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
 
 * Learn more about CNCF Certified Kubernetes: <https://github.com/cncf/k8s-conformance#certified-kubernetes>