From 60350747a55bd8353c8bd72d5d890e8cf600bf98 Mon Sep 17 00:00:00 2001 From: Damien Senger Date: Sat, 13 Apr 2019 12:19:11 +0200 Subject: [PATCH 1/6] Adds a label to social sharing links According to the WCAG (success criterias 2.4.4 and 4.1.2), the purpose of each link should be determined from the link text alone or from the link text together with its programmatically determined link context. In this case, because there is no text content, we are using `aria-label` to have an explicit purpose announced to users of assisting technologies. Resources: - https://dequeuniversity.com/rules/axe/3.2/link-name - https://www.w3.org/TR/WCAG21/#link-purpose-in-context - https://www.w3.org/TR/WCAG20-TECHS/ARIA8.html --- templates/inc/header.tpl | 9 ++++++--- 1 file changed, 6 insertions(+), 3 deletions(-) diff --git a/templates/inc/header.tpl b/templates/inc/header.tpl index bf476df..844757e 100644 --- a/templates/inc/header.tpl +++ b/templates/inc/header.tpl @@ -18,9 +18,12 @@ {/if}
- - + +
From 27543f90240d50717c2403753a2f6ac60c34b4b7 Mon Sep 17 00:00:00 2001 From: Damien Senger Date: Sat, 13 Apr 2019 12:50:57 +0200 Subject: [PATCH 2/6] Updates the doctype to be lowercase --- templates/inc/head.tpl | 40 ++++++++++++++++++++-------------------- 1 file changed, 20 insertions(+), 20 deletions(-) diff --git a/templates/inc/head.tpl b/templates/inc/head.tpl index b4a5cf1..c3ee074 100644 --- a/templates/inc/head.tpl +++ b/templates/inc/head.tpl @@ -1,25 +1,25 @@ {locale path="../i18n" domain="Alltube"} - + - - -{if isset($description)} - - - -{/if} - -{$config->appName}{if isset($title)} - {$title|escape}{/if} - - - - - - - - - - + + + {if isset($description)} + + + + {/if} + + {$config->appName}{if isset($title)} - {$title|escape}{/if} + + + + + + + + + + From 726e9bf5c1a39913428df825e240a4eb384beccb Mon Sep 17 00:00:00 2001 From: Damien Senger Date: Sat, 13 Apr 2019 12:57:42 +0200 Subject: [PATCH 3/6] Adds a label to audio options inputs 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 "From" and the "To" inputs displayed when a user chose to get the audio of a file only. 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 --- templates/index.tpl | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/templates/index.tpl b/templates/index.tpl index d151acb..7d0e2de 100644 --- a/templates/index.tpl +++ b/templates/index.tpl @@ -25,8 +25,8 @@ {t}Audio only (MP3){/t}
- {t}From{/t} - {t}to{/t} + +
From ce07a621e503bef744bf9cb403a775ad548706d9 Mon Sep 17 00:00:00 2001 From: Damien Senger Date: Sat, 13 Apr 2019 13:11:09 +0200 Subject: [PATCH 4/6] Improves a11y of password protected video form 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/ --- css/style.css | 894 +++++++++++++++++++++-------------------- templates/password.tpl | 3 +- 2 files changed, 450 insertions(+), 447 deletions(-) diff --git a/css/style.css b/css/style.css index 951ef4d..a5e7a6c 100644 --- a/css/style.css +++ b/css/style.css @@ -1,733 +1,735 @@ - body { - background-color: #EBEBEB; - background-image:url('../img/fond.jpg'); - font-family: 'Open Sans', sans-serif; - font-weight:400; - text-align:center; + background-color: #ebebeb; + background-image: url("../img/fond.jpg"); + font-family: "Open Sans", sans-serif; + font-weight: 400; + text-align: center; } - - /* Header */ header { - padding:0; - position:absolute; - text-align:right; - top:0; - width:100%; + padding: 0; + position: absolute; + text-align: right; + top: 0; + width: 100%; } .social { - padding-right:21px; + padding-right: 21px; } - header .social a { - background-position:0 0; - background-repeat:no-repeat; - float:right; - height:38px; - margin-left:13px; - margin-right:0; - margin-top:13px; - overflow:hidden; - position:relative; - -webkit-transition: all 0.1s ease-in; - -moz-transition: all 0.1s ease-in; - -o-transition: all 0.1s ease-in; - width:38px; + background-position: 0 0; + background-repeat: no-repeat; + float: right; + height: 38px; + margin-left: 13px; + margin-right: 0; + margin-top: 13px; + overflow: hidden; + position: relative; + -webkit-transition: all 0.1s ease-in; + -moz-transition: all 0.1s ease-in; + -o-transition: all 0.1s ease-in; + width: 38px; } header a:focus, header a:hover { - background-position:0 100%; - outline:none; - -webkit-transition: all 0.1s ease-in; - -moz-transition: all 0.1s ease-in; - -o-transition: all 0.1s ease-in; + background-position: 0 100%; + outline: none; + -webkit-transition: all 0.1s ease-in; + -moz-transition: all 0.1s ease-in; + -o-transition: all 0.1s ease-in; } .share { - background-image:url('../img/share.png'); + background-image: url("../img/share.png"); } .sharemask { - background-image:url('../img/sharemask.png'); - background-position:top left; - background-repeat:no-repeat; - height:38px; - left:0; - position:absolute; - top:0; - width:38px; - z-index:10; - + background-image: url("../img/sharemask.png"); + background-position: top left; + background-repeat: no-repeat; + height: 38px; + left: 0; + position: absolute; + top: 0; + width: 38px; + z-index: 10; } .facebook { - background-image:url('../img/facebook.png'); + background-image: url("../img/facebook.png"); } .facebookmask { - background-image:url('../img/facebookmask.png'); - background-position:top left; - background-repeat:no-repeat; - height:38px; - left:0; - position:absolute; - top:0; - width:38px; - z-index:10; + background-image: url("../img/facebookmask.png"); + background-position: top left; + background-repeat: no-repeat; + height: 38px; + left: 0; + position: absolute; + top: 0; + width: 38px; + z-index: 10; } .twitter { - background-image:url('../img/twitter.png'); + background-image: url("../img/twitter.png"); } .twittermask { - background-image:url('../img/twittermask.png'); - background-position:top left; - background-repeat:no-repeat; - height:38px; - left:0; - position:absolute; - top:0; - width:38px; - z-index:10; + background-image: url("../img/twittermask.png"); + background-position: top left; + background-repeat: no-repeat; + height: 38px; + left: 0; + position: absolute; + top: 0; + width: 38px; + z-index: 10; } - - /* Footer */ - footer { - background-image:url('../img/fondfooter.png'); - background-position:top left; - background-repeat:repeat-x; - bottom:0; - color:#adadad; - padding-top:20px; - position:fixed; - text-align:center; - width:100%; - z-index:11; + background-image: url("../img/fondfooter.png"); + background-position: top left; + background-repeat: repeat-x; + bottom: 0; + color: #adadad; + padding-top: 20px; + position: fixed; + text-align: center; + width: 100%; + z-index: 11; } .footer_wrapper { - height:28px; + height: 28px; } -footer a{ - color:#adadad; - text-decoration:none; - -webkit-transition: all 0.1s ease-in; - -moz-transition: all 0.1s ease-in; - -o-transition: all 0.1s ease-in; +footer a { + color: #adadad; + text-decoration: none; + -webkit-transition: all 0.1s ease-in; + -moz-transition: all 0.1s ease-in; + -o-transition: all 0.1s ease-in; } footer a:focus, footer a:hover { - color:#f2084a; - outline:none; - -webkit-transition: all 0.1s ease-in; - -moz-transition: all 0.1s ease-in; - -o-transition: all 0.1s ease-in; + color: #f2084a; + outline: none; + -webkit-transition: all 0.1s ease-in; + -moz-transition: all 0.1s ease-in; + -o-transition: all 0.1s ease-in; } - - - - - /* Home content */ .logo { - padding-bottom:55px; + padding-bottom: 55px; } .labelurl { - color:#3f3f3f; - font-size:19px; - position:relative; + color: #3f3f3f; + font-size: 19px; + position: relative; } .champs { - margin-bottom:70px; - margin-top:8px; - position:relative; + margin-bottom: 70px; + margin-top: 8px; + position: relative; } .downloadBtn { - background-color:#3A3A3A; - border: 3px solid #a5a5a5; - border-radius:10px; - color:#dedede; - cursor:pointer; - display:inline-block; - font-weight:800; - padding: 12px 14px; - position:relative; - text-decoration:none; - -webkit-transition: all 0.1s ease-in; - -moz-transition: all 0.1s ease-in; - -o-transition: all 0.1s ease-in; + background-color: #3a3a3a; + border: 3px solid #a5a5a5; + border-radius: 10px; + color: #dedede; + cursor: pointer; + display: inline-block; + font-weight: 800; + padding: 12px 14px; + position: relative; + text-decoration: none; + -webkit-transition: all 0.1s ease-in; + -moz-transition: all 0.1s ease-in; + -o-transition: all 0.1s ease-in; } .downloadBtn:focus, .downloadBtn:hover { - background-color:#f2084a; - outline:none; - -webkit-transition: all 0.1s ease-in; - -moz-transition: all 0.1s ease-in; - -o-transition: all 0.1s ease-in; + background-color: #f2084a; + outline: none; + -webkit-transition: all 0.1s ease-in; + -moz-transition: all 0.1s ease-in; + -o-transition: all 0.1s ease-in; } .downloadBtn::-moz-focus-inner { - border:none; + border: none; } -.URLinput{ - background-color:#fff; - border: 3px solid #a5a5a5; - border-radius:10px; - color:#3F3F3F; - font-weight:800; - margin-right:8px; - min-width:426px; - padding: 12px 12px 12px 12px; - position:relative; +.URLinput { + background-color: #fff; + border: 3px solid #a5a5a5; + border-radius: 10px; + color: #3f3f3f; + font-weight: 800; + margin-right: 8px; + min-width: 426px; + padding: 12px 12px 12px 12px; + position: relative; } - .URLinput:focus { - border-color:#3A3A3A; - outline: none; + border-color: #3a3a3a; + outline: none; } -.URLinput:-webkit-input-placeholder{ - color:#c1cfcf; +.URLinput:-webkit-input-placeholder { + color: #c1cfcf; } -.URLinput:-moz-placeholder { - color:#c1cfcf; +.URLinput:-moz-placeholder { + color: #c1cfcf; } .combatiblelink { - background-image:url('../img/compatiblerouage.png'); - background-position:0 100%; - background-repeat:no-repeat; - color:#a5a5a5; - padding-bottom:10px; - padding-left:41px; - padding-top:10px; - position:relative; - text-decoration:none; - -webkit-transition: all 0.1s ease-in; - -moz-transition: all 0.1s ease-in; - -o-transition: all 0.1s ease-in; - z-index:10; + background-image: url("../img/compatiblerouage.png"); + background-position: 0 100%; + background-repeat: no-repeat; + color: #a5a5a5; + padding-bottom: 10px; + padding-left: 41px; + padding-top: 10px; + position: relative; + text-decoration: none; + -webkit-transition: all 0.1s ease-in; + -moz-transition: all 0.1s ease-in; + -o-transition: all 0.1s ease-in; + z-index: 10; } .combatiblelink:focus, .combatiblelink:hover { - background-position:0 0; - color:#f2084a; - outline:none; - -webkit-transition: all 0.1s ease-in; - -moz-transition: all 0.1s ease-in; - -o-transition: all 0.1s ease-in; + background-position: 0 0; + color: #f2084a; + outline: none; + -webkit-transition: all 0.1s ease-in; + -moz-transition: all 0.1s ease-in; + -o-transition: all 0.1s ease-in; } .bookmarklet { - border: 2px dotted; - color:gray; - padding:10px 30px; - position:relative; - text-decoration:none; - z-index:10; + border: 2px dotted; + color: gray; + padding: 10px 30px; + position: relative; + text-decoration: none; + z-index: 10; } .mp3 { - background-color:#cecece; - border-radius:6px; - color:#3f3f3f; - height:26px; - margin-top:12px; - position:relative; - text-align:left; - width:622px; + background-color: #cecece; + border-radius: 6px; + color: #3f3f3f; + height: 26px; + margin-top: 12px; + position: relative; + text-align: left; + width: 622px; } .mp3-inner { - padding:3px; + padding: 3px; } .audio:not(:checked), .audio:checked { - left: -9999px; - position: absolute; + left: -9999px; + position: absolute; } .audio:not(:checked) + label, .audio:checked + label { - cursor: pointer; - line-height:20px; - padding-left: 82px; - position: relative; + cursor: pointer; + line-height: 20px; + padding-left: 82px; + position: relative; } .audio:not(:checked) + label:before, .audio:checked + label:before, .audio:not(:checked) + label:after, .audio:checked + label:after { - content: ''; - position: absolute; + content: ""; + position: absolute; } .audio:not(:checked) + label:before, .audio:checked + label:before { - background: #ffffff; - border-radius: 6px; - height: 20px; - left:0; - top: -1px; - -webkit-transition: background-color .2s; - -moz-transition: background-color .2s; - -ms-transition: background-color .2s; - -o-transition: background-color .2s; - transition: background-color .2s; - width: 45px; + background: #ffffff; + border-radius: 6px; + height: 20px; + left: 0; + top: -1px; + -webkit-transition: background-color 0.2s; + -moz-transition: background-color 0.2s; + -ms-transition: background-color 0.2s; + -o-transition: background-color 0.2s; + transition: background-color 0.2s; + width: 45px; } .audio:not(:checked) + label:after, .audio:checked + label:after { - background: #3a3a3a; - border-radius: 6px; - height: 16px; - left: 2px; - top: 1px; - -webkit-transition: all .2s; - -moz-transition: all .2s; - -ms-transition: all .2s; - -o-transition: all .2s; - transition: all .2s; - width: 16px; + background: #3a3a3a; + border-radius: 6px; + height: 16px; + left: 2px; + top: 1px; + -webkit-transition: all 0.2s; + -moz-transition: all 0.2s; + -ms-transition: all 0.2s; + -o-transition: all 0.2s; + transition: all 0.2s; + width: 16px; } .audio:focus + label { - color:black; + color: black; } /* on checked */ .audio:checked + label:before { - background:#f2084a; + background: #f2084a; } .audio:checked + label:after { - background: #fff; - left: 27px; - top: 1px; + background: #fff; + left: 27px; + top: 1px; } .audio:checked + label .ui, .audio:not(:checked) + label .ui:before, .audio:checked + label .ui:after { - border-radius: 15px; - font-size: 11px; - font-weight: bold; - height:20px; - left: 3px; - line-height: 17px; - position: absolute; - -webkit-transition: all .2s; - -moz-transition: all .2s; - -ms-transition: all .2s; - -o-transition: all .2s; - transition: all .2s; - width: 45px; + border-radius: 15px; + font-size: 11px; + font-weight: bold; + height: 20px; + left: 3px; + line-height: 17px; + position: absolute; + -webkit-transition: all 0.2s; + -moz-transition: all 0.2s; + -ms-transition: all 0.2s; + -o-transition: all 0.2s; + transition: all 0.2s; + width: 45px; } .audio:not(:checked) + label .ui:before { - background-image:url('../img/mp3hover.png'); - background-position:right top; - background-repeat:no-repeat; - content: "no"; - left: 0; - min-width:56px; - padding-left:23px; - padding-top:2px; - -webkit-transition: all .2s; - -moz-transition: all .2s; - -ms-transition: all .2s; - -o-transition: all .2s; - transition: all .2s; + background-image: url("../img/mp3hover.png"); + background-position: right top; + background-repeat: no-repeat; + content: "no"; + left: 0; + min-width: 56px; + padding-left: 23px; + padding-top: 2px; + -webkit-transition: all 0.2s; + -moz-transition: all 0.2s; + -ms-transition: all 0.2s; + -o-transition: all 0.2s; + transition: all 0.2s; } .audio:checked + label .ui:after { - background-image:url('../img/mp3.png'); - background-position:right top; - background-repeat:no-repeat; - color: #fff; - content: "yes"; - -webkit-transition: all .2s; - -moz-transition: all .2s; - -ms-transition: all .2s; - -o-transition: all .2s; - transition: all .2s; - width:73px; + background-image: url("../img/mp3.png"); + background-position: right top; + background-repeat: no-repeat; + color: #fff; + content: "yes"; + -webkit-transition: all 0.2s; + -moz-transition: all 0.2s; + -ms-transition: all 0.2s; + -o-transition: all 0.2s; + transition: all 0.2s; + width: 73px; } .seekOptions { - display: none; - margin-top: 15px; - text-align: center; + display: none; + margin-top: 15px; + text-align: center; } .audio:checked ~ .seekOptions { - display: block; + display: block; } - /* Playlists */ .playlist-entry .thumb { - float: left; - margin-right: 1em; + float: left; + margin-right: 1em; } .playlist-entry { - clear: both; - padding-top: 2em; - text-align: left; - width: 600px; + clear: both; + padding-top: 2em; + text-align: left; + width: 600px; } .playlist-entry-title { - margin-top: 0; + margin-top: 0; } .playlist-entry-title a { - text-decoration: none; + text-decoration: none; } .playlist-entry-title a:hover { - text-decoration: underline; + text-decoration: underline; } .playlist-entry .downloadBtn { - border-width: 2px; - font-size: 16px; + border-width: 2px; + font-size: 16px; } - - - /* Supported websites list */ .logobis { - height:107px; - margin:0 auto 10px auto; - position:relative; - width:447px; + height: 107px; + margin: 0 auto 10px auto; + position: relative; + width: 447px; } - .logocompatible { - background-image:url('../img/logocompatible.png'); - background-position:0 0; - background-repeat:repeat-y; - display:block; - height:107px; - -webkit-transition: all 0.1s ease-in; - -moz-transition: all 0.1s ease-in; - -o-transition: all 0.1s ease-in; - width:447px; + background-image: url("../img/logocompatible.png"); + background-position: 0 0; + background-repeat: repeat-y; + display: block; + height: 107px; + -webkit-transition: all 0.1s ease-in; + -moz-transition: all 0.1s ease-in; + -o-transition: all 0.1s ease-in; + width: 447px; } .logocompatible:focus, .logocompatible:hover { - background-position:0 100%; - outline:none; - -webkit-transition: all 0.1s ease-in; - -moz-transition: all 0.1s ease-in; - -o-transition: all 0.1s ease-in; + background-position: 0 100%; + outline: none; + -webkit-transition: all 0.1s ease-in; + -moz-transition: all 0.1s ease-in; + -o-transition: all 0.1s ease-in; } - .logocompatiblemask { - background-image:url('../img/logocompatiblemask.png'); - background-position:0 100%; - background-repeat:no-repeat; - height:107px; - left:0; - position:absolute; - top:0; - width:447px; - z-index:10; + background-image: url("../img/logocompatiblemask.png"); + background-position: 0 100%; + background-repeat: no-repeat; + height: 107px; + left: 0; + position: absolute; + top: 0; + width: 447px; + z-index: 10; } .titre { - color:#383838; - font-family: 'Open Sans', sans-serif; - font-size:48px; - font-weight:300; + color: #383838; + font-family: "Open Sans", sans-serif; + font-size: 48px; + font-weight: 300; } .tripleliste { - margin-left:auto; - margin-right:auto; - margin-top:80px; - position:relative; - width:800px; + margin-left: auto; + margin-right: auto; + margin-top: 80px; + position: relative; + width: 800px; } - .tripleliste ul { - margin-bottom:1em; - margin-left:120px; - width:600px; + margin-bottom: 1em; + margin-left: 120px; + width: 600px; } .tripleliste ul li { - color:#383838; - float:left; - list-style-type:none; - position:relative; - text-align:left; - width:200px; + color: #383838; + float: left; + list-style-type: none; + position: relative; + text-align: left; + width: 200px; } html, body { - height:100%; - margin:0; + height: 100%; + margin: 0; } .wrapper { - -moz-box-sizing: border-box; - -webkit-box-sizing: border-box; - box-sizing: border-box; - display:table; - height:100%; - margin:auto; - padding-bottom:110px; + -moz-box-sizing: border-box; + -webkit-box-sizing: border-box; + box-sizing: border-box; + display: table; + height: 100%; + margin: auto; + padding-bottom: 110px; } .main { - display:table-cell; - vertical-align:middle; + display: table-cell; + vertical-align: middle; } .extractors { - padding-top:60px; + padding-top: 60px; } .extractors .wrapper { - padding-bottom:5em; + padding-bottom: 5em; } .logocompatible, .social a { - font-size:0; - text-decoration:none; + font-size: 0; + text-decoration: none; } .social a { - color:#D1D1D1; + color: #d1d1d1; } .logocompatible { - color: #4F4F4F + color: #4f4f4f; } h1 { - margin:0; + margin: 0; } .error { - max-width: 100ex; + max-width: 100ex; } .error p { - text-align:justify; + text-align: justify; } .smaller { - font-size:smaller; + font-size: smaller; } .thumb { - max-width:700px; + max-width: 700px; } .format { - text-align:left; + text-align: left; } .best { - margin-bottom: 1em; + margin-bottom: 1em; } .monospace { - font-family:monospace; + font-family: monospace; } .customBitrate { - width: 6ex; + width: 6ex; } .locales { - float: left; - padding-left: 1em; - padding-top: 1em; - text-align: left; + float: left; + padding-left: 1em; + padding-top: 1em; + text-align: left; } .locales a, .locales a:visited { - color: #696969; - text-decoration: none; + color: #696969; + text-decoration: none; } .supportedLocales { - background-color: #fff; - list-style-type: none; - margin: 0; - opacity: 0; - padding-left: 0; - transition: visibility 0.5s; - visibility: hidden; + background-color: #fff; + list-style-type: none; + margin: 0; + opacity: 0; + padding-left: 0; + transition: visibility 0.5s; + visibility: hidden; } .supportedLocales li { - border-bottom: thin solid #E1E1E1; + border-bottom: thin solid #e1e1e1; } .supportedLocales li:last-child { - border-bottom: none; + border-bottom: none; } .supportedLocales li a { - display: block; - padding: 1em; - padding-right: 2em; + display: block; + padding: 1em; + padding-right: 2em; } .supportedLocales li:hover { - background-color: #cecece; + background-color: #cecece; } .localesBtn { - background-color: transparent; - border: none; - cursor: pointer; - display: inline-block; - padding: 1em; + background-color: transparent; + border: none; + cursor: pointer; + display: inline-block; + padding: 1em; } .localesBtn:focus { - background-color: #fff; - pointer-events: none; + background-color: #fff; + pointer-events: none; } .localesBtn:focus + .supportedLocales { - opacity: 1; - visibility: visible; + opacity: 1; + visibility: visible; } @media (max-width: 640px) { - .formats, - .thumb { - width:90%; - } + .formats, + .thumb { + width: 90%; + } - .URLinput{ - min-width:0; - } + .URLinput { + min-width: 0; + } - .logo { - max-width:330px; - } + .logo { + max-width: 330px; + } - .logocompatible, - .logocompatible img { - max-width:447px; - } + .logocompatible, + .logocompatible img { + max-width: 447px; + } - .logocompatible, - .logo, - .champs, - .URLinput, - .mp3 { - height:auto; - margin:auto; - width:90%; - } + .logocompatible, + .logo, + .champs, + .URLinput, + .mp3 { + height: auto; + margin: auto; + width: 90%; + } - .logo { - margin-top:50px; - } + .logo { + margin-top: 50px; + } - .logocompatible img { - height: auto; - width:100%; - } + .logocompatible img { + height: auto; + width: 100%; + } - .downloadBtn { - margin-top: 0.3em; - } - .mp3 { - margin-bottom: 1em; - } + .downloadBtn { + margin-top: 0.3em; + } + .mp3 { + margin-bottom: 1em; + } - footer { - display:none; - } + footer { + display: none; + } - .tripleliste ul, - .tripleliste { - margin-left:auto; - margin-top:auto; - width:auto; - } + .tripleliste ul, + .tripleliste { + margin-left: auto; + margin-top: auto; + width: auto; + } - .logocompatiblemask { - background:none; - } + .logocompatiblemask { + background: none; + } - .logocompatible { - background-color:#4F4F4F; - background-image:none; - height:auto; - } + .logocompatible { + background-color: #4f4f4f; + background-image: none; + height: auto; + } - .logocompatiblemask, - .logobis { - width:auto; - } + .logocompatiblemask, + .logobis { + width: auto; + } - .logocompatiblemask { - position:static; - } + .logocompatiblemask { + position: static; + } - .logobis { - height:auto; - } + .logobis { + height: auto; + } - .titre { - margin:auto; - } + .titre { + margin: auto; + } - .error p { - padding:0.5em; - text-align:left; - } + .error p { + padding: 0.5em; + text-align: left; + } - .playlist-entry { - text-align: center; - width: auto; - } - - .playlist-entry .thumb { - float: none; - margin-right: 0; - } + .playlist-entry { + text-align: center; + width: auto; + } + .playlist-entry .thumb { + float: none; + margin-right: 0; + } } @media all and (display-mode: standalone) { - .bookmarklet_wrapper { - display: none; - } + .bookmarklet_wrapper { + 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; } diff --git a/templates/password.tpl b/templates/password.tpl index de412ba..3425f36 100644 --- a/templates/password.tpl +++ b/templates/password.tpl @@ -5,7 +5,8 @@

{t}This video is protected{/t}

{t}You need a password in order to download this video.{/t}

- + +

From 596d5e29942c7f63b2e41b10eed21456d778a12c Mon Sep 17 00:00:00 2001 From: Damien Senger Date: Sat, 13 Apr 2019 13:17:13 +0200 Subject: [PATCH 5/6] Adds and fixes labels for video.tpl inputs 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. The bit rate label was replaced by a real label announcing the purpose of the text input _Custom bitrate_. The existing unit indication is now using a `` attribute and it is linked to the input using an `aria-describedby` attribute. Also, the lack of label for the format conversion selectbox is fixed by using a specific `aria-label` attribute. 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://www.w3.org/TR/WCAG20-TECHS/ARIA1.html --- templates/video.tpl | 7 ++++--- 1 file changed, 4 insertions(+), 3 deletions(-) diff --git a/templates/video.tpl b/templates/video.tpl index cdf4242..d7b1f83 100644 --- a/templates/video.tpl +++ b/templates/video.tpl @@ -83,14 +83,15 @@ {if $config->convertAdvanced} - {foreach $config->convertAdvancedFormats as $format} {/foreach} {t}with{/t} - - + + + {t}kbit/s audio{/t}

{/if}
From a5fbb740940b8c1ea549cadbadedb3a445932b1c Mon Sep 17 00:00:00 2001 From: hiwelo Date: Thu, 18 Apr 2019 23:04:22 +0200 Subject: [PATCH 6/6] Fixes attributes used to link label & form inputs --- templates/index.tpl | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/templates/index.tpl b/templates/index.tpl index 7d0e2de..1f3c252 100644 --- a/templates/index.tpl +++ b/templates/index.tpl @@ -25,8 +25,8 @@ {t}Audio only (MP3){/t}
- - + +