Setup: Validation needs to be handled in a consistent way across form inputs
On the input for the code, when you enter anything that isn’t the correct code, the only feedback you get is the subtle red outline.
Occasionally, VoiceOver will pick up the ‘The code isn’t in the right format’ and display it in a bubble above the input (I had to hold down Enter and it would flicker into view, however it didn’t seem to be there for long enough for VoiceOver to read it—despite what the screenshot shows!)
Using HTML5 form validation, we can rely on good browser defaults (including accessibility for non-visual feedback), especially as it is widely-supported. As a general rule, it’s best to wait for form submission to show errors, as giving feedback on each individual character typed is an experience nightmare, particularly for a person using a screenreader. In Inclusive Design Patterns, Heydon Pickering recommends checking the whole form for validation on submit (while suppressing actual submission) and then perhaps providing live validation on the fields that need correcting (as the person using the form definitely needs assistance at that point, and will expect it.)
I think it’s worthwhile considering the domain name input as a separate treatment from standard validation. Because it’s not a question of whether the person has entered something correctly/incorrecting, it’s a check on our end. Currently the input for the domain name provides validation feedback based upon matching a correct domain name pattern, but we will still need to validate against actual domain name availability. This is probably more useful to do live (maybe on pause/delay), so the person gets live feedback, and doesn’t have to submit and wait for feedback.
Any other thoughts welcome!