genuineparts/alltube
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Improves a11y of password protected video form

Browse source 
According to the WCAG success criterias 1.3.1 (Info and relationships),
3.3.2 (Labels or Instructions) and 4.1.2 (Name, Role, Value), labels
or instructions are required when content requires user input.

To do so, this commit adds a label for the password input and hide it
with a CSS visually-hidden method to not alter the design.

Resources:
- https://www.w3.org/TR/WCAG21/#labels-or-instructions
- https://www.w3.org/TR/WCAG21/#info-and-relationships
- https://www.w3.org/TR/WCAG21/#name-role-value
- https://www.w3.org/TR/WCAG20-TECHS/H44.html
- https://www.w3.org/WAI/WCAG21/Understanding/labels-or-instructions.html
- https://gomakethings.com/hidden-content-for-better-a11y/
This commit is contained in:
Damien Senger 2019-04-13 13:11:09 +02:00
parent 726e9bf5c1
commit ce07a621e5
No known key found for this signature in database
GPG key ID: A718C115E3DFF8B7
2 changed files with 450 additions and 447 deletions
Download patch file Download diff file Expand all files Collapse all files

144
css/style.css
View file

@ -1,14 +1,11 @@
body { body {
background-color: #EBEBEB; background-color: #ebebeb;
background-image:url('../img/fond.jpg'); background-image: url("../img/fond.jpg");
font-family: 'Open Sans', sans-serif; font-family: "Open Sans", sans-serif;
font-weight: 400; font-weight: 400;
text-align: center; text-align: center;
} }
/* Header */ /* Header */
header { header {
@ -23,7 +20,6 @@ header {
padding-right: 21px; padding-right: 21px;
} }
header .social a { header .social a {
background-position: 0 0; background-position: 0 0;
background-repeat: no-repeat; background-repeat: no-repeat;
@ -50,11 +46,11 @@ header a:hover {
} }
.share { .share {
background-image:url('../img/share.png'); background-image: url("../img/share.png");
} }
.sharemask { .sharemask {
background-image:url('../img/sharemask.png'); background-image: url("../img/sharemask.png");
background-position: top left; background-position: top left;
background-repeat: no-repeat; background-repeat: no-repeat;
height: 38px; height: 38px;
@ -63,15 +59,14 @@ header a:hover {
top: 0; top: 0;
width: 38px; width: 38px;
z-index: 10; z-index: 10;
} }
.facebook { .facebook {
background-image:url('../img/facebook.png'); background-image: url("../img/facebook.png");
} }
.facebookmask { .facebookmask {
background-image:url('../img/facebookmask.png'); background-image: url("../img/facebookmask.png");
background-position: top left; background-position: top left;
background-repeat: no-repeat; background-repeat: no-repeat;
height: 38px; height: 38px;
@ -83,11 +78,11 @@ header a:hover {
} }
.twitter { .twitter {
background-image:url('../img/twitter.png'); background-image: url("../img/twitter.png");
} }
.twittermask { .twittermask {
background-image:url('../img/twittermask.png'); background-image: url("../img/twittermask.png");
background-position: top left; background-position: top left;
background-repeat: no-repeat; background-repeat: no-repeat;
height: 38px; height: 38px;
@ -98,13 +93,10 @@ header a:hover {
z-index: 10; z-index: 10;
} }
/* Footer */ /* Footer */
footer { footer {
background-image:url('../img/fondfooter.png'); background-image: url("../img/fondfooter.png");
background-position: top left; background-position: top left;
background-repeat: repeat-x; background-repeat: repeat-x;
bottom: 0; bottom: 0;
@ -137,11 +129,6 @@ footer a:hover {
-o-transition: all 0.1s ease-in; -o-transition: all 0.1s ease-in;
} }
/* Home content */ /* Home content */
.logo { .logo {
@ -161,7 +148,7 @@ footer a:hover {
} }
.downloadBtn { .downloadBtn {
background-color:#3A3A3A; background-color: #3a3a3a;
border: 3px solid #a5a5a5; border: 3px solid #a5a5a5;
border-radius: 10px; border-radius: 10px;
color: #dedede; color: #dedede;
@ -193,7 +180,7 @@ footer a:hover {
background-color: #fff; background-color: #fff;
border: 3px solid #a5a5a5; border: 3px solid #a5a5a5;
border-radius: 10px; border-radius: 10px;
color:#3F3F3F; color: #3f3f3f;
font-weight: 800; font-weight: 800;
margin-right: 8px; margin-right: 8px;
min-width: 426px; min-width: 426px;
@ -201,9 +188,8 @@ footer a:hover {
position: relative; position: relative;
} }
.URLinput:focus { .URLinput:focus {
border-color:#3A3A3A; border-color: #3a3a3a;
outline: none; outline: none;
} }
@ -215,7 +201,7 @@ footer a:hover {
} }
.combatiblelink { .combatiblelink {
background-image:url('../img/compatiblerouage.png'); background-image: url("../img/compatiblerouage.png");
background-position: 0 100%; background-position: 0 100%;
background-repeat: no-repeat; background-repeat: no-repeat;
color: #a5a5a5; color: #a5a5a5;
@ -280,7 +266,7 @@ footer a:hover {
.audio:checked + label:before, .audio:checked + label:before,
.audio:not(:checked) + label:after, .audio:not(:checked) + label:after,
.audio:checked + label:after { .audio:checked + label:after {
content: ''; content: "";
position: absolute; position: absolute;
} }
.audio:not(:checked) + label:before, .audio:not(:checked) + label:before,
@ -290,11 +276,11 @@ footer a:hover {
height: 20px; height: 20px;
left: 0; left: 0;
top: -1px; top: -1px;
-webkit-transition: background-color .2s; -webkit-transition: background-color 0.2s;
-moz-transition: background-color .2s; -moz-transition: background-color 0.2s;
-ms-transition: background-color .2s; -ms-transition: background-color 0.2s;
-o-transition: background-color .2s; -o-transition: background-color 0.2s;
transition: background-color .2s; transition: background-color 0.2s;
width: 45px; width: 45px;
} }
.audio:not(:checked) + label:after, .audio:not(:checked) + label:after,
@ -304,11 +290,11 @@ footer a:hover {
height: 16px; height: 16px;
left: 2px; left: 2px;
top: 1px; top: 1px;
-webkit-transition: all .2s; -webkit-transition: all 0.2s;
-moz-transition: all .2s; -moz-transition: all 0.2s;
-ms-transition: all .2s; -ms-transition: all 0.2s;
-o-transition: all .2s; -o-transition: all 0.2s;
transition: all .2s; transition: all 0.2s;
width: 16px; width: 16px;
} }
@ -336,15 +322,15 @@ footer a:hover {
left: 3px; left: 3px;
line-height: 17px; line-height: 17px;
position: absolute; position: absolute;
-webkit-transition: all .2s; -webkit-transition: all 0.2s;
-moz-transition: all .2s; -moz-transition: all 0.2s;
-ms-transition: all .2s; -ms-transition: all 0.2s;
-o-transition: all .2s; -o-transition: all 0.2s;
transition: all .2s; transition: all 0.2s;
width: 45px; width: 45px;
} }
.audio:not(:checked) + label .ui:before { .audio:not(:checked) + label .ui:before {
background-image:url('../img/mp3hover.png'); background-image: url("../img/mp3hover.png");
background-position: right top; background-position: right top;
background-repeat: no-repeat; background-repeat: no-repeat;
content: "no"; content: "no";
@ -352,23 +338,23 @@ footer a:hover {
min-width: 56px; min-width: 56px;
padding-left: 23px; padding-left: 23px;
padding-top: 2px; padding-top: 2px;
-webkit-transition: all .2s; -webkit-transition: all 0.2s;
-moz-transition: all .2s; -moz-transition: all 0.2s;
-ms-transition: all .2s; -ms-transition: all 0.2s;
-o-transition: all .2s; -o-transition: all 0.2s;
transition: all .2s; transition: all 0.2s;
} }
.audio:checked + label .ui:after { .audio:checked + label .ui:after {
background-image:url('../img/mp3.png'); background-image: url("../img/mp3.png");
background-position: right top; background-position: right top;
background-repeat: no-repeat; background-repeat: no-repeat;
color: #fff; color: #fff;
content: "yes"; content: "yes";
-webkit-transition: all .2s; -webkit-transition: all 0.2s;
-moz-transition: all .2s; -moz-transition: all 0.2s;
-ms-transition: all .2s; -ms-transition: all 0.2s;
-o-transition: all .2s; -o-transition: all 0.2s;
transition: all .2s; transition: all 0.2s;
width: 73px; width: 73px;
} }
@ -382,7 +368,6 @@ footer a:hover {
display: block; display: block;
} }
/* Playlists */ /* Playlists */
.playlist-entry .thumb { .playlist-entry .thumb {
float: left; float: left;
@ -413,9 +398,6 @@ footer a:hover {
font-size: 16px; font-size: 16px;
} }
/* Supported websites list */ /* Supported websites list */
.logobis { .logobis {
@ -425,9 +407,8 @@ footer a:hover {
width: 447px; width: 447px;
} }
.logocompatible { .logocompatible {
background-image:url('../img/logocompatible.png'); background-image: url("../img/logocompatible.png");
background-position: 0 0; background-position: 0 0;
background-repeat: repeat-y; background-repeat: repeat-y;
display: block; display: block;
@ -447,9 +428,8 @@ footer a:hover {
-o-transition: all 0.1s ease-in; -o-transition: all 0.1s ease-in;
} }
.logocompatiblemask { .logocompatiblemask {
background-image:url('../img/logocompatiblemask.png'); background-image: url("../img/logocompatiblemask.png");
background-position: 0 100%; background-position: 0 100%;
background-repeat: no-repeat; background-repeat: no-repeat;
height: 107px; height: 107px;
@ -462,7 +442,7 @@ footer a:hover {
.titre { .titre {
color: #383838; color: #383838;
font-family: 'Open Sans', sans-serif; font-family: "Open Sans", sans-serif;
font-size: 48px; font-size: 48px;
font-weight: 300; font-weight: 300;
} }
@ -475,7 +455,6 @@ footer a:hover {
width: 800px; width: 800px;
} }
.tripleliste ul { .tripleliste ul {
margin-bottom: 1em; margin-bottom: 1em;
margin-left: 120px; margin-left: 120px;
@ -525,10 +504,10 @@ body {
} }
.social a { .social a {
color:#D1D1D1; color: #d1d1d1;
} }
.logocompatible { .logocompatible {
color: #4F4F4F color: #4f4f4f;
} }
h1 { h1 {
@ -591,7 +570,7 @@ h1 {
} }
.supportedLocales li { .supportedLocales li {
border-bottom: thin solid #E1E1E1; border-bottom: thin solid #e1e1e1;
} }
.supportedLocales li:last-child { .supportedLocales li:last-child {
@ -687,7 +666,7 @@ h1 {
} }
.logocompatible { .logocompatible {
background-color:#4F4F4F; background-color: #4f4f4f;
background-image: none; background-image: none;
height: auto; height: auto;
} }
@ -723,7 +702,6 @@ h1 {
float: none; float: none;
margin-right: 0; margin-right: 0;
} }
} }
@media all and (display-mode: standalone) { @media all and (display-mode: standalone) {
@ -731,3 +709,27 @@ h1 {
display: none; display: none;
} }
} }
/* Visually hidden, displays content only to screen-readers */
.sr-only {
border: 0;
clip: rect(0 0 0 0);
height: 1px;
margin: -1px;
overflow: hidden;
padding: 0;
position: absolute;
white-space: nowrap;
width: 1px;
}
.sr-only.focusable:active,
.sr-only.focusable:focus {
clip: auto;
height: auto;
margin: 0;
overflow: visible;
position: static;
white-space: normal;
width: auto;
}

3
templates/password.tpl
View file

@ -5,7 +5,8 @@
<h2>{t}This video is protected{/t}</h2> <h2>{t}This video is protected{/t}</h2>
<p>{t}You need a password in order to download this video.{/t}</p> <p>{t}You need a password in order to download this video.{/t}</p>
<form action="" method="POST"> <form action="" method="POST">
<input class="URLinput" type="password" name="password" title="{t}Video password{/t}" /> <label class="sr-only" for="password">{t}Video password{/t}</label>
<input class="URLinput" type="password" name="password" id="password" />
<br/><br/> <br/><br/>
<input class="downloadBtn" type="submit" value="{t}Download{/t}" /> <input class="downloadBtn" type="submit" value="{t}Download{/t}" />
</form> </form>