PrivateCoffee/alltube
4
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity

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
Show stats Download patch file Download diff file Expand all files Collapse all files

548
css/style.css
View file

@ -1,128 +1,120 @@
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 {
padding:0; padding: 0;
position:absolute; position: absolute;
text-align:right; text-align: right;
top:0; top: 0;
width:100%; width: 100%;
} }
.social { .social {
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;
float:right; float: right;
height:38px; height: 38px;
margin-left:13px; margin-left: 13px;
margin-right:0; margin-right: 0;
margin-top:13px; margin-top: 13px;
overflow:hidden; overflow: hidden;
position:relative; position: relative;
-webkit-transition: all 0.1s ease-in; -webkit-transition: all 0.1s ease-in;
-moz-transition: all 0.1s ease-in; -moz-transition: all 0.1s ease-in;
-o-transition: all 0.1s ease-in; -o-transition: all 0.1s ease-in;
width:38px; width: 38px;
} }
header a:focus, header a:focus,
header a:hover { header a:hover {
background-position:0 100%; background-position: 0 100%;
outline:none; outline: none;
-webkit-transition: all 0.1s ease-in; -webkit-transition: all 0.1s ease-in;
-moz-transition: all 0.1s ease-in; -moz-transition: all 0.1s ease-in;
-o-transition: all 0.1s ease-in; -o-transition: all 0.1s ease-in;
} }
.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;
left:0; left: 0;
position:absolute; position: absolute;
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;
left:0; left: 0;
position:absolute; position: absolute;
top:0; top: 0;
width:38px; width: 38px;
z-index:10; z-index: 10;
} }
.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;
left:0; left: 0;
position:absolute; position: absolute;
top:0; top: 0;
width:38px; width: 38px;
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;
color:#adadad; color: #adadad;
padding-top:20px; padding-top: 20px;
position:fixed; position: fixed;
text-align:center; text-align: center;
width:100%; width: 100%;
z-index:11; z-index: 11;
} }
.footer_wrapper { .footer_wrapper {
height:28px; height: 28px;
} }
footer a{ footer a {
color:#adadad; color: #adadad;
text-decoration:none; text-decoration: none;
-webkit-transition: all 0.1s ease-in; -webkit-transition: all 0.1s ease-in;
-moz-transition: all 0.1s ease-in; -moz-transition: all 0.1s ease-in;
-o-transition: all 0.1s ease-in; -o-transition: all 0.1s ease-in;
@ -130,47 +122,42 @@ footer a{
footer a:focus, footer a:focus,
footer a:hover { footer a:hover {
color:#f2084a; color: #f2084a;
outline:none; outline: none;
-webkit-transition: all 0.1s ease-in; -webkit-transition: all 0.1s ease-in;
-moz-transition: all 0.1s ease-in; -moz-transition: all 0.1s ease-in;
-o-transition: all 0.1s ease-in; -o-transition: all 0.1s ease-in;
} }
/* Home content */ /* Home content */
.logo { .logo {
padding-bottom:55px; padding-bottom: 55px;
} }
.labelurl { .labelurl {
color:#3f3f3f; color: #3f3f3f;
font-size:19px; font-size: 19px;
position:relative; position: relative;
} }
.champs { .champs {
margin-bottom:70px; margin-bottom: 70px;
margin-top:8px; margin-top: 8px;
position:relative; position: relative;
} }
.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;
cursor:pointer; cursor: pointer;
display:inline-block; display: inline-block;
font-weight:800; font-weight: 800;
padding: 12px 14px; padding: 12px 14px;
position:relative; position: relative;
text-decoration:none; text-decoration: none;
-webkit-transition: all 0.1s ease-in; -webkit-transition: all 0.1s ease-in;
-moz-transition: all 0.1s ease-in; -moz-transition: all 0.1s ease-in;
-o-transition: all 0.1s ease-in; -o-transition: all 0.1s ease-in;
@ -178,63 +165,62 @@ footer a:hover {
.downloadBtn:focus, .downloadBtn:focus,
.downloadBtn:hover { .downloadBtn:hover {
background-color:#f2084a; background-color: #f2084a;
outline:none; outline: none;
-webkit-transition: all 0.1s ease-in; -webkit-transition: all 0.1s ease-in;
-moz-transition: all 0.1s ease-in; -moz-transition: all 0.1s ease-in;
-o-transition: all 0.1s ease-in; -o-transition: all 0.1s ease-in;
} }
.downloadBtn::-moz-focus-inner { .downloadBtn::-moz-focus-inner {
border:none; border: none;
} }
.URLinput{ .URLinput {
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;
padding: 12px 12px 12px 12px; padding: 12px 12px 12px 12px;
position:relative; position: relative;
} }
.URLinput:focus { .URLinput:focus {
border-color:#3A3A3A; border-color: #3a3a3a;
outline: none; outline: none;
} }
.URLinput:-webkit-input-placeholder{ .URLinput:-webkit-input-placeholder {
color:#c1cfcf; color: #c1cfcf;
} }
.URLinput:-moz-placeholder { .URLinput:-moz-placeholder {
color:#c1cfcf; color: #c1cfcf;
} }
.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;
padding-bottom:10px; padding-bottom: 10px;
padding-left:41px; padding-left: 41px;
padding-top:10px; padding-top: 10px;
position:relative; position: relative;
text-decoration:none; text-decoration: none;
-webkit-transition: all 0.1s ease-in; -webkit-transition: all 0.1s ease-in;
-moz-transition: all 0.1s ease-in; -moz-transition: all 0.1s ease-in;
-o-transition: all 0.1s ease-in; -o-transition: all 0.1s ease-in;
z-index:10; z-index: 10;
} }
.combatiblelink:focus, .combatiblelink:focus,
.combatiblelink:hover { .combatiblelink:hover {
background-position:0 0; background-position: 0 0;
color:#f2084a; color: #f2084a;
outline:none; outline: none;
-webkit-transition: all 0.1s ease-in; -webkit-transition: all 0.1s ease-in;
-moz-transition: all 0.1s ease-in; -moz-transition: all 0.1s ease-in;
-o-transition: all 0.1s ease-in; -o-transition: all 0.1s ease-in;
@ -242,26 +228,26 @@ footer a:hover {
.bookmarklet { .bookmarklet {
border: 2px dotted; border: 2px dotted;
color:gray; color: gray;
padding:10px 30px; padding: 10px 30px;
position:relative; position: relative;
text-decoration:none; text-decoration: none;
z-index:10; z-index: 10;
} }
.mp3 { .mp3 {
background-color:#cecece; background-color: #cecece;
border-radius:6px; border-radius: 6px;
color:#3f3f3f; color: #3f3f3f;
height:26px; height: 26px;
margin-top:12px; margin-top: 12px;
position:relative; position: relative;
text-align:left; text-align: left;
width:622px; width: 622px;
} }
.mp3-inner { .mp3-inner {
padding:3px; padding: 3px;
} }
.audio:not(:checked), .audio:not(:checked),
@ -272,7 +258,7 @@ footer a:hover {
.audio:not(:checked) + label, .audio:not(:checked) + label,
.audio:checked + label { .audio:checked + label {
cursor: pointer; cursor: pointer;
line-height:20px; line-height: 20px;
padding-left: 82px; padding-left: 82px;
position: relative; position: relative;
} }
@ -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,
@ -288,13 +274,13 @@ footer a:hover {
background: #ffffff; background: #ffffff;
border-radius: 6px; border-radius: 6px;
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,21 +290,21 @@ 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;
} }
.audio:focus + label { .audio:focus + label {
color:black; color: black;
} }
/* on checked */ /* on checked */
.audio:checked + label:before { .audio:checked + label:before {
background:#f2084a; background: #f2084a;
} }
.audio:checked + label:after { .audio:checked + label:after {
background: #fff; background: #fff;
@ -332,44 +318,44 @@ footer a:hover {
border-radius: 15px; border-radius: 15px;
font-size: 11px; font-size: 11px;
font-weight: bold; font-weight: bold;
height:20px; height: 20px;
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";
left: 0; left: 0;
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;
} }
.seekOptions { .seekOptions {
@ -382,7 +368,6 @@ footer a:hover {
display: block; display: block;
} }
/* Playlists */ /* Playlists */
.playlist-entry .thumb { .playlist-entry .thumb {
float: left; float: left;
@ -413,126 +398,120 @@ footer a:hover {
font-size: 16px; font-size: 16px;
} }
/* Supported websites list */ /* Supported websites list */
.logobis { .logobis {
height:107px; height: 107px;
margin:0 auto 10px auto; margin: 0 auto 10px auto;
position:relative; position: relative;
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;
height:107px; height: 107px;
-webkit-transition: all 0.1s ease-in; -webkit-transition: all 0.1s ease-in;
-moz-transition: all 0.1s ease-in; -moz-transition: all 0.1s ease-in;
-o-transition: all 0.1s ease-in; -o-transition: all 0.1s ease-in;
width:447px; width: 447px;
} }
.logocompatible:focus, .logocompatible:focus,
.logocompatible:hover { .logocompatible:hover {
background-position:0 100%; background-position: 0 100%;
outline:none; outline: none;
-webkit-transition: all 0.1s ease-in; -webkit-transition: all 0.1s ease-in;
-moz-transition: all 0.1s ease-in; -moz-transition: all 0.1s ease-in;
-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;
left:0; left: 0;
position:absolute; position: absolute;
top:0; top: 0;
width:447px; width: 447px;
z-index:10; z-index: 10;
} }
.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;
} }
.tripleliste { .tripleliste {
margin-left:auto; margin-left: auto;
margin-right:auto; margin-right: auto;
margin-top:80px; margin-top: 80px;
position:relative; position: relative;
width:800px; width: 800px;
} }
.tripleliste ul { .tripleliste ul {
margin-bottom:1em; margin-bottom: 1em;
margin-left:120px; margin-left: 120px;
width:600px; width: 600px;
} }
.tripleliste ul li { .tripleliste ul li {
color:#383838; color: #383838;
float:left; float: left;
list-style-type:none; list-style-type: none;
position:relative; position: relative;
text-align:left; text-align: left;
width:200px; width: 200px;
} }
html, html,
body { body {
height:100%; height: 100%;
margin:0; margin: 0;
} }
.wrapper { .wrapper {
-moz-box-sizing: border-box; -moz-box-sizing: border-box;
-webkit-box-sizing: border-box; -webkit-box-sizing: border-box;
box-sizing: border-box; box-sizing: border-box;
display:table; display: table;
height:100%; height: 100%;
margin:auto; margin: auto;
padding-bottom:110px; padding-bottom: 110px;
} }
.main { .main {
display:table-cell; display: table-cell;
vertical-align:middle; vertical-align: middle;
} }
.extractors { .extractors {
padding-top:60px; padding-top: 60px;
} }
.extractors .wrapper { .extractors .wrapper {
padding-bottom:5em; padding-bottom: 5em;
} }
.logocompatible, .logocompatible,
.social a { .social a {
font-size:0; font-size: 0;
text-decoration:none; text-decoration: none;
} }
.social a { .social a {
color:#D1D1D1; color: #d1d1d1;
} }
.logocompatible { .logocompatible {
color: #4F4F4F color: #4f4f4f;
} }
h1 { h1 {
margin:0; margin: 0;
} }
.error { .error {
@ -540,19 +519,19 @@ h1 {
} }
.error p { .error p {
text-align:justify; text-align: justify;
} }
.smaller { .smaller {
font-size:smaller; font-size: smaller;
} }
.thumb { .thumb {
max-width:700px; max-width: 700px;
} }
.format { .format {
text-align:left; text-align: left;
} }
.best { .best {
@ -560,7 +539,7 @@ h1 {
} }
.monospace { .monospace {
font-family:monospace; font-family: monospace;
} }
.customBitrate { .customBitrate {
@ -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 {
@ -629,20 +608,20 @@ h1 {
@media (max-width: 640px) { @media (max-width: 640px) {
.formats, .formats,
.thumb { .thumb {
width:90%; width: 90%;
} }
.URLinput{ .URLinput {
min-width:0; min-width: 0;
} }
.logo { .logo {
max-width:330px; max-width: 330px;
} }
.logocompatible, .logocompatible,
.logocompatible img { .logocompatible img {
max-width:447px; max-width: 447px;
} }
.logocompatible, .logocompatible,
@ -650,18 +629,18 @@ h1 {
.champs, .champs,
.URLinput, .URLinput,
.mp3 { .mp3 {
height:auto; height: auto;
margin:auto; margin: auto;
width:90%; width: 90%;
} }
.logo { .logo {
margin-top:50px; margin-top: 50px;
} }
.logocompatible img { .logocompatible img {
height: auto; height: auto;
width:100%; width: 100%;
} }
.downloadBtn { .downloadBtn {
@ -672,46 +651,46 @@ h1 {
} }
footer { footer {
display:none; display: none;
} }
.tripleliste ul, .tripleliste ul,
.tripleliste { .tripleliste {
margin-left:auto; margin-left: auto;
margin-top:auto; margin-top: auto;
width:auto; width: auto;
} }
.logocompatiblemask { .logocompatiblemask {
background:none; background: none;
} }
.logocompatible { .logocompatible {
background-color:#4F4F4F; background-color: #4f4f4f;
background-image:none; background-image: none;
height:auto; height: auto;
} }
.logocompatiblemask, .logocompatiblemask,
.logobis { .logobis {
width:auto; width: auto;
} }
.logocompatiblemask { .logocompatiblemask {
position:static; position: static;
} }
.logobis { .logobis {
height:auto; height: auto;
} }
.titre { .titre {
margin:auto; margin: auto;
} }
.error p { .error p {
padding:0.5em; padding: 0.5em;
text-align:left; text-align: left;
} }
.playlist-entry { .playlist-entry {
@ -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>