public inbox for [email protected]
help / color / mirror / Atom feedFrom: Daniel Gustafsson <[email protected]>
To: [email protected]
Subject: Website accessibility
Date: Mon, 6 Nov 2023 14:09:27 +0100
Message-ID: <[email protected]> (raw)
I took the Accessibility Insights plugin in Edge for a testdrive over a sample
of the website, and thankfully it reported very few issues. Making sure we
have good support for screen readers is important so I had a look at fixing the
issues.
* There are interactive elements which lacks labels: the search buttons and
the theme button. The easiest fix here is to add aria-label attributes on
these.
* The version toggles on the featurematrix lacks labels. This turned out
to be a bug in the template, there is a label but it's assembled without
all its parts so the end result doesn't point to the checkbox.
There are a few reports against the docs as well, but I think they mainly fall
into the false positivies category.
The attached patches address the above top two things, which should make the
accessibility report green on most of the site pages.
--
Daniel Gustafsson
Attachments:
[application/octet-stream] 0001-Set-aria-label-on-interactive-icon-elements.patch (3.3K, 2-0001-Set-aria-label-on-interactive-icon-elements.patch)
download | inline diff:
From 6d7a959f347492a9e94c59946ab3a0a76c32fd54 Mon Sep 17 00:00:00 2001
From: Daniel Gustafsson <[email protected]>
Date: Mon, 6 Nov 2023 13:45:26 +0100
Subject: [PATCH 1/2] Set aria-label on interactive icon elements
Interactive elements without a clear textual label, such as these which
use an icon, need additional labelling to aid screen readers. This adds
aria-label attributes on site search, documentation search and selector
for theme.
---
templates/base/base.html | 4 ++--
templates/docs/docspage.html | 6 +++---
2 files changed, 5 insertions(+), 5 deletions(-)
diff --git a/templates/base/base.html b/templates/base/base.html
index 1936a03b..4c4201f3 100644
--- a/templates/base/base.html
+++ b/templates/base/base.html
@@ -60,12 +60,12 @@
<div class="input-group">
<input id="q" name="q" type="text" size="20" maxlength="255" accesskey="s" class="form-control" placeholder="Search for...">
<span class="input-group-btn">
- <button class="btn btn-default" type="submit"><i class="fas fa-search"></i></button>
+ <button class="btn btn-default" type="submit" aria-label="Site search"><i class="fas fa-search"></i></button>
</span>
</div><!-- /input-group -->
</form>
<form id="form-theme" class="form-inline d-none">
- <button id="btn-theme" class="btn btn-default ml-1" type="button"></button>
+ <button id="btn-theme" class="btn btn-default ml-1" type="button" aria-label="Visual theme selector"></button>
</form>
</div>
</nav>
diff --git a/templates/docs/docspage.html b/templates/docs/docspage.html
index b1ad7164..33f749e1 100644
--- a/templates/docs/docspage.html
+++ b/templates/docs/docspage.html
@@ -63,12 +63,12 @@
<div class="input-group">
<input id="q" name="q" type="text" size="20" maxlength="255" accesskey="s" class="form-control" placeholder="Search for...">
<span class="input-group-btn">
- <button class="btn btn-default" type="submit"><i class="fas fa-search"></i></button>
+ <button class="btn btn-default" type="submit" aria-label="Site search"><i class="fas fa-search"></i></button>
</span>
</div><!-- /input-group -->
</form>
<form id="form-theme" class="form-inline d-none">
- <button id="btn-theme" class="btn btn-default ml-1" type="button"></button>
+ <button id="btn-theme" class="btn btn-default ml-1" type="button" aria-label="Visual theme selector"></button>
</form>
</div>
</nav>
@@ -135,7 +135,7 @@
<div class="input-group">
<input type="text" id="q" name="q" class="form-control" placeholder="Search the documentation for..."/>
<span class="input-group-btn">
- <button class="btn btn-default" type="submit"><i class="fas fa-search"></i></button>
+ <button class="btn btn-default" type="submit" aria-label="Documentation Search"><i class="fas fa-search"></i></button>
</span>
</div><!-- /input-group -->
</form>
--
2.32.1 (Apple Git-133)
[application/octet-stream] 0002-Fix-labelling-bug-on-featurematrix.patch (1.3K, 3-0002-Fix-labelling-bug-on-featurematrix.patch)
download | inline diff:
From 7443f0d2b9fc9a6454b3e018d1c68541474ef7e0 Mon Sep 17 00:00:00 2001
From: Daniel Gustafsson <[email protected]>
Date: Mon, 6 Nov 2023 13:51:03 +0100
Subject: [PATCH 2/2] Fix labelling bug on featurematrix
The labels for version toggles on the featurematrix were using the
wrong id for the input element.
---
templates/featurematrix/featurematrix.html | 2 +-
1 file changed, 1 insertion(+), 1 deletion(-)
diff --git a/templates/featurematrix/featurematrix.html b/templates/featurematrix/featurematrix.html
index 0401ebba..bb39fc5d 100644
--- a/templates/featurematrix/featurematrix.html
+++ b/templates/featurematrix/featurematrix.html
@@ -25,7 +25,7 @@ the text.
<div id="feature-matrix-filter" class="col-8 offset-2 border">
<form id="featurematrix_version_filter"><h5>Filter by version</h5>
{% for version in versions %}
- <label for="{{ version.numtree|cut:"." }}">{{ version.numtree }}</label>
+ <label for="toggle_{{ version.numtree|cut:"." }}">{{ version.numtree }}</label>
<input type="checkbox" id="toggle_{{ version.numtree|cut:"." }}" class="featurematrix_version" {% if version.supported or version.testing %}checked{% endif %} value="{{ version.numtree }}" />
{% endfor %}
<hr id="featurematrix_version_divider" />
--
2.32.1 (Apple Git-133)
reply
Reply instructions:
You may reply publicly to this message via plain-text email
using any one of the following methods:
* Reply to all the recipients using the --to and --cc options:
reply via email
To: [email protected]
Cc: [email protected], [email protected]
Subject: Re: Website accessibility
In-Reply-To: <[email protected]>
* Save the following mbox file, import it into your mail client,
and reply-to-all from there: mbox
This inbox is served by agora; see mirroring instructions
for how to clone and mirror all data and code used for this inbox