Skip to content
This repository has been archived by the owner on Jun 24, 2022. It is now read-only.

WIP: Adding accessibility features #2359

Open
wants to merge 2 commits into
base: master
Choose a base branch
from
Open

WIP: Adding accessibility features #2359

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
91a1111
Adding accessibility features
CristianAUnisa Jun 26, 2021
8102920
Added focus style and menu keyboard toggle
CristianAUnisa Jun 27, 2021
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
33 changes: 19 additions & 14 deletions _includes/badge.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,20 +1,25 @@
{% if include.link %}
<a
href="{{ include.link }}" class="badge badge-{{ include.color | default: "info" }}"
{% if include.tooltip %}
data-toggle="tooltip"
data-original-title="{{ include.tooltip }}"><i class="{{ include.icon | default: "far fa-question-circle"}}"></i> {{ include.text }}
{% else %}><i class="{{ include.icon | default: "fas fa-external-link-alt"}}"></i> {{ include.text }}{% endif %}
<a href="{{ include.link }}" class="badge badge-{{ include.color | default: " info" }}" {% if include.tooltip %} {% if
include.text == null or include.text == "" %} aria-label="{{include.tooltip}}" {% endif %} data-toggle="tooltip"
data-original-title="{{ include.tooltip }}"><i aria-hidden="true" class="{{ include.icon | default: " far
fa-question-circle"}}"></i> {{ include.text }}
{% else %}
{% if include.text == null or include.text == "" %}
aria-label="{{include.link}}"
{% endif %}
><i aria-hidden="true" class="{{ include.icon | default: " fas fa-external-link-alt"}}"></i> {{ include.text }}{%
endif %}
</a>
{% else %}
<span
class="badge badge-{{ include.color | default: "info" }}"
{% if include.tooltip %}
data-toggle="tooltip"
data-original-title="{{ include.tooltip }}"
> <i class="{{ include.icon | default: "far fa-question-circle"}}"></i> {{include.text}}
<span class="badge badge-{{ include.color | default: " info" }}" {% if include.tooltip %}
{% if include.text == null or include.text == "" %} aria-label="{{include.tooltip}}" {% endif %}
data-toggle="tooltip" data-original-title="{{ include.tooltip }}"> <i
class="{{ include.icon | default: " far fa-question-circle"}}"></i> {{include.text}}
{% else %}
> {% if include.icon %}<i class="{{ include.icon }}"></i>{% endif %} {{include.text}}
{% if include.text == null or include.text == "" %}
aria-label="{{include.link}}"
{% endif %}
> {% if include.icon %}<i class="{{ include.icon }}"></i>{% endif %} {{include.text}}
{% endif %}
</span>
{% endif %}
{% endif %}
106 changes: 54 additions & 52 deletions _includes/cardv2.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -102,6 +102,7 @@ <h3 class="h5">
{% if include.tor %}
<a
href="{{include.tor}}"
aria-label="Tor Onion link for {{include.title}}"
rel="noopener"
class="btn icon-btn hover-text-decoration-none mt-1 mr-1"
data-toggle="tooltip"
Expand All @@ -113,6 +114,7 @@ <h3 class="h5">
{% if include.i2p %}
<a
href="{{include.i2p}}"
aria-label="i2p link for {{include.title}}"
rel="noopener"
class="btn icon-btn hover-text-decoration-none mt-1 mr-1"
data-toggle="tooltip"
Expand All @@ -126,8 +128,8 @@ <h3 class="h5">
<div class="mt-2">
{% if include.windows %}
{% if include.windows != "" %}
<a href="{{ include.windows }}" rel="noopener" class="text-decoration-none hover-text-decoration-none">
<i class="fab fa-windows fa-2x fa-fw d-inline pr-1"></i>
<a href="{{ include.windows }}" aria-label="Go to {{include.title}} for Windows" rel="noopener" class="text-decoration-none hover-text-decoration-none">
<i aria-hidden="true" class="fab fa-windows fa-2x fa-fw d-inline pr-1"></i>
</a>
{% else %}
<i class="fab fa-windows fa-2x fa-fw d-inline pr-1"></i>
Expand All @@ -136,8 +138,8 @@ <h3 class="h5">

{% if include.mac %}
{% if include.mac != "" %}
<a href="{{ include.mac }}" rel="noopener" class="text-decoration-none hover-text-decoration-none">
<i class="ptio-macos fa-2x fa-fw d-inline pr-1"></i>
<a href="{{ include.mac }}" aria-label="Go to {{include.title}} for Mac" rel="noopener" class="text-decoration-none hover-text-decoration-none">
<i aria-hidden="true" class="ptio-macos fa-2x fa-fw d-inline pr-1"></i>
</a>
{% else %}
<i class="ptio-macos fa-2x fa-fw d-inline pr-1"></i>
Expand All @@ -146,8 +148,8 @@ <h3 class="h5">

{% if include.linux %}
{% if include.linux != "" %}
<a href="{{ include.linux }}" rel="noopener" class="text-decoration-none hover-text-decoration-none">
<i class="ptio-linux fa-2x fa-fw d-inline pr-1"></i>
<a href="{{ include.linux }}" aria-label="Go to {{include.title}} for Linux" rel="noopener" class="text-decoration-none hover-text-decoration-none">
<i aria-hidden="true" class="ptio-linux fa-2x fa-fw d-inline pr-1"></i>
</a>
{% else %}
<i class="ptio-linux fa-2x fa-fw d-inline pr-1"></i>
Expand All @@ -156,8 +158,8 @@ <h3 class="h5">

{% if include.freebsd %}
{% if include.freebsd != "" %}
<a href="{{ include.freebsd }}" rel="noopener" class="text-decoration-none hover-text-decoration-none">
<i class="fab fa-freebsd fa-2x fa-fw d-inline pr-1"></i>
<a href="{{ include.freebsd }}" aria-label="Go to {{include.title}} for FreeBSD" rel="noopener" class="text-decoration-none hover-text-decoration-none">
<i aria-hidden="true" class="fab fa-freebsd fa-2x fa-fw d-inline pr-1"></i>
</a>
{% else %}
<i class="fab fa-freebsd fa-2x fa-fw d-inline pr-1"></i>
Expand All @@ -166,8 +168,8 @@ <h3 class="h5">

{% if include.openbsd %}
{% if include.openbsd != "" %}
<a href="{{ include.openbsd }}" rel="noopener" class="text-decoration-none hover-text-decoration-none">
<i class="ptio-openbsd fa-2x fa-fw d-inline pr-1"></i>
<a href="{{ include.openbsd }}" aria-label="Go to {{include.title}} for OpenBSD" rel="noopener" class="text-decoration-none hover-text-decoration-none">
<i aria-hidden="true" class="ptio-openbsd fa-2x fa-fw d-inline pr-1"></i>
</a>
{% else %}
<i class="ptio-openbsd fa-2x fa-fw d-inline pr-1"></i>
Expand All @@ -176,8 +178,8 @@ <h3 class="h5">

{% if include.netbsd %}
{% if include.netbsd != "" %}
<a href="{{ include.netbsd }}" rel="noopener" class="text-decoration-none hover-text-decoration-none">
<i class="ptio-netbsd fa-2x fa-fw d-inline pr-1"></i>
<a href="{{ include.netbsd }}" aria-label="Go to {{include.title}} for NetBSD" el="noopener" class="text-decoration-none hover-text-decoration-none">
<i aria-hidden="true" class="ptio-netbsd fa-2x fa-fw d-inline pr-1"></i>
</a>
{% else %}
<i class="ptio-netbsd fa-2x fa-fw d-inline pr-1"></i>
Expand All @@ -186,108 +188,108 @@ <h3 class="h5">

{% if include.firefox %}
{% if include.firefox != "" %}
<a href="{{ include.firefox }}" rel="noopener" class="text-decoration-none hover-text-decoration-none">
<i class="fab fa-firefox fa-2x fa-fw d-inline pr-1"></i>
<a href="{{ include.firefox }}" aria-label="Firefox Add-on link for {{include.title}}" rel="noopener" class="text-decoration-none hover-text-decoration-none">
<i aria-hidden="true" class="fab fa-firefox fa-2x fa-fw d-inline pr-1"></i>
</a>
{% else %}
<i class="fab fa-firefox fa-2x fa-fw d-inline pr-1"></i>
<i alt="{{include.title}} available as Firefox Add-on" class="fab fa-firefox fa-2x fa-fw d-inline pr-1"></i>
{% endif %}
{% endif %}

{% if include.chrome %}
{% if include.chrome != "" %}
<a href="{{ include.chrome }}" rel="noopener" class="text-decoration-none hover-text-decoration-none">
<i class="fab fa-chrome fa-2x fa-fw d-inline pr-1"></i>
<a href="{{ include.chrome }}" aria-label="Chrome Extension link for {{include.title}}" rel="noopener" class="text-decoration-none hover-text-decoration-none">
<i aria-hidden="true" class="fab fa-chrome fa-2x fa-fw d-inline pr-1"></i>
</a>
{% else %}
<i class="fab fa-chrome fa-2x fa-fw d-inline pr-1"></i>
<i alt="{{include.title}} available as Chrome Extension" class="fab fa-chrome fa-2x fa-fw d-inline pr-1"></i>
{% endif %}
{% endif %}

{% if include.safari %}
{% if include.safari != "" %}
<a href="{{ include.safari }}" rel="noopener" class="text-decoration-none hover-text-decoration-none">
<i class="fab fa-safari fa-2x fa-fw d-inline pr-1"></i>
<a href="{{ include.safari }}" aria-label="Safari Extension link for {{include.title}} rel="noopener" class="text-decoration-none hover-text-decoration-none">
<i aria-hidden="true" class="fab fa-safari fa-2x fa-fw d-inline pr-1"></i>
</a>
{% else %}
<i class="fab fa-safari fa-2x fa-fw d-inline pr-1"></i>
<i alt="{{include.title}} available as Safari Extension" class="fab fa-safari fa-2x fa-fw d-inline pr-1"></i>
{% endif %}
{% endif %}

{% if include.opera %}
{% if include.opera != "" %}
<a href="{{ include.opera }}" rel="noopener" class="text-decoration-none hover-text-decoration-none">
<i class="fab fa-opera fa-2x fa-fw d-inline pr-1"></i>
<a href="{{ include.opera }}" aria-label="Opera Extension link for {{include.title}}" rel="noopener" class="text-decoration-none hover-text-decoration-none">
<i aria-hidden="true" class="fab fa-opera fa-2x fa-fw d-inline pr-1"></i>
</a>
{% else %}
<i class="fab fa-opera fa-2x fa-fw d-inline pr-1"></i>
<i alt="{{include.title}} available as Opera Extension" class="fab fa-opera fa-2x fa-fw d-inline pr-1"></i>
{% endif %}
{% endif %}

{% if include.edge %}
{% if include.edge != "" %}
<a href="{{ include.edge }}" rel="noopener" class="text-decoration-none hover-text-decoration-none">
<i class="fab fa-edge fa-2x fa-fw d-inline pr-1"></i>
<a href="{{ include.edge }}" aria-label="Edge Addon link for {{include.title}}" rel="noopener" class="text-decoration-none hover-text-decoration-none">
<i aria-hidden="true" class="fab fa-edge fa-2x fa-fw d-inline pr-1"></i>
</a>
{% else %}
<i class="fab fa-edge fa-2x fa-fw d-inline pr-1"></i>
<i alt="{{include.title}} available as Edge Addon" class="fab fa-edge fa-2x fa-fw d-inline pr-1"></i>
{% endif %}
{% endif %}

{% if include.fdroid %}
{% if include.fdroid != "" %}
<a href="{{ include.fdroid }}" rel="noopener" class="text-decoration-none hover-text-decoration-none">
<i class="ptio-f-droid fa-2x fa-fw d-inline pr-1"></i>
<a href="{{ include.fdroid }}" aria-label="F-Droid link for {{include.title}}" rel="noopener" class="text-decoration-none hover-text-decoration-none">
<i aria-hidden="true" class="ptio-f-droid fa-2x fa-fw d-inline pr-1"></i>
</a>
{% else %}
<i class="ptio-f-droid fa-2x fa-fw d-inline pr-1"></i>
<i alt="{{include.title}} available on F-Droid" class="ptio-f-droid fa-2x fa-fw d-inline pr-1"></i>
{% endif %}
{% endif %}

{% if include.googleplay %}
{% if include.googleplay != "" %}
<a href="{{ include.googleplay }}" rel="noopener" class="text-decoration-none hover-text-decoration-none">
<i class="fab fa-google-play fa-2x fa-fw d-inline pr-1"></i>
<a href="{{ include.googleplay }}" aria-label="Play Store link for {{include.title}}" rel="noopener" class="text-decoration-none hover-text-decoration-none">
<i aria-hidden="true" class="fab fa-google-play fa-2x fa-fw d-inline pr-1"></i>
</a>
{% else %}
<i class="fab fa-google-play fa-2x fa-fw d-inline pr-1"></i>
<i alt="{{include.title}} available on Play Store" class="fab fa-google-play fa-2x fa-fw d-inline pr-1"></i>
{% endif %}
{% endif %}

{% if include.android %}
{% if include.android != "" %}
<a href="{{ include.android }}" rel="noopener" class="text-decoration-none hover-text-decoration-none">
<i class="fab fa-android fa-2x fa-fw d-inline pr-1"></i>
<a href="{{ include.android }}" aria-label="Android link for {{include.title}}" rel="noopener" class="text-decoration-none hover-text-decoration-none">
<i aria-hidden="true" class="fab fa-android fa-2x fa-fw d-inline pr-1"></i>
</a>
{% else %}
<i class="fab fa-android fa-2x fa-fw d-inline pr-1"></i>
<i alt="{{include.title}} available for Android" class="fab fa-android fa-2x fa-fw d-inline pr-1"></i>
{% endif %}
{% endif %}

{% if include.ios %}
{% if include.ios != "" %}
<a href="{{ include.ios }}" rel="noopener" class="text-decoration-none hover-text-decoration-none">
<i class="ptio-ios fa-2x fa-fw d-inline pr-1"></i>
<a href="{{ include.ios }}" aria-label="iOS link for {{include.title}}" rel="noopener" class="text-decoration-none hover-text-decoration-none">
<i aria-hidden="true" class="ptio-ios fa-2x fa-fw d-inline pr-1"></i>
</a>
{% else %}
<i class="ptio-ios fa-2x fa-fw d-inline pr-1"></i>
<i alt="{{include.title}} available for iOS" class="ptio-ios fa-2x fa-fw d-inline pr-1"></i>
{% endif %}
{% endif %}

{% if include.sailfish %}
{% if include.sailfish != "" %}
<a href="{{ include.sailfish }}" rel="noopener" class="text-decoration-none hover-text-decoration-none">
<i class="ptio-sailfish-os fa-2x fa-fw d-inline pr-1"></i>
<a href="{{ include.sailfish }}" aria-label="SailFish link for {{include.title}}" rel="noopener" class="text-decoration-none hover-text-decoration-none">
<i aria-hidden="true" class="ptio-sailfish-os fa-2x fa-fw d-inline pr-1"></i>
</a>
{% else %}
<i class="ptio-sailfish-os fa-2x fa-fw d-inline pr-1"></i>
<i alt="{{include.title}} available for SailFish" class="ptio-sailfish-os fa-2x fa-fw d-inline pr-1"></i>
{% endif %}
{% endif %}

{% if include.web %}
{% if include.web != "" %}
<a href="{{ include.web }}" rel="noopener" class="text-decoration-none hover-text-decoration-none">
<i class="fas fa-globe-americas fa-2x fa-fw d-inline pr-1"></i>
<a href="{{ include.web }}" aria-label="Go to {{include.title}} official website" rel="noopener" class="text-decoration-none hover-text-decoration-none">
<i aria-hidden="true" class="fas fa-globe-americas fa-2x fa-fw d-inline pr-1"></i>
</a>
{% else %}
<i class="fas fa-globe-americas fa-2x fa-fw d-inline pr-1"></i>
Expand All @@ -299,26 +301,26 @@ <h3 class="h5">
{{include.icon3}}

{% if include.github %}
<a href="{{include.github}}" rel="noopener" class="text-decoration-none hover-text-decoration-none">
<i class="fab fa-github fa-2x fa-fw d-inline"></i>
<a href="{{include.github}}" aria-label="GitHub repository for {{include.title}}" rel="noopener" class="text-decoration-none hover-text-decoration-none">
<i aria-hidden="true" class="fab fa-github fa-2x fa-fw d-inline"></i>
</a>
{% endif %}

{% if include.gitlab %}
<a href="{{include.gitlab}}" rel="noopener" class="text-decoration-none hover-text-decoration-none">
<i class="fab fa-gitlab fa-2x fa-fw d-inline"></i>
<a href="{{include.gitlab}}" aria-label="GitLab repository for {{include.title}}" rel="noopener" class="text-decoration-none hover-text-decoration-none">
<i aria-hidden="true" class="fab fa-gitlab fa-2x fa-fw d-inline"></i>
</a>
{% endif %}

{% if include.git %}
<a href="{{include.git}}" rel="noopener" class="text-decoration-none hover-text-decoration-none">
<i class="fab fa-git-square fa-2x fa-fw d-inline"></i>
<a href="{{include.git}}" aria-label="Git repository for {{include.title}}" rel="noopener" class="text-decoration-none hover-text-decoration-none">
<i aria-hidden="true" class="fab fa-git-square fa-2x fa-fw d-inline"></i>
</a>
{% endif %}

{% if include.source %}
<a href="{{include.source}}" rel="noopener" class="text-decoration-none hover-text-decoration-none">
<i class="fas fa-code-branch fa-2x fa-fw d-inline"></i>
<a href="{{include.source}}" aria-label="Source Code for {{include.title}}" rel="noopener" class="text-decoration-none hover-text-decoration-none">
<i aria-hidden="true" class="fas fa-code-branch fa-2x fa-fw d-inline"></i>
</a>
{% endif %}

Expand Down
4 changes: 2 additions & 2 deletions _includes/footer.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -41,10 +41,10 @@ <h3 id="participate">Spread the word and help your friends</h3>
</div>
</div>

<h3>Copy URL and Description</h3>
<h3><label for="copyUrl">Copy URL and Description</label></h3>

<p>
<input type="text" value="{{ site.name }} - Encryption and tools to protect against global mass surveillance - {{ site.production_url }}" class="form-control input-lg onclick-select">
<input id="copyUrl" type="text" value="{{ site.name }} - Encryption and tools to protect against global mass surveillance - {{ site.production_url }}" class="form-control input-lg onclick-select">
<span class="help-block">For easy copy and paste. Share this text snippet.</span>
</p>

Expand Down
14 changes: 8 additions & 6 deletions _includes/nav.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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" tabindex="0" 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 -->
Expand Down Expand Up @@ -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>
Expand Down
2 changes: 1 addition & 1 deletion _includes/sections/android-addons.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
<h1 id="aaddons" class="anchor"><a href="#aaddons"><i class="fas fa-link anchor-icon"></i></a> Android Privacy Add-ons</h1>
<h1 id="aaddons" class="anchor"><a href="#aaddons" aria-label="Android Privacy Add-ons' section"><i aria-hidden="true" class="fas fa-link anchor-icon"></i></a> Android Privacy Add-ons</h1>

<div class="container-fluid">

Expand Down
Loading