Other accessible items for wa11y.co

[beltonTPG]

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)

[cariad]

Thank you so much for this feedback! I'm going to work on these now.

[cariad]

@beltonTPG I just deployed fixes for these bugs. Can you give https://wa11y.co a poke and confirm you're happy with the changes before I close this?

If the previous version is still hanging around in the cache then you can force the update through https://wa11y.co?v=2.

Thanks again!

[beltonTPG]

Looks good! With the label text that you used for the first textarea, you could keep the placeholder text that was there. My comment about the placeholder was just to make sure the label text and the placeholder text were different. Placeholder text is intended to give hints about the type of content to enter into the form field, so what you had before would work in this case, but not if you also used that text for the label.
It would also be good to add some instructional text after the <h1> which would set the stage for screen reader users and let them understand the functionality from the beginning.

[cariad]

@beltonTPG Ah, thanks for clarifying! I just deployed another update. Please, give it a try at your leisure and I'll keep this issue open until you're happy.

[beltonTPG]

Nice! We can probably close this issue.

[cariad]

Thanks again for raising these issues! ❤️