All themes contact forms A11y updates

[StephDriver]

The contact us form is the only part of the front end which requires user input. It does not currently comply with WCAG 3.3 Input Assistance., among other areas of WCAG.

Non-exhaustive list of issues found so far:

• Material
  • invalid entries identified by colour change (see WCAG 1.3.3)
  • errors are not described to the user in text.
• Clean
  • Invalid entries are not reported to the user (try entering random text in the email field, it doesn't react). They are reported to the screen reader user, but only if they navigate back having left the item. They are reported on landing, not on exiting.
  • the bracketed email address to evade scraping is awkward when read aloud by screen reader - consider how to handle that. without putting the email address into the HTML.
• OLH
  • Page starts with an H4 not an H1
  • Contact form then starts with an H3
  • Invalid entries are not reported to the user (try entering random text in the email field, it doesn't react)
  • Required fields are marked by * which gets read out as 'star' - this should either be marked as decorative and the field marked-up as required, or it should be described.
  • Send message button changes colour on hover, but no non-colour indicator of this.

Note: the Clean contact form works well with voiceover, but doesn't indicate required fields visually (does tell the screen reader!).