privacytools.io icon indicating copy to clipboard operation
privacytools.io copied to clipboard

WIP: Adding accessibility features

Open CristianAUnisa opened this issue 4 years ago • 1 comments

Made the theme button toggable by keyboard Added aria-label to many 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

Description

Resolves: #none

Check List

  • [x] I understand that by not opening an issue about a software/service/similar addition/removal, this pull request will be closed without merging.

  • [x] I have read and understand the contributing guidelines.

  • [x] The project is Free Libre and/or Open Source Software

  • Netlify preview for the mainly edited page: https://sleepy-heyrovsky-6a1470.netlify.app/

  • Code repository of the project (if applicable): https://github.com/CristianAUnisa/privacytools.io/

CristianAUnisa avatar Jun 26 '21 18:06 CristianAUnisa

There's a line of code you can find there at line 13 that's not showing when you toggle the menu. Should it be deleted?

<div class="menu w-100">
    <div id="nav-left" class="position-relative flex-col">
    <a class="nav-anchor" href="/"> <!-- This one right here -->
        <span id="nav-home" class="fas fa-home fa-fw"></span>
    </a>

CristianAUnisa avatar Jun 27 '21 00:06 CristianAUnisa