Adding accessibility features

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

View File

@@ -1,4 +1,4 @@
<h1 id="os" class="anchor"><a href="#os"><i class="fas fa-link anchor-icon"></i></a> Introductory Operating Systems</h1>
<h1 id="os" class="anchor"><a href="#os" aria-label="Introductory Operating Systems' section"><i aria-hidden="true" class="fas fa-link anchor-icon"></i></a> Introductory Operating Systems</h1>
<div class="alert alert-warning" role="alert">
<strong>If you are currently using an operating system that collects data like Windows 10, you should pick an alternative here.</strong>
@@ -24,7 +24,7 @@
git="https://launchpad.net/ubuntu"
%}
<h1 id="advanced_os" class="anchor"><a href="#advanced_os"><i class="fas fa-link anchor-icon"></i></a> Advanced Operating Systems</h1>
<h1 id="advanced_os" class="anchor"><a href="#advanced_os" aria-label="Advanced Operating Systems' section"><i aria-hidden="true" class="fas fa-link anchor-icon"></i></a> Advanced Operating Systems</h1>
<div class="alert alert-info" role="alert">
<strong>These options have advanced features and are unique in some way. These options will likely require the user to read technical background documentation.</strong>