tl;dr – I made a tool to look up WCAG SCs and copy the links.

As anyone who has spent more than 30 minutes with me where the conversation might veer towards anything technical, I am an über-bore where it comes to the Mac app Keyboard Maestro (KM). It does a shit-tonne of stuff and, frankly, what it can’t do is more likely because you haven’t thought to ask/tell it to do it.

A while back I set up a bunch of keyboard shortcuts (text expansions, if you will) that made it trivially easy for me to generate links to WCAG Success Criteria in various formats (Markdown, HTML, etc):

Keyboard Maestro spotlight search showing a range of saved text expansions

I also made these available in a GitHub repo. All well and good, assuming that you a) have a copy of KM and b) you’re a ‘MacTwat’ (according to Steve Faulkner).

A couple of weeks ago, TetraLogical boss lady Léonie was asking about whether we had a reference page of all the WCAG SCs in Markdown format (we do) and then Patrick joked that it was only a matter of time before I put one together as bookmarklet.

Patrick: starting the timer until @Lloydi made a bookmarklet for this.. Lloydi: Nah .. I used Keyboard Maestro text expansion for that: Although ... not everyone uses Keyboard Meastro, so why not?

Well, no need, I thought, because I already had my own little system in KM. So … screw y’all, I’m alright Jack? Nah, it got me thinking that maybe I could create a bookmarklet that did something similar to how I used KM’s spotlight-like global search.

So, with that in mind, here’s what I came up with:

  • Run the bookmarklet and it shows all WCAG SCs sorted by number:
    All WCAG SCs showing, sorted by their SC number
  • Want to know which ones are 2.1? Level AAA? 2.2 *and* Level AAA? There are filters that let you, well, filter. What else?
    Filtering applied: showing only Level AAA SCs that were introduced in Version 2.2
  • Start typing the SC number and that list will filter down to show matches:
    Search term is '1.4', and the results show all SCs beginning with '1.4', such as 1.4.1 Use of color, 1.4.3 Contrast (minimum)
  • Can’t remember the WCAG SC number? Perhaps you know it’s something about ‘labels’? OK, well then type labels, then, and Bob’s’ yer mother’s brother:
    Results show SCs 2.4.6, 2.5.3 and 3.3.2, all of which have 'Label' in the SC name
  • That’s the lookup part, but then there’s the next part: once you’ve found the SC you were looking for, hit ENTER and you’ll get options to copy as markdown link, HTML link, and also to just visit the page. It’ll copy to the clipboard (you might need to allow it on first run) or, if that fails, it’ll write to the console:
    With one SC selected, 5 buttons are showing, 4 of which provide 'Copy' optins, and the 5th takes you to the page.

Having asked on LinkedIn how many people remember the numbers, it’s clear that many people with years of accessibility experience have to look things up, in all manner of ways. Hopefully this bookmarklet will help with that lookup and also the eternal question for Markdown links:

Do I do the square brackets first then the curved ones? Or is the other way round? Or do I need to copy the last Markdown link I used to be sure?

Meme shows man sweating over the choice of 2 buttons that show 1 correct and 1 incorrect format for a Markdown link

[OK, that’s 3 questions, but they all amount to the same things]

(Or should I have used curvy brackets just then?)

[Or should I have called them parenthesis?]

(Or parentheses?)

{Arrrrrgggghhh!}