From 1429ac221bddf42d0cd4a82bcca54d35d989a114 Mon Sep 17 00:00:00 2001 From: Brett Johnson Date: Thu, 28 Nov 2019 08:14:06 +1100 Subject: [PATCH] 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 "" %} 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 <brett@sdbrett.com> --- README.md | 2 +- site/_includes/footer.html | 4 +-- site/_includes/head-docs.html | 1 - site/_includes/site-header.html | 2 +- site/_scss/_styles.scss | 1 + site/_scss/site/objects/_card.scss | 2 +- site/_scss/site/objects/_post.scss | 19 ++++++++++-- site/_scss/site/objects/_section.scss | 3 ++ .../site/settings/_custom-sonobuoy.scss} | 2 +- site/_scss/site/settings/_variables.scss | 30 ++++++++++--------- site/docs/master/README.md | 2 +- site/docs/v0.14.0/README.md | 2 +- site/docs/v0.14.1/README.md | 2 +- site/docs/v0.14.2/README.md | 2 +- site/docs/v0.14.3/README.md | 2 +- site/docs/v0.15.0/README.md | 2 +- site/docs/v0.15.1/README.md | 2 +- site/docs/v0.15.2/README.md | 2 +- site/docs/v0.15.3/README.md | 2 +- site/docs/v0.15.4/README.md | 2 +- site/docs/v0.16.0/README.md | 2 +- site/docs/v0.16.1/README.md | 2 +- site/docs/v0.16.2/README.md | 2 +- site/docs/v0.16.3/README.md | 2 +- site/docs/v0.16.4/README.md | 2 +- site/resources.md | 6 ++-- 26 files changed, 61 insertions(+), 41 deletions(-) rename site/{css/custom-sonobuoy.css => _scss/site/settings/_custom-sonobuoy.scss} (87%) diff --git a/README.md b/README.md index 71cc57794..e8bec6346 100644 --- 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 index 208f29aca..3113a5459 100644 --- 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"> © {{ 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 index 6ae151ad7..6ff5fc935 100644 --- 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 index ad7048e97..a7800b394 100644 --- 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 index 40a5aec7c..680b55816 100644 --- 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 index 355a96190..801821cbb 100644 --- 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 index d8cacb82d..ba4be25bf 100644 --- a/site/_scss/site/objects/_post.scss +++ b/site/_scss/site/objects/_post.scss @@ -17,7 +17,7 @@ .post-single-hero { background-color: map-get($field-backgrounds, 'med-blue'); // default - padding-bottom: 105px; + padding-bottom: 105px; h1, h2, h3 { @@ -25,6 +25,9 @@ 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%; } -} \ No newline at end of file +} + +table { + border-collapse: collapse; +} + +table, th, td { + border: 1px solid black; +} + +th, td { + padding: 10px; +} diff --git a/site/_scss/site/objects/_section.scss b/site/_scss/site/objects/_section.scss index 0e6006b2a..64ca798c0 100644 --- a/site/_scss/site/objects/_section.scss +++ b/site/_scss/site/objects/_section.scss @@ -8,6 +8,9 @@ &.section-grey { color: $body-color-darkest; background: $section-grey-background; + a { + color: $darkest-blue; + } } &.section-card { diff --git a/site/css/custom-sonobuoy.css b/site/_scss/site/settings/_custom-sonobuoy.scss similarity index 87% rename from site/css/custom-sonobuoy.css rename to site/_scss/site/settings/_custom-sonobuoy.scss index f5043ca58..d0f15e8d4 100644 --- a/site/css/custom-sonobuoy.css +++ b/site/_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 index 46204f3d1..919510468 100644 --- 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: #007AB8; $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 index 342706871..e3e336b65 100644 --- 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 index d51f74f03..0568162a3 100755 --- 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 index d51f74f03..0568162a3 100755 --- 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 index ff8dba378..377627247 100755 --- 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 index 5d248f3c1..3d0926126 100755 --- 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 index e5cccfd79..78a4ef957 100644 --- 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 index 7caa3cdd0..b497a12f9 100644 --- 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 index 5e5cdb867..6019a396f 100644 --- 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 index 05f599571..f0a2cc13b 100644 --- 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 index 24bb7186d..ea4eb1146 100644 --- 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 index 13dcca67d..f7a8374ed 100644 --- 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 index 33a516292..d27d3f05b 100644 --- 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 index 50480b69b..3f15d68bc 100644 --- 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 index 864749243..d8bbccef0 100644 --- 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 index 40eefcdbc..fa91e9600 100644 --- 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 index 16c96e829..2cc8e66b7 100644 --- 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>