servers
/
alltube
mirror of https://github.com/Rudloff/alltube.git
1
0
Fork 0
Code Issues Releases Wiki Activity

Adds a label to social sharing links 

According to the WCAG (success criterias 2.4.4 and 4.1.2), the purpose
of each link should be determined from the link text alone or from the
link text together with its programmatically determined link context.

In this case, because there is no text content, we are using
`aria-label` to have an explicit purpose announced to users of
assisting technologies.

Resources:
- https://dequeuniversity.com/rules/axe/3.2/link-name
- https://www.w3.org/TR/WCAG21/#link-purpose-in-context
- https://www.w3.org/TR/WCAG20-TECHS/ARIA8.html
This commit is contained in:
Damien Senger 2019-04-13 12:19:11 +02:00
parent aa04d773ef
commit 60350747a5
No known key found for this signature in database
GPG Key ID: A718C115E3DFF8B7
1 changed files with 6 additions and 3 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

9
templates/inc/header.tpl
View File

@ -18,9 +18,12 @@
</div>
{/if}
<div class="social">
<a class="twitter" rel="noopener" href="http://twitter.com/home?status={base_url|urlencode}" title="{t}Share on Twitter{/t}" target="_blank">
<div class="twittermask"></div></a>
<a class="facebook" rel="noopener" href="https://www.facebook.com/sharer/sharer.php?u={base_url|urlencode}" title="{t}Share on Facebook{/t}" target="_blank"><div class="facebookmask"></div></a>
<a class="twitter" rel="noopener" href="http://twitter.com/home?status={base_url|urlencode}" title="{t}Share on Twitter{/t}" target="_blank" aria-label="{t}Share on Twitter{/t} {t}(opens a new window){/t}">
<div class="twittermask"></div>
</a>
<a class="facebook" rel="noopener" href="https://www.facebook.com/sharer/sharer.php?u={base_url|urlencode}" title="{t}Share on Facebook{/t}" target="_blank" aria-label="{t}Share on Facebook{/t} {t}(opens a new window){/t}">
<div class="facebookmask"></div>
</a>
</div>
</header>
<div class="wrapper">