596d5e2994
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
104 lines
4.5 KiB
Smarty
104 lines
4.5 KiB
Smarty
{include file="inc/head.tpl"}
|
|
<div class="wrapper">
|
|
<div itemscope itemtype="http://schema.org/VideoObject">
|
|
<main class="main">
|
|
{include file="inc/logo.tpl"}
|
|
<p id="download_intro">{t}You are going to download{/t}<i itemprop="name">
|
|
<a itemprop="url" id="video_link"
|
|
href="{$video->webpage_url}">
|
|
{$video->title}</a></i>.
|
|
</p>
|
|
{if isset($video->thumbnail)}
|
|
<img itemprop="thumbnailUrl" class="thumb" src="{$video->thumbnail}" alt="" />
|
|
{/if}
|
|
{if isset($video->description)}
|
|
<meta itemprop="description" content="{$video->description|escape}" />
|
|
{/if}
|
|
{if isset($video->upload_date)}
|
|
<meta itemprop="uploadDate" content="{$video->upload_date}" />
|
|
{/if}
|
|
<br/>
|
|
<form action="{path_for name="redirect"}">
|
|
<input type="hidden" name="url" value="{$video->webpage_url}" />
|
|
{if isset($video->formats)}
|
|
<h3><label for="format">{t}Available formats:{/t}</label></h3>
|
|
{if $config->uglyUrls}
|
|
<input type="hidden" name="page" value="redirect" />
|
|
{/if}
|
|
<select name="format" id="format" class="formats monospace">
|
|
<optgroup label="{t}Generic formats{/t}">
|
|
<option value="best{$protocol}">
|
|
{strip}
|
|
{t}Best{/t} ({$video->ext})
|
|
{/strip}
|
|
</option>
|
|
{if $config->remux}
|
|
<option value="bestvideo+bestaudio">
|
|
{t}Remux best video with best audio{/t}
|
|
</option>
|
|
{/if}
|
|
<option value="worst{$protocol}">
|
|
{t}Worst{/t}
|
|
</option>
|
|
</optgroup>
|
|
<optgroup label="{t}Detailed formats{/t}" class="monospace">
|
|
{foreach $video->formats as $format}
|
|
{if $config->stream || $format->protocol|in_array:array('http', 'https')}
|
|
{strip}
|
|
<option value="{$format->format_id}">
|
|
{$format->ext}
|
|
{for $foo=1 to (5 - ($format->ext|strlen))}
|
|
|
|
{/for}
|
|
{if isset($format->width)}
|
|
{$format->width}x{$format->height}
|
|
{for $foo=1 to (10 - (("{$format->width}x{$format->height}")|strlen))}
|
|
|
|
{/for}
|
|
{else}
|
|
{for $foo=1 to 10}
|
|
|
|
{/for}
|
|
{/if}
|
|
{if isset($format->filesize)}
|
|
{($format->filesize/1000000)|round:2} MB
|
|
{for $foo=1 to (7 - (($format->filesize/1000000)|round:2|strlen))}
|
|
|
|
{/for}
|
|
{else}
|
|
{for $foo=1 to 10}
|
|
|
|
{/for}
|
|
{/if}
|
|
{if isset($format->format_note)}
|
|
{$format->format_note}
|
|
{/if}
|
|
({$format->format_id})
|
|
</option>
|
|
{/strip}
|
|
{/if}
|
|
{/foreach}
|
|
</optgroup>
|
|
</select><br/><br/>
|
|
{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" aria-label="{t}Format to convert to{/t}">
|
|
{foreach $config->convertAdvancedFormats as $format}
|
|
<option>{$format}</option>
|
|
{/foreach}
|
|
</select>
|
|
{t}with{/t}
|
|
<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/>
|
|
</form>
|
|
{else}
|
|
<input class="downloadBtn" type="submit" value="{t}Download{/t}" /><br/>
|
|
{/if}
|
|
</main>
|
|
</div>
|
|
{include file="inc/footer.tpl"}
|