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

14
_includes/nav.html
View File

@ -1,17 +1,19 @@
<nav class="fixed-top bg-dark">
<div id="navbar" class="d-flex flex-wrap justify-content-between align-items-center">
<div class="w-50">
<a id="nav-home-mobile" class="nav-anchor" href="/">
<img src="/assets/img/svg/layout/brand/horizontal.svg" width="150px" />
<a id="nav-home-mobile" aria-label="Go to homepage" class="nav-anchor" href="/">
<img src="/assets/img/svg/layout/brand/horizontal.svg" alt="PrivacyTools.io" width="150px" />
</a>
</div>
<input type="checkbox" id="nav-toggle" checked />
<label for="nav-toggle" id="nav-toggle-label" class="fas fa-bars fa-lg"></label>
<label for="nav-toggle" id="nav-toggle-label" class="fas fa-bars fa-lg">
<span hidden>Menu Button</span>
</label>
<div class="menu w-100">
<div id="nav-left" class="position-relative flex-col">
<a class="nav-anchor" href="/">
<span id="nav-home" class="fas fa-home fa-fw"></span>
<a class="nav-anchor" href="/" aria-label="Go to homepage">
<span id="nav-home" aria-hidden="true" class="fas fa-home fa-fw"></span>
</a>
<!-- Provider -->
@ -115,7 +117,7 @@
<a href="/about/" class="nav-anchor">
About Us
</a>{% unless page.url == '/sponsors/' %}
<span id="nav-switch-theme" class="nav-anchor">
<span id="nav-switch-theme" class="nav-anchor" tabindex="0">
<span class="nav-theme-icon fas fa-fw" aria-hidden="true" title="Theme"></span>
<span class="sr-only">Toggle Theme</span>
</span>