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 `<span>` 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
This commit is contained in:
Damien Senger 2019-04-13 13:17:13 +02:00
parent ce07a621e5
commit 596d5e2994
No known key found for this signature in database
GPG key ID: A718C115E3DFF8B7

View file

@ -83,14 +83,15 @@
{if $config->convertAdvanced}
<input type="checkbox" name="customConvert" id="customConvert"/>
<label for="customConvert">{t}Convert into a custom format:{/t}</label>
<select title="Custom format" name="customFormat">
<select title="Custom format" name="customFormat" aria-label="{t}Format to convert to{/t}">
{foreach $config->convertAdvancedFormats as $format}
<option>{$format}</option>
{/foreach}
</select>
{t}with{/t}
<input type="number" value="{$config->audioBitrate}" title="Custom bitrate" class="customBitrate"name="customBitrate" id="customBitrate" />
<label for="customBitrate">{t}kbit/s audio{/t}</label>
<label for="customBitrate" class="sr-only">{t}Bit rate{/t}</label>
<input type="number" value="{$config->audioBitrate}" title="Custom bitrate" class="customBitrate"name="customBitrate" id="customBitrate" aria-describedby="customBitrateUnit" />
<span id="customBitrateUnit">{t}kbit/s audio{/t}</span>
<br/><br/>
{/if}
<input class="downloadBtn" type="submit" value="{t}Download{/t}" /><br/>