💾 Archived View for m0yng.uk › 2024 › 12 › Amateur-Radio-Inclusivity-Pledge-Accessibility-Check captured on 2024-12-17 at 10:08:37. Gemini links have been rewritten to link to archived content
-=-=-=-=-=-=-
Created 2024-12-01
The Amateur Radio Inclusivity Pledge is great! I've been meaning to add it to my site for ages now (one moment ... done! See About[1]) and Mastodon.Radio has been listed as an Organisation we love[2] for some time.
2: https://amateurradioinclusivitypledge.org/docs/ogranizations-we-love/
Accessibility is a key foundation for inclusivity, but it sounds like there may be some issues ("I'm very much an amateur on the web design front"[3]) so let's see if we can help.
3: https://mastodon.hams.social/@amateurradioinclusivitypledge/113577614585184138
Although I am a professional accessibility consultant, this is not a paid for audit and I am not using all my usual tools (as I'm not at work!) so it's probable that I've missed things. I've also not looked at every facet of the service so the whole thing should be checked for anything I do identify.
I've linked everything I can to the international standard, please refer to WCAG Quick Reference[4] for more specifics.
4: https://www.w3.org/WAI/WCAG22/quickref/
This check was undertaken on amateurradioinclusivitypledge.org
I did not check the docs as these were made with "Just the Docs".
3.1.1[5] This means screen readers and other assistive technology might not know how to read the text, especially if the user's default language isn't English (like the page.)
5: https://www.w3.org/WAI/WCAG22/quickref/#language-of-page
<html lang="en">
1.3.1[6] The title of the page is an H2, but there should be one (and only one) H1 on every page.
6: https://www.w3.org/WAI/WCAG22/quickref/#info-and-relationships
1.3.5[7] The checkbox has a <label> element BUT it only contains two SVG images, which are both marked `aria-hidden` so the user does not know they are there and will not be able to use the checkbox.
7: https://www.w3.org/WAI/WCAG22/quickref/#identify-input-purpose
As a minimum you should include some (visually hidden) text, or use the `aria-label` attribute, that reads "switch site theme".
As this changes something on the page, consider using telling the user what state it is in/will change to.
e.g. "Change theme to light" and "Change theme to dark".
You can use prefers-color-scheme[8] to detect and apply the user's preferred theme.
8: https://developer.mozilla.org/en-US/docs/Web/CSS/@media/prefers-color-scheme
Currently it reads "Author's picture or avatar or logo", and also has a title of "ARIP Logo".
Set the alt to "AIRP Logo" and remove the title (title attributes are not well supported for assistive technology.)
The intro quote is a list item, in a list with only one item. This should not be a list.
Just left justify it as justified text can be hard to read.
This text is rgb(128, 128, 128) / #808080 which has a ratio of 3.49:1 against the white background.
Change to #757575 at minimum.
1.1.1[9] the link (e.g. on the about page) to go back is just an SVG, so a screen reader user will not know where the link takes them.
9: https://www.w3.org/WAI/WCAG22/quickref/#non-text-content
On the posts page every post has it's title as H3 and the date as H4. The date should not be a heading.
Consider adding a "Sign the Pledge" link to the front page so people can quickly know what you want them to do.
-+--+--+--+--+--+--+--+--+--+--+--+--+--+--+--+-
🖤 Black Lives Matter
💙🤍💜 Trans Rights are Human Rights
❤️🧡💛💚💙💜 Love is Love
Copyright © 2024 Christopher M0YNG - It is forbidden to use any part of this site for crypto/NFT/AI related projects.
Code snippets are licenced under the Hippocratic License 3.0 (or later.)
Page generated 2024-12-13 by Complex 19