This is a really nice solution, well done!
A couple of small notes...
- If you remove list styling some assistive tech will remove the list semantics altogether. An easy way to restore them is to add
role="list"to the ul/ol androle="listitem"to each li. - To programmatically link the error message to the input, wrap it in an extra element that is always present in the DOM (not display none) and give it an ID. Then use aria-describedby on the input pointing to the ID. If you don't want to wrap it in an extra element, you can use the existing ID and remove the hidden/display none from the existing error element. But the text inside that error element must be empty by default so it doesn't get read out.
- Focus-visible styles need to be really obvious so that keyboard users know where they are on the page. In fact this autumn, the new WCAG requirements will add success criteria to make it clearer what is required. A pale dotted outline is fine for a focus style, but not for a focus**-visible** style. It doesn't need to look pretty, it needs to look bold/obvious/clear
- Consider adding an aria-live attribute to this whole component. That way any DOM changes will be announced to screenreaders immediately on change (e.g. the error messages and when the content changes between thank you / form)
- I recommend managing focus on this. Currently, if you submit the form or dismiss the confirmation, focus moves to the body instead of the new content. Instead, you could give the two headings a negative tabindex and move focus onto whichever of them is present on button click/form submit. This may negate the need for point 4 in this feedback (although you'd still need to ensure the error has aria-live so that gets read out)
I hope all this makes sense and is helpful. This really is a very good solution.
Marked as helpful
1
P
Fluffy Kas• 7,735
@FluffyKas
Posted
@grace-snow
Hey Grace, I appreciate the time you took to check out my solution! I try to pay attention to accessibility and learn more about it, but I rarely get feedback on this. Unfortunately, at work we just don't really care about it... So yeah, your comment was very helpful! ^^ I made the changes, I hope now it's better and I'll read a bit about the things you mentioned above. Thanks again.
2
