Contact Form

[buddy-harlow]

Location: https://www.bixal.com/

Design

• Placeholder text is acting as form label.
• There are no instructions stating "All fields marked with * are required"

Error identification

• Only being handled by HTML5.
• When I leave a required field empty and press Submit, the screen reader announces "Please fill out this field".

Suggestion

• Recommend that we have permanent form labels and not rely on placeholder text
• Ensure we include required fields are marked with asterisks.
• When I make an error, I expect error identification to specifically identify which field(s) I need to fix.
• If I make an error, I expect error suggestions to let me know how I can correct my mistake. (ie. If I my email is formatted incorrectly and missing an @ or .com)

Resource: Deque Blog - The Anatomy of Accessible Forms: Error Messages