Annotation for form elements (ignore rest of page)
Alert States
USWDS: usa-alert--slim--error
Changes: make text 14 instead of 16, make alert icon red instead of black, align icon with top of text
Alt copy:
Email: This email address is not formatted correctly. An email address should contain an ‘@’ symbol.
If email @ symbol is followed by an unexpected character:
“This email address is not formatted correctly. The ‘@’ symbol should be followed by a letter, not a ‘[symbol]’ symbol.
If email @ symbol is blank:
“This email address is not formatted correctly. The ‘@’ symbol should be followed by a domain name (like ‘example.com’)
if there is an unexpected symbol before the @:
“This email address is not formatted correctly. There cannot be a ‘symbol before the ‘@’ sign. (edited)
Phone: "This phone number is not formatted correctly. If you submit a phone number, it should be between 10-15. Please include the area code."
UPDATED Mockup
Annotations
Annotation for form elements (ignore rest of page)
Alert States
USWDS: usa-alert--slim--error Changes: make text 14 instead of 16, make alert icon red instead of black, align icon with top of text
Alt copy:
Email: This email address is not formatted correctly. An email address should contain an ‘@’ symbol.
Phone: "This phone number is not formatted correctly. If you submit a phone number, it should be between 10-15. Please include the area code."
Old designs