privacyguides/privacytools.io
Archived
1
0
Fork 0
Code Issues 304 Pull Requests 47 Activity

Adding accessibility features

Browse Source 
Made the theme button toggable by keyboard
Added aria-label to many <a> without any text (usually, they contains Font Awesome icons)
Added aria-hidden whenever necessary
Labelled the "Copy URL and Description" contained in footer
Added an hidden label for the menu toggle for mobile accessibility
Changed some colors to meet the Color Contrast AA level: https://www.w3.org/TR/UNDERSTANDING-WCAG20/visual-audio-contrast-contrast.html
This commit is contained in:
CristianAUnisa
2021-06-26 20:26:05 +02:00
parent 06982df16c
commit 91a1111182
54 changed files with 392 additions and 307 deletions
Download Patch File Download Diff File Expand all files Collapse all files

8
_includes/sections/vpn.html
View File

@@ -1,4 +1,4 @@
<h1 id="vpn" class="anchor"><a href="#vpn"><i class="fas fa-link anchor-icon"></i></a> Recommended VPN Services</h1>
<h1 id="vpn" class="anchor"><a href="#vpn" aria-label="Recommended VPN Services' section"><i aria-hidden="true" class="fas fa-link anchor-icon"></i></a> Recommended VPN Services</h1>
<div class="alert alert-success" role="alert">
<strong>Our recommended providers are outside the US, use encryption, accept Bitcoin, support OpenVPN, and have a no logging policy. <a href="/providers/vpn/#criteria">Read our full list of criteria for more information</a>.</strong>
@@ -18,7 +18,7 @@
</div>
<div class="col">
<h2 id="mullvad" class="anchor">
<a href="#mullvad"><i class="fas fa-link anchor-icon"></i></a> Mullvad
<a href="#mullvad" aria-label="Mullvad's section"><i aria-hidden="true" class="fas fa-link anchor-icon"></i></a> Mullvad
{% include badge.html color="info" text="EUR €60/y" %}
</h2>
<p><strong><a href="https://mullvad.net/">Mullvad.net</a> </strong> is a fast and inexpensive VPN with a serious focus on transparency and security. They have been in operation since <strong>2009</strong>. Mullvad is based in <span class="flag-icon flag-icon-se"></span> Sweden and does not have a free trial.</p>
@@ -53,7 +53,7 @@
</div>
<div class="col">
<h2 id="protonvpn" class="anchor">
<a href="#protonvpn"><i class="fas fa-link anchor-icon"></i></a> ProtonVPN
<a href="#protonvpn" aria-label="ProtonVPN's section"><i aria-hidden="true" class="fas fa-link anchor-icon"></i></a> ProtonVPN
{% include badge.html color="info" text="Free" %}
{% include badge.html color="info" text="Basic USD $48/y" %}
{% include badge.html color="secondary" text="Plus USD $96/y" %}
@@ -82,7 +82,7 @@
</div>
<div class="col">
<h2 id="ivpn" class="anchor">
<a href="#ivpn"><i class="fas fa-link anchor-icon"></i></a> IVPN
<a href="#ivpn" aria-label="IVPN's section"><i aria-hidden="true" class="fas fa-link anchor-icon"></i></a> IVPN
{% include badge.html color="info" text="Standard USD $60/y" %}
{% include badge.html color="secondary" text="Pro USD $100/y" %}
</h2>