I love that you've created this tool to make the Twitter posts more accessible, but if you don't mind, here are some suggestions to make wa11y.co more accessible (with WCAG for reference):

• add a Page heading (h1) (Best practice)
• don't autofocus. first thing announced by a screen reader is "Paste your game result here" which could be confusing out of context (2.4.3 Focus Order)
• add visible label elements above the textarea elements (3.3.2 Labels or Instructions) and connect them via a for attribute (4.1.2 Name, Role, Value) (The game result textarea incorrectly relies on a placeholder for its accessible name, and the results textarea does not have an accName at all)
• don't repeat label in placeholder text (could get a double announcement) (4.1.2 Name, Role, Value)

This is great, and you're fantastic for making it!

I use Chrome with uBlock, and I get these console errors when I load the page. When I turned off uBlock, the last 3 didn't show again, which makes sense.

The page works fine, but I wonder if I'm missing out on styles and such.

Also, is the page itself set up well for screen reader use? Just curious.

[Report Only] Refused to load the image 'data:image/svg+xml,<svg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 100 100%22><text y=%22.9em%22 font-size=%2290%22>%F0%9F%8E%AE</text></svg>' because it violates the following Content Security Policy directive: "img-src https://cdn.usefathom.com/".

[Report Only] Refused to load the stylesheet 'https://wa11y.co/style.css?v=2.1' because it violates the following Content Security Policy directive: "default-src 'none'". Note that 'style-src-elem' was not explicitly set, so 'default-src' is used as a fallback.

GET https://cdn.usefathom.com/script.js net::ERR_BLOCKED_BY_CLIENT
POST https://antagonist.report-uri.com/r/d/csp/reportOnly net::ERR_BLOCKED_BY_CLIENT
POST https://antagonist.report-uri.com/r/d/csp/reportOnly net::ERR_BLOCKED_BY_CLIENT

👋 Hi Cariad,

I love wa11y! I was very happy to see that someone had taken the initiative to make Wordle's share text more accessible, and wanted to contribute.

This pull request:

• has wa11y generate a 2:1 image from Wordle's results for sharing on social media
• uses shapes in addition to colors to help make results more distinguishable for people with various vision types
• tries to use colors that are distinguishable for most kinds of color blindness
• can generate images for both light and dark modes
• has an optional high contrast mode (only light mode has colors with contrast ratios below 7:1 ( = "high contrast"), so this mode is really for it)
• provides buttons for copying both the generated image and its alt text

Here's examples of what the generated images look like:

| Light | Dark | | ------------- | ------------- | | | |

and the tweaked UI: