{"id":65,"date":"2025-08-21T22:32:41","date_gmt":"2025-08-21T22:32:41","guid":{"rendered":"https:\/\/a11y-tools.com\/blog\/?p=65"},"modified":"2026-07-16T08:23:15","modified_gmt":"2026-07-16T08:23:15","slug":"new-bookmarklet-wcag-lookup-tool","status":"publish","type":"post","link":"https:\/\/a11y-tools.com\/blog\/2025\/08\/new-bookmarklet-wcag-lookup-tool\/","title":{"rendered":"New Lookup tool: WCAG SC Reference (bookmarklet and extension)"},"content":{"rendered":"<style>\n img {width: 100%;}\n img {max-width: 50em;}\n<\/style>\n<p>tl;dr &#8211; I made a <a href=\"https:\/\/a11y-tools.com\/bookmarklets\/#wcaglookup\">tool to look up WCAG SCs and copy the links<\/a>. <\/p>\n<p>As anyone who has spent more than 30 minutes with me where the conversation might veer towards anything technical, I am an \u00fcber-bore where it comes to the Mac app <a href=\"https:\/\/www.keyboardmaestro.com\/main\/\">Keyboard Maestro<\/a> (KM). It does a shit-tonne of stuff and, frankly, what it can&#8217;t do is more likely because you haven&#8217;t thought to ask\/tell it to do it.<\/p>\n<p>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):<\/p>\n<p><img decoding=\"async\" src=\"https:\/\/a11y-tools.com\/blog\/wp-content\/uploads\/2025\/08\/1.png\" alt=\"Keyboard Maestro spotlight search showing a range of saved text expansions\" \/><\/p>\n<p><a href=\"https:\/\/a11y-tools.com\/#TextExpansions\">I also made these available in a GitHub repo<\/a>. All well and good, assuming that you a) have a copy of KM and b) you&#8217;re a &#8216;MacTwat&#8217; (according to Steve Faulkner).<\/p>\n<p>A couple of weeks ago, <a href=\"https:\/\/tetralogical.com\/about\/team\/#lwatson\">TetraLogical boss lady L\u00e9onie<\/a> was asking about whether we had a reference page of all the WCAG SCs in Markdown format (we do) and then <a href=\"https:\/\/tetralogical.com\/about\/team\/#plauke\">Patrick<\/a> joked that it was only a matter of time before I put one together as bookmarklet.<\/p>\n<p><img decoding=\"async\" src=\"https:\/\/a11y-tools.com\/blog\/wp-content\/uploads\/2025\/08\/starting-timer.png\" alt=\"Patrick: starting the timer until @Lloydi made a bookmarklet for this..\nLloydi: Nah .. I used Keyboard Maestro text expansion for that:\nAlthough ... not everyone uses Keyboard Meastro, so why not?\" \/><\/p>\n<p>Well, no need, I thought, because I already had my own little system in KM. So &#8230; screw y&#8217;all, I&#8217;m alright Jack? Nah, it got me thinking that maybe I <em>could<\/em> create a bookmarklet that did something similar to how I used KM&#8217;s spotlight-like global search.<\/p>\n<p>So, with that in mind, here&#8217;s what I came up with:<\/p>\n<ul>\n<li>Run the bookmarklet and it shows all WCAG SCs sorted by number:\n<div><img decoding=\"async\" src=\"https:\/\/a11y-tools.com\/blog\/wp-content\/uploads\/2025\/08\/3.png\" alt=\"All WCAG SCs showing, sorted by their SC number\" \/><\/div>\n<\/li>\n<li>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?\n<div><img decoding=\"async\" src=\"https:\/\/a11y-tools.com\/blog\/wp-content\/uploads\/2025\/08\/4.png\" alt=\"Filtering applied: showing only Level AAA SCs that were introduced in Version 2.2\" \/><\/div>\n<\/li>\n<li>Start typing the SC number and that list will filter down to show matches:\n<div><img decoding=\"async\" src=\"https:\/\/a11y-tools.com\/blog\/wp-content\/uploads\/2025\/08\/5.png\" alt=\"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)\" \/><\/div>\n<\/li>\n<li>Can&#8217;t remember the WCAG SC number? Perhaps you know it&#8217;s something about &#8216;labels&#8217;? OK, well then type labels, then, and Bob&#8217;s&#8217; yer mother&#8217;s brother:\n<div><img decoding=\"async\" src=\"https:\/\/a11y-tools.com\/blog\/wp-content\/uploads\/2025\/08\/6.png\" alt=\"Results show SCs 2.4.6, 2.5.3 and 3.3.2, all of which have 'Label' in the SC name\" \/><\/div>\n<\/li>\n<li>That&#8217;s the lookup part, but then there&#8217;s the next part: once you&#8217;ve found the SC you were looking for, hit ENTER and you&#8217;ll get options to copy as markdown link, HTML link, and also to just visit the page. It&#8217;ll copy to the clipboard (you might need to allow it on first run) or, if that fails, it&#8217;ll write to the console:\n<div><img decoding=\"async\" src=\"https:\/\/a11y-tools.com\/blog\/wp-content\/uploads\/2025\/08\/7.png\" alt=\"With one SC selected, 5 buttons are showing, 4 of which provide 'Copy' optins, and the 5th takes you to the page.\" \/><\/div>\n<\/li>\n<\/ul>\n<p>Having asked on LinkedIn how many people remember the numbers, it&#8217;s clear that <a href=\"https:\/\/www.linkedin.com\/posts\/lloydi_a-quick-question-for-my-fellow-accessibility-activity-7359748640241795072-ErWq?utm_source=share&#038;utm_medium=member_desktop&#038;rcm=ACoAAABfHQAB9hYn7rF8dOCJVY4GNkzy7rmr_y0\">many people with years of accessibility experience have to look things up, in all manner of ways<\/a>. Hopefully this bookmarklet will help with that lookup and also the eternal question for Markdown links:<\/p>\n<p><strong>Do I do the square brackets first then the curved ones? Or is the other way round?<\/strong> Or do I need to copy the last Markdown link I used to be sure?<\/p>\n<p><img decoding=\"async\" src=\"https:\/\/a11y-tools.com\/blog\/wp-content\/uploads\/2025\/08\/markdown-link-buttons.png\" alt=\"Meme shows man sweating over the choice of 2 buttons that show 1 correct and 1 incorrect format for a Markdown link\" \/><\/p>\n<p>[OK, that&#8217;s 3 questions, but they all amount to the same things]<\/p>\n<p>(Or should I have used curvy brackets just then?)<\/p>\n<p>[Or should I have called them parenthesis?]<\/p>\n<p>(Or parentheses?)<\/p>\n<p>{Arrrrrgggghhh!}<\/p>\n<ul>\n<li><a href=\"https:\/\/a11y-tools.com\/bookmarklets\/#wcaglookup\">Get the Lookup WCAG SCs bookmarklet here<\/a><\/li>\n<li><a href=\"https:\/\/chromewebstore.google.com\/detail\/look-up-wcag-success-crit\/koppadkncigccambhpcmgilnphmaahad\">Lookup WCAG SCs is also available as a Chrome extension<\/a><\/li>\n<\/ul>\n","protected":false},"excerpt":{"rendered":"<p>tl;dr &#8211; 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 \u00fcber-bore where it comes to the Mac app Keyboard Maestro (KM). It does a shit-tonne of stuff and, [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"closed","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[4,6,5],"tags":[],"class_list":["post-65","post","type-post","status-publish","format-standard","hentry","category-bookmarklets","category-extensions","category-tools"],"aioseo_notices":[],"_links":{"self":[{"href":"https:\/\/a11y-tools.com\/blog\/wp-json\/wp\/v2\/posts\/65","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/a11y-tools.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/a11y-tools.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/a11y-tools.com\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/a11y-tools.com\/blog\/wp-json\/wp\/v2\/comments?post=65"}],"version-history":[{"count":10,"href":"https:\/\/a11y-tools.com\/blog\/wp-json\/wp\/v2\/posts\/65\/revisions"}],"predecessor-version":[{"id":81,"href":"https:\/\/a11y-tools.com\/blog\/wp-json\/wp\/v2\/posts\/65\/revisions\/81"}],"wp:attachment":[{"href":"https:\/\/a11y-tools.com\/blog\/wp-json\/wp\/v2\/media?parent=65"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/a11y-tools.com\/blog\/wp-json\/wp\/v2\/categories?post=65"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/a11y-tools.com\/blog\/wp-json\/wp\/v2\/tags?post=65"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}