alltube/templates/password.tpl
Damien Senger ce07a621e5
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/
2019-04-13 13:11:09 +02:00

14 lines
604 B
Smarty

{include file='inc/head.tpl'}
<div class="wrapper">
<main class="main">
{include file="inc/logo.tpl"}
<h2>{t}This video is protected{/t}</h2>
<p>{t}You need a password in order to download this video.{/t}</p>
<form action="" method="POST">
<label class="sr-only" for="password">{t}Video password{/t}</label>
<input class="URLinput" type="password" name="password" id="password" />
<br/><br/>
<input class="downloadBtn" type="submit" value="{t}Download{/t}" />
</form>
</main>
{include file='inc/footer.tpl'}