Skip to content

Instantly share code, notes, and snippets.

@grahamperrin
Last active December 18, 2022 09:42
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save grahamperrin/f8d093c17d870b92d92ade8adcd2f8b7 to your computer and use it in GitHub Desktop.
Save grahamperrin/f8d093c17d870b92d92ade8adcd2f8b7 to your computer and use it in GitHub Desktop.
Accessibility

Accessibility

Preamble

Spun off from discussion of link underlining at https://bugs.freebsd.org/bugzilla/show_bug.cgi?id=268426#c4

I aimed to perform accessibility checks on two pages in the FreeBSD documentation portal. Whilst preparing to use tools that were familiar to me, I decided to see what else might be useful.

A few findings

Google found an article that was originally published in 2011:

Some of the links are outdated. An end result:

  1. Accessibility Checker – ADA & WCAG Compliance (Free Scan) – https://www.accessibilitychecker.org/
  2. AChecker – Web Accessibility Checker for WCAG 2.0 AODA Compliance Monitoring – https://achecker.achecks.ca/checker/index.php
  3. ARC Toolkit – Page-Level Testing – TPGi – https://www.tpgi.com/arc-platform/arc-toolkit/ – no extension for Firefox, so I added the extension to Chromium
  4. FAE : Functional Accessibility Evaluator 2.3 – https://fae.disability.illinois.edu/anonymous/
  5. MagentaA11y – accessibility checklist – https://www.magentaa11y.com/
  6. Sa11yhttps://sa11y.netlify.app/ – I added the bookmarklet to Firefox
  7. TAW | Web accessibility and W3C standardization services – https://www.tawdis.net/
  8. WAVE Web Accessibility Evaluation Tools – https://wave.webaim.org/ – I added the extension to Firefox.

Something led me to:

– nice use of the sidebar.

More than one hundred and sixty tools here:

Also bookmarked

Guidelines for Visualizing Links (2004-05-09).

Link Accessibility No-Nos That May Surprise You - AT3 Center (2019-07-24).

Required Web Content and Links – Digital.gov (2022-11-09). Whilst this page has no contrast error, according to https://wave.webaim.org/report#/https://digital.gov/resources/required-web-content-and-links/, an important part of the page – a boxed Note – is unnecessarily difficult to read. It appears to lack contrast, maybe due to chosen fonts.

From WebAIM: Links and Hypertext - Link Text and Appearance, with regard to underlining:

WCAG 2.0 has 2 additional requirements for body text links that are not underlined by default:

  1. The link text must have a 3:1 contrast ratio from the surrounding non-link text.
  2. The link must present a "non-color designator" (typically the introduction of the underline) on both mouse hover and keyboard focus.

These two requirements help ensure that all users can differentiate links from non-link text, even if they have low vision, color deficiency, or have overridden page colors.

Yale University's Links | Usability & Web Accessibility offers a little more detail, under Non-Color Indicators.

F73: Failure of Success Criterion 1.4.1 due to creating links that are not visually evident without color vision | Techniques for WCAG 2.0 (2016).

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment