From 91bbb98cabbf4afe1912c806ecb128f828319df4 Mon Sep 17 00:00:00 2001 From: SDBrett Date: Thu, 5 Dec 2019 08:30:23 +1100 Subject: [PATCH] Improve site accessibility score (#2095) Fixes: #2094 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. Signed-off-by: Brett Johnson <brett@sdbrett.com> --- site/_includes/footer.html | 4 ++-- site/_includes/site-header.html | 2 +- site/_scss/site/objects/_card.scss | 2 +- site/_scss/site/objects/_post.scss | 16 +++++++++++-- site/_scss/site/objects/_section.scss | 3 +++ site/_scss/site/settings/_variables.scss | 30 +++++++++++++----------- site/resources.md | 4 ++-- 7 files changed, 39 insertions(+), 22 deletions(-) diff --git a/site/_includes/footer.html b/site/_includes/footer.html index cabdd2004..bfbfc9c3a 100644 --- a/site/_includes/footer.html +++ b/site/_includes/footer.html @@ -28,13 +28,13 @@ </ul> </div> <div class="col-12 col-md-4 text-center text-md-right"> - <a href="/" alt="Homepage"><img src="/img/{{ site.logo }}" class="logo" /></a> + <a href="/" aria-label="Velero 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/site-header.html b/site/_includes/site-header.html index 4e07db464..fa9a611ca 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="Velero 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/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 d835905ee..ba4be25bf 100755 --- 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 { @@ -131,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/_scss/site/settings/_variables.scss b/site/_scss/site/settings/_variables.scss index 46204f3d1..c9ae2c882 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/resources.md b/site/resources.md index 94d7af109..bfe56bc63 100644 --- a/site/resources.md +++ b/site/resources.md @@ -8,7 +8,7 @@ Here you will find external resources about Velero, such as videos, podcasts, an ## Previous community meetings -<iframe width="560" height="315" src="https://www.youtube.com/embed/videoseries?list=PL7bmigfV0EqQRysvqvqOtRNk4L5S7uqwM" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe> +<iframe title="Velero Community Meetings/Open Discussions" width="560" height="315" src="https://www.youtube.com/embed/videoseries?list=PL7bmigfV0EqQRysvqvqOtRNk4L5S7uqwM" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe> ## Podcast shows @@ -18,7 +18,7 @@ Here you will find external resources about Velero, such as videos, podcasts, an * Watch our recent webinar on backup and migration strategies: -<iframe width="560" height="315" src="https://www.youtube.com/embed/csrSPt3HFtg" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe> +<iframe title="Kubernetes Backup and Migration Strategies using Project Velero" width="560" height="315" src="https://www.youtube.com/embed/csrSPt3HFtg" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe> ## Blog posts