Improve accessibility

- Fixed some interactive elements which weren't focusable (using 'tabindex')
- Label interactive elements which weren't labelled
- Slightly increase contrast of the grey text in the top navigation bars to reach level AA in the WCAG rating system and increase visibility of the text
This commit is contained in:
erciccione 2020-09-01 12:02:05 +02:00
parent 9d40ef739e
commit 1d5518f74c
No known key found for this signature in database
GPG key ID: 762AF8C608E56CDF
10 changed files with 55 additions and 50 deletions

View file

@ -761,3 +761,8 @@ blog:
tags:
notags: There are no posts for this tag.
accessibility:
arrowup: Go back to the top of the page
guiscreen: A screenshot of the Monero GUI wallet. It shows the wallet's balance and a navigation menu on the left, and a form for sending XMR on the right.
cliscreen: CLI wallet screenshot

View file

@ -10,7 +10,7 @@
{% if item.subfolderitems %}
{%assign counter=counter | plus: 1%}
<label for="drop{{counter}}">{{item.title}}<div class="arrow-down"></div></label>
<input class="burger-checkdropdown" id="drop{{counter}}" type="checkbox">
<input class="burger-checkdropdown" id="drop{{counter}}" type="checkbox" tabindex="0">
<div class="dropdown-content">
{% for entry in item.subfolderitems %}
<a href="{{site.baseurl}}/{{ entry.url }}">{{ entry.page }}</a>
@ -70,7 +70,7 @@
<a href="https://github.com/monero-project/meta/blob/master/VULNERABILITY_RESPONSE_PROCESS.md" class="top-link">Vulnerability Response</a>
<a href="https://translate.getmonero.org" class="top-link">Translate</a>
<div href="#" class="dropdown top-link language-change">
<input class="burger-checkdropdown" id="langdrop" type="checkbox">
<input class="burger-checkdropdown" id="langdrop" type="checkbox" tabindex="0">
<label for="langdrop">{{ site.data.languages.langs.[site.lang] }}
<div class="arrow-down"></div></label>
<div class="dropdown-content text-center">
@ -97,7 +97,7 @@
<div class="col dropdown nav-item">
{% if item.subfolderitems %}
<label for="desktopdrop1">{{item.title}}<div class="arrow-down"></div></label>
<input class="burger-checkdropdown" id="desktopdrop1" type="checkbox">
<input class="burger-checkdropdown" id="desktopdrop1" type="checkbox" tabindex="0">
<div class="dropdown-content">
{% for entry in item.subfolderitems %}
<a href="{{site.baseurl}}/{{ entry.url }}">{{ entry.page }}</a>
@ -126,7 +126,7 @@
{% endif %}"><img src="/img/monero-logo.png" alt="Monero Logo" class="monero-logo"></a>
</div>
<div class="dropdown col-xs-6 text-center mob-language-change">
<input class="burger-checkdropdown" id="moblangdrop" type="checkbox">
<input class="burger-checkdropdown" id="moblangdrop" type="checkbox" tabindex="0">
<label for="moblangdrop"><img src="/img/language.png" alt="Lang" class="icon-language"/><div class="arrow-down"></div></label>
<div class="mob dropdown-content text-center">
<p class="mob-lang-change mob-lang-selected">{{ site.data.languages.langs.[site.lang] }}</p>

View file

@ -40,7 +40,7 @@ title: titles.blogbytag
<!-- Full block-->
<div class="info-block">
<div class="feed">
<a href="/feed.xml"><span class="feed-pic"></span></a>
<a href="/feed.xml" aria-label="Feed logo"><span class="feed-pic"></span></a>
<h2>{% t blog.allposts %}</h2>
</div>
{% for post in paginator.posts %}

View file

@ -10,19 +10,19 @@ permalink: /community/hangouts/index.html
<section class="hangouts-social container">
<ul class="row center-xs">
<li>
<a class="ext-noicon" href="https://twitter.com/monero" target="_blank" rel="noreferrer noopener"><div class="social-icon twitter"></div></a>
<a class="ext-noicon" href="https://twitter.com/monero" target="_blank" rel="noreferrer noopener" aria-label="Twitter logo"><div class="social-icon twitter"></div></a>
</li>
<li>
<a class="ext-noicon" href="https://reddit.com/r/Monero" target="_blank" rel="noreferrer noopener"><div class="social-icon reddit"></div></a>
<a class="ext-noicon" href="https://reddit.com/r/Monero" target="_blank" rel="noreferrer noopener" aria-label="Reddit logo"><div class="social-icon reddit"></div></a>
</li>
<li>
<a class="ext-noicon" href="https://www.facebook.com/monerocurrency/" target="_blank" rel="noreferrer noopener"><div class="social-icon facebook"></div></a>
<a class="ext-noicon" href="https://www.facebook.com/monerocurrency/" target="_blank" rel="noreferrer noopener" aria-label="Facebook logo"><div class="social-icon facebook"></div></a>
</li>
<li>
<a class="ext-noicon" href="https://github.com/monero-project" target="_blank" rel="noreferrer noopener"><div class="social-icon github"></div></a>
<a class="ext-noicon" href="https://github.com/monero-project" target="_blank" rel="noreferrer noopener" aria-label="GitHub logo"><div class="social-icon github"></div></a>
</li>
<li>
<a class="ext-noicon" href="https://repo.getmonero.org/users/monero-project/projects" target="_blank" rel="noreferrer noopener"><div class="social-icon gitlab"></div></a>
<a class="ext-noicon" href="https://repo.getmonero.org/users/monero-project/projects" target="_blank" rel="noreferrer noopener" aria-label="Gitlab logo"><div class="social-icon gitlab"></div></a>
</li>
</ul>
</section>

View file

@ -17,7 +17,7 @@ permalink: /community/sponsorships/index.html
<div class="row center-xs">
<div class="col">
<h2>My Monero</h2>
<a href="https://mymonero.com/#/" target="_blank" rel="noreferrer noopener"><img src="/img/mymonero.png"></a>
<a href="https://mymonero.com/#/" target="_blank" rel="noreferrer noopener"><img src="/img/mymonero.png" alt="MyMonero logo"></a>
</div>
</div>
</div>
@ -27,7 +27,7 @@ permalink: /community/sponsorships/index.html
<div class="row center-xs">
<div class="col">
<h2>JetBrains</h2>
<a href="http://www.jetbrains.com/"><img src="/img/jetbrains.png"></a>
<a href="http://www.jetbrains.com/"><img src="/img/jetbrains.png" alt="jetBrains logo"></a>
</div>
</div>
</div>
@ -37,7 +37,7 @@ permalink: /community/sponsorships/index.html
<div class="row center-xs">
<div class="col">
<h2>Dome9 Security</h2>
<a href="https://dome9.com/"><img src="/img/dome9.png"></a>
<a href="https://dome9.com/"><img src="/img/dome9.png" alt="Dome9 security logo"></a>
</div>
</div>
</div>
@ -49,7 +49,7 @@ permalink: /community/sponsorships/index.html
<div class="row center-xs">
<div class="col">
<h2>Kitware</h2>
<a href="https://www.kitware.com/"><img src="/img/kitware.png"></a>
<a href="https://www.kitware.com/"><img src="/img/kitware.png" alt="Kitware logo"></a>
</div>
</div>
</div>
@ -60,7 +60,7 @@ permalink: /community/sponsorships/index.html
<div class="row center-xs">
<div class="col">
<h2>Fork Networking</h2>
<a href="http://www.forked.net"><img src="/img/forked_logo.png"></a>
<a href="http://www.forked.net"><img src="/img/forked_logo.png" alt="Fork Networking logo"></a>
</div>
</div>
</div>
@ -71,7 +71,7 @@ permalink: /community/sponsorships/index.html
<div class="row center-xs">
<div class="col">
<h2>Araxis</h2>
<a href="https://www.araxis.com/"><img src="/img/araxis.png"></a>
<a href="https://www.araxis.com/"><img src="/img/araxis.png" alt="Araxis logo"></a>
</div>
</div>
</div>
@ -83,7 +83,7 @@ permalink: /community/sponsorships/index.html
<div class="row center-xs">
<div class="col">
<h2>Navicat</h2>
<a href="https://www.navicat.com"><img src="/img/navicat.png"></a>
<a href="https://www.navicat.com"><img src="/img/navicat.png" alt="Navicat logo"></a>
</div>
</div>
</div>
@ -93,7 +93,7 @@ permalink: /community/sponsorships/index.html
<div class="row center-xs">
<div class="col">
<h2>Symas</h2>
<a href="https://symas.com/"><img src="/img/symas.png"></a>
<a href="https://symas.com/"><img src="/img/symas.png" alt="Symas logo"></a>
</div>
</div>
</div>

View file

@ -27,17 +27,17 @@ permalink: /community/team/index.html
</div>
<div class="row center-xs icons">
{% if member.github %}
<a class="ext-noicon" href="{{member.github}}" target="_blank" rel="noreferrer, noopener">
<a class="ext-noicon" href="{{member.github}}" target="_blank" rel="noreferrer, noopener" aria-label="GitHub logo">
<div class="col social-icon github"></div>
</a>
{%endif%}
{% if member.twitter %}
<a class="ext-noicon" href="{{member.twitter}}" target="_blank" rel="noreferrer, noopener">
<a class="ext-noicon" href="{{member.twitter}}" target="_blank" rel="noreferrer, noopener" aria-label="Twitter logo">
<div class="col social-icon twitter"></div>
</a>
{%endif%}
{% if member.reddit %}
<a class="ext-noicon" href="{{member.reddit}}" target="_blank" rel="noreferrer, noopener">
<a class="ext-noicon" href="{{member.reddit}}" target="_blank" rel="noreferrer, noopener" aria-label="Reddit logo">
<div class="col social-icon reddit"></div>
</a>
{%endif%}
@ -73,17 +73,17 @@ permalink: /community/team/index.html
</div>
<div class="row center-xs icons">
{% if member.github %}
<a class="ext-noicon" href="{{member.github}}" target="_blank" rel="noreferrer, noopener">
<a class="ext-noicon" href="{{member.github}}" target="_blank" rel="noreferrer, noopener" aria-label="GitHub logo">
<div class="col social-icon github"></div>
</a>
{%endif%}
{% if member.twitter %}
<a class="ext-noicon" href="{{member.twitter}}" target="_blank" rel="noreferrer, noopener">
<a class="ext-noicon" href="{{member.twitter}}" target="_blank" rel="noreferrer, noopener" aria-label="Twitter logo">
<div class="col social-icon twitter"></div>
</a>
{%endif%}
{% if member.reddit %}
<a class="ext-noicon" href="{{member.reddit}}" target="_blank" rel="noreferrer, noopener">
<a class="ext-noicon" href="{{member.reddit}}" target="_blank" rel="noreferrer, noopener" aria-label="Reddit logo">
<div class="col social-icon reddit"></div>
</a>
{%endif%}
@ -110,17 +110,17 @@ permalink: /community/team/index.html
</div>
<div class="row center-xs icons">
{% if member.github %}
<a class="ext-noicon" href="{{member.github}}" target="_blank" rel="noreferrer, noopener">
<a class="ext-noicon" href="{{member.github}}" target="_blank" rel="noreferrer, noopener" aria-label="GitHub logo">
<div class="col social-icon github"></div>
</a>
{%endif%}
{% if member.twitter %}
<a class="ext-noicon" href="{{member.twitter}}" target="_blank" rel="noreferrer, noopener">
<a class="ext-noicon" href="{{member.twitter}}" target="_blank" rel="noreferrer, noopener" aria-label="Twitter logo">
<div class="col social-icon twitter"></div>
</a>
{%endif%}
{% if member.reddit %}
<a class="ext-noicon" href="{{member.reddit}}" target="_blank" rel="noreferrer, noopener">
<a class="ext-noicon" href="{{member.reddit}}" target="_blank" rel="noreferrer, noopener" aria-label="Reddit logo">
<div class="col social-icon reddit"></div>
</a>
{%endif%}
@ -157,17 +157,17 @@ permalink: /community/team/index.html
{% endif %}
<div class="row center-xs icons">
{% if member.github %}
<a class="ext-noicon" href="{{member.github}}" target="_blank" rel="noreferrer, noopener">
<a class="ext-noicon" href="{{member.github}}" target="_blank" rel="noreferrer, noopener" aria-label="GitHub logo">
<div class="col social-icon github"></div>
</a>
{%endif%}
{% if member.twitter %}
<a class="ext-noicon" href="{{member.twitter}}" target="_blank" rel="noreferrer, noopener">
<a class="ext-noicon" href="{{member.twitter}}" target="_blank" rel="noreferrer, noopener" aria-label="Twitter logo">
<div class="col social-icon twitter"></div>
</a>
{%endif%}
{% if member.reddit %}
<a class="ext-noicon" href="{{member.reddit}}" target="_blank" rel="noreferrer, noopener">
<a class="ext-noicon" href="{{member.reddit}}" target="_blank" rel="noreferrer, noopener" aria-label="Reddit logo">
<div class="col social-icon reddit"></div>
</a>
{%endif%}
@ -194,17 +194,17 @@ permalink: /community/team/index.html
</div>
<div class="row center-xs icons">
{% if member.github %}
<a class="ext-noicon" href="{{member.github}}" target="_blank" rel="noreferrer, noopener">
<a class="ext-noicon" href="{{member.github}}" target="_blank" rel="noreferrer, noopener" aria-label="GitHub logo">
<div class="col social-icon github"></div>
</a>
{%endif%}
{% if member.twitter %}
<a class="ext-noicon" href="{{member.twitter}}" target="_blank" rel="noreferrer, noopener">
<a class="ext-noicon" href="{{member.twitter}}" target="_blank" rel="noreferrer, noopener" aria-label="Twitter logo">
<div class="col social-icon twitter"></div>
</a>
{%endif%}
{% if member.reddit %}
<a class="ext-noicon" href="{{member.reddit}}" target="_blank" rel="noreferrer, noopener">
<a class="ext-noicon" href="{{member.reddit}}" target="_blank" rel="noreferrer, noopener" aria-label="Reddit logo">
<div class="col social-icon reddit"></div>
</a>
{%endif%}

View file

@ -1850,7 +1850,7 @@ img.monero-logo {
}
.topnav .topnav-list a, .topnav .topnav-list label {
color: #7a7a7a;
color: #6B6B6B;
text-decoration: none;
-webkit-transition: all ease-out .1s;
-moz-transition: all ease-out .1s;

View file

@ -48,7 +48,7 @@ permalink: /downloads/index.html
<i>{% t downloads.gui_intro %}</i>
</div>
<div class="col-md-7 col-sm-12 align-blocks">
<img class="screen" src={% if site.lang == "en" %}"/img/downloads/gui.png"{% else %}"/img/downloads/{{site.lang}}/gui.png"{% endif %}>
<img class="screen" alt="{% t accessibility.guiscreen %}" src={% if site.lang == "en" %}"/img/downloads/gui.png"{% else %}"/img/downloads/{{site.lang}}/gui.png"{% endif %}>
</div>
<div class="col-md-5 col-sm-12 align-blocks">
<ul class="logo">
@ -137,7 +137,7 @@ permalink: /downloads/index.html
<i>{% t downloads.cli_intro %}</i>
</div>
<div class="col-md-7 col-sm-12 align-blocks">
<img class="screen" src={% if site.lang == "en" %}"/img/downloads/cli.png"{% else %}"/img/downloads/{{site.lang}}/cli.png"{% endif %}>
<img class="screen" alt="{% t accessibility.cliscreen %}" src={% if site.lang == "en" %}"/img/downloads/cli.png"{% else %}"/img/downloads/{{site.lang}}/cli.png"{% endif %}>
</div>
<div class="col-md-5 col-sm-12 align-blocks">
<ul class="logo">
@ -239,33 +239,33 @@ permalink: /downloads/index.html
<td><img src="/img/cakewallet.png" alt="Cake Wallet Logo"><a href="https://cakewallet.com/">Cake Wallet</a></td>
<td><span class="icon-android"></span><span class="icon-apple"></span></td>
<td>X</td>
<td><a class="ext-noicon" href="https://github.com/cake-tech/cake_wallet"><span class="icon-github"></span></a></td>
<td><a class="ext-noicon" href="https://github.com/cake-tech/cake_wallet" aria-label="GitHub icon"><span class="icon-github"></span></a></td>
</tr>
<tr>
<td><img src="/img/Monerujo-wallet.png" alt="Monerujo logo"><a href="https://monerujo.io/">Monerujo</a></td>
<td><span class="icon-android"></span></td>
<td>X</td>
<td><a class="ext-noicon" href="https://github.com/m2049r/xmrwallet"><span class="icon-github"></span></a></td>
<td><a class="ext-noicon" href="https://github.com/m2049r/xmrwallet" aria-label="GitHub icon"><span class="icon-github"></span></a></td>
</tr>
<tr>
<td><img src="/img/mymonero.png" alt="Mymonero logo" style="height: 15px;"><a href="https://mymonero.com/">MyMonero</a></td>
<td><span class="icon-apple"></span></td>
<td><span title="Browser" class="icon-browser"></span><span class="icon-linux"></span><span class="icon-windows"></span><span class="icon-apple"></span></td>
<td><a class="ext-noicon" href="https://github.com/mymonero"><span class="icon-github"></span></a></td>
<td><a class="ext-noicon" href="https://github.com/mymonero" aria-label="GitHub icon"><span class="icon-github"></span></a></td>
</tr>
<tr>
<td><img src="/img/edge-wallet.png" alt="Edge Logo"><a href="https://edge.app/">Edge</a></td>
<td><span class="icon-android"></span><span class="icon-apple"></span></td>
<td>X</td>
<td><a class="ext-noicon" href="https://github.com/EdgeApp"><span class="icon-github"></span></a></td>
<td><a class="ext-noicon" href="https://github.com/EdgeApp" aria-label="GitHub icon"><span class="icon-github"></span></a></td>
</tr>
</table>
<div class="row between-xs mob-wallets mobile-only">
<ul>
<li><a class="ext-noicon" href="https://cakewallet.io"><img style="width: 50px" src="/img/cakewallet.png" alt="Cake Wallet Logo">Cake Wallet</a></li>
<li><a class="ext-noicon" href="https://monerujo.io"><img src="/img/Monerujo-wallet.png" alt="Monerujo Logo">Monerujo</a></li>
<li><a class="ext-noicon" href="https://mymonero.com"><img src="/img/mymonero.png" alt="MyMonero Logo">MyMonero</a></li>
<li><a class="ext-noicon" href="https://edge.app/"><img src="/img/edge-wallet.png" alt="Edge Logo">Edge</a></li>
<li><a class="ext-noicon" href="https://cakewallet.io" aria-label="GitHub icon"><img style="width: 50px" src="/img/cakewallet.png" alt="Cake Wallet Logo">Cake Wallet</a></li>
<li><a class="ext-noicon" href="https://monerujo.io" aria-label="GitHub icon"><img src="/img/Monerujo-wallet.png" alt="Monerujo Logo">Monerujo</a></li>
<li><a class="ext-noicon" href="https://mymonero.com" aria-label="GitHub icon"><img src="/img/mymonero.png" alt="MyMonero Logo">MyMonero</a></li>
<li><a class="ext-noicon" href="https://edge.app/" aria-label="GitHub icon"><img src="/img/edge-wallet.png" alt="Edge Logo">Edge</a></li>
</ul>
</div>
</div>
@ -297,15 +297,15 @@ permalink: /downloads/index.html
</div>
</div>
<div class="row mob-wallets center-xs">
<a class="ext-noicon" href="https://www.ledger.com/monero-wallet/"><img src="/img/ledger.png"></a>
<a class="ext-noicon" href="https://wiki.trezor.io/Monero_(XMR)"><img src="/img/trezor.png"></a>
<a class="ext-noicon" href="https://www.ledger.com/monero-wallet/"><img src="/img/ledger.png" alt="ledger logo"></a>
<a class="ext-noicon" href="https://wiki.trezor.io/Monero_(XMR)"><img src="/img/trezor.png" alt="Trezor logo"></a>
</div>
<div class="row mob-wallets center-xs">
<a class="ext-noicon" href="https://github.com/monero-project/kastelo"><img src="/img/kastelo.png"></a>
<a class="ext-noicon" href="https://github.com/monero-project/kastelo"><img src="/img/kastelo.png" alt="Kastelo logo"></a>
</div>
</div>
<!-- End 'Hardware Wallets' -->
</section>
</div>
<a href="#" class="arrow-up"><i></i></a>
<a href="#" class="arrow-up" aria-label="{% t accessibility.arrowup %}"><i></i></a>
</div>

View file

@ -274,6 +274,6 @@ permalink: /get-started/faq/index.html
</div>
</div>
<!-- END full block-->
<a href="#" class="arrow-up"><i></i></a>
<a aria-label="{% t accessibility.arrowup %}" href="#" class="arrow-up"><i></i></a>
</div>
</section>

View file

@ -10,7 +10,7 @@ permalink: index.html
<div class="col-lg-7 col-md-7 col-xs-12 main-video">
<div class="monero-video">
<!--iframe width="560" height="315" src="https://www.youtube.com/embed/TZi9xx6aiuY" frameborder="0" allowfullscreen></iframe-->
<video controls poster="/img/monero-community.png" preload="metadata">
<video controls poster="/img/monero-community.png" preload="metadata" tabindex="0" aria-label="Monero community video">
{% if site.lang != 'pt-br' and site.lang != 'ru' %}
<source src="/media/Monero_Promo.m4v">
{% else %}