vmware-tanzu
/
velero
mirror of https://github.com/vmware-tanzu/velero.git
1
0
Fork 0
Code Issues Projects Releases Wiki Activity

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 "<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.

Signed-off-by: Brett Johnson <brett@sdbrett.com>
pull/2106/head
SDBrett 2019-12-05 08:30:23 +11:00 committed by Steve Kriss
parent 08d9a3c507
commit 91bbb98cab
7 changed files with 39 additions and 22 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
site/_includes/footer.html
View File

@ -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">
&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>

2
site/_includes/site-header.html
View File

@ -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>

2
site/_scss/site/objects/_card.scss
View File

@ -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;

16
site/_scss/site/objects/_post.scss
View File

@ -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%;
}
}
}
table {
border-collapse: collapse;
}
table, th, td {
border: 1px solid black;
}
th, td {
padding: 10px;
}

3
site/_scss/site/objects/_section.scss
View File

@ -8,6 +8,9 @@
&.section-grey {
color: $body-color-darkest;
background: $section-grey-background;
a {
color: $darkest-blue;
}
}
&.section-card {

30
site/_scss/site/settings/_variables.scss
View File

@ -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;

4
site/resources.md
View File

@ -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