feat: add script for producing a summary of wcag sc coverage

[evlach]

This script creates a quick overview of wcag sc coverage of the existing rules. It would be great to have it on the web site as well if you like the idea.

[jeeyyy]

I do like the idea. Perhaps than creating a script to generate this meta data (can you add an example of the produced output), it may be easy to create a filter in the /rules page of the website to narrow this down. Can also take it a bit further to pass this filter as a query string. What do you think?

Because producing this json via a script means it has to be consumed on the site to show the data, but we already have the information via GraphQl on the rules page, so it may be a matter of filtering the data accordingly, unless a JSON is desired for such meta data, I do not see a necessity. Correct me if I am wrong.

[evlach]

HI! My intention as a user was actually to get the coverage.. understand which sc criteria are covered and to what extend. I find this is very important for the community, that's why I suggested to add this on the website - IMHO I would put that as separate page or even (promoted!).
I guess this is possible through graphql as well but I wanted something quick and clean - so you might keep the idea and implement it in a different way - what you describe makes sense to me as well. Here is the output of my script:

{
  "wcag20:1.1.1": [
    "[7d6734]: `svg` element with explicit role has accessible name",
    "[23a2a8]: Image has accessible name",
    "[59796f]: Image button has accessible name",
    "[9eb3f6]: Image filename is accessible name for image"
  ],
  "wcag20:1.2.1": [
    "[e7aa44]: `audio` element content has text alternative",
    "[c3232f]: `video` element visual-only content has accessible alternative"
  ],
  "wcag20:1.2.2": [
    "[eac66b]: `video` element auditory content has accessible alternative"
  ],
  "wcag20:1.2.3": [
    "[c5a4ea]: `video` element visual content has accessible alternative"
  ],
  "wcag20:1.2.5": [
    "[1ec09b]: `video` element visual content has strict accessible alternative"
  ],
  "wcag20:1.2.8": [
    "[1a02b0]: `video` element visual content has transcript"
  ],
  "wcag20:1.3.1": [
    "[6cfa84]: Element with `aria-hidden` has no focusable content",
    "[ff89c9]: ARIA required context role",
    "[bc4a75]: ARIA required owned elements",
    "[ffd0e9]: Heading has accessible name",
    "[d0f69e]: All table header cells have assigned data cells"
  ],
  "wcag20:1.4.2": [
    "[80f0bf]: audio or video has no audio that plays automatically"
  ],
  "wcag20:1.4.3": [
    "[afw4f7]: Text has minimum contrast"
  ],
  "wcag20:1.4.4": [
    "[b4f0c3]: meta viewport does not prevent zoom"
  ],
  "wcag20:1.4.6": [
    "[afw4f7]: Text has minimum contrast"
  ],
  "wcag20:2.1.2": [
    "[80af7b]: Focusable element has no keyboard trap"
  ],
  "wcag20:2.2.1": [
    "[bc659a]: `meta` element has no refresh delay"
  ],
  "wcag20:2.2.4": [
    "[bc659a]: `meta` element has no refresh delay"
  ],
  "wcag20:2.4.2": [
    "[2779a5]: HTML page has title",
    "[c4a8a4]: HTML page title is descriptive"
  ],
  "wcag20:2.4.4": [
    "[5effbb]: Link in context is descriptive",
    "[c487ae]: Link has accessible name"
  ],
  "wcag20:2.4.6": [
    "[cc0f0a]: Form control label is descriptive",
    "[ffd0e9]: Heading has accessible name",
    "[b49b2e]: Heading is descriptive"
  ],
  "wcag20:2.4.9": [
    "[5effbb]: Link in context is descriptive",
    "[c487ae]: Link has accessible name",
    "[b20e66]: Links with identical accessible names have equivalent purpose"
  ],
  "wcag20:3.1.1": [
    "[b5c3f8]: HTML page has `lang` attribute",
    "[bf051a]: HTML page language is valid",
    "[5b7ae0]: HTML page `lang` and `xml:lang` attributes have matching values"
  ],
  "wcag20:3.1.2": [
    "[de46e4]: Element within `body` has valid `lang` attribute"
  ],
  "wcag20:3.2.5": [
    "[bc659a]: `meta` element has no refresh delay"
  ],
  "wcag20:4.1.1": [
    "[e6952f]: Attribute is not duplicated",
    "[3ea0c8]: `id` attribute value is unique"
  ],
  "wcag20:4.1.2": [
    "[6cfa84]: Element with `aria-hidden` has no focusable content",
    "[97a4e1]: Button has accessible name",
    "[e086e5]: Form control has accessible name",
    "[cae760]: `iframe` element has accessible name",
    "[4b1c6c]: `iframe` elements with identical accessible names have equivalent purpose",
    "[59796f]: Image button has accessible name",
    "[c487ae]: Link has accessible name",
    "[674b10]: `role` attribute has valid value",
    "[4e8ab6]: Element with `role` attribute has required states and properties"
  ],
  "wcag21:1.3.4": [
    "[b33eff]: Orientation of the page is not restricted using CSS transform property"
  ],
  "wcag21:1.3.5": [
    "[73f2c2]: `autocomplete` attribute has valid value"
  ],
  "wcag21:2.5.3": [
    "[2ee8b8]: Visible label is part of accessible name"
  ]
}

Keep up the very nice work!!

[jeeyyy]

@evlach we discussed this PR in a community group call & made a decision to build a page which will present similar data on the website.

As portrayed in this discussion, it is not necessary to have this script, as the data to create such a page already exists at the Gatsby/ GraphQl layer.

We have made an issue for this - #150

Thanks for your contribution.