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:
parent
ce07a621e5
commit
596d5e2994
1 changed files with 4 additions and 3 deletions
|
@ -83,14 +83,15 @@
|
||||||
{if $config->convertAdvanced}
|
{if $config->convertAdvanced}
|
||||||
<input type="checkbox" name="customConvert" id="customConvert"/>
|
<input type="checkbox" name="customConvert" id="customConvert"/>
|
||||||
<label for="customConvert">{t}Convert into a custom format:{/t}</label>
|
<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}
|
{foreach $config->convertAdvancedFormats as $format}
|
||||||
<option>{$format}</option>
|
<option>{$format}</option>
|
||||||
{/foreach}
|
{/foreach}
|
||||||
</select>
|
</select>
|
||||||
{t}with{/t}
|
{t}with{/t}
|
||||||
<input type="number" value="{$config->audioBitrate}" title="Custom bitrate" class="customBitrate"name="customBitrate" id="customBitrate" />
|
<label for="customBitrate" class="sr-only">{t}Bit rate{/t}</label>
|
||||||
<label for="customBitrate">{t}kbit/s audio{/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/>
|
<br/><br/>
|
||||||
{/if}
|
{/if}
|
||||||
<input class="downloadBtn" type="submit" value="{t}Download{/t}" /><br/>
|
<input class="downloadBtn" type="submit" value="{t}Download{/t}" /><br/>
|
||||||
|
|
Loading…
Reference in a new issue