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

File diff suppressed because it is too large Load diff

View file

@ -5,7 +5,8 @@
<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">
<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/>
<input class="downloadBtn" type="submit" value="{t}Download{/t}" />
</form>