⛔2654-a11y-Audit-Form-Errors

Required and invalid form controls must convey/expose the fact that they are required and invalid

{% embed url="https: //scjsstest.duke-energy.com/home-services/gas-line-repair/enroll" %}

[Sowa, Bill](https: //jiraprod.duke-energy.com/secure/ViewProfile.jspa?name=BSowa) created issue - Feb/10/22 8:20 AM[Sowa, Bill](https: //jiraprod.duke-energy.com/secure/ViewProfile.jspa?name=BSowa) made changes - Feb/10/22 8:33 AM

Initial Notes	Updated
Notes: Invalid form controls are visually indicated as invalid, but this state is not communicated programmatically. Assistive technology users may have difficulty determining which controls are invalid. h5. Recommendation Set {{aria-invalid="true"}} on form fields that contain invalid data. This will ensure that the field is exposed to assistive technologies as an invalid field, and screen readers will announce this, for example, by announcing "invalid entry" as part of the field description. Once the field is valid, remove the {{aria-invalid}} attribute or set it to {{false}}. Setting aria-invalid {{<label for="address">Address</label>}} {{<input id="address" type="text" aria-invalid="true">}} When an inline error message communicates specific information (e.g., beyond the fact that the field was left blank), use {{aria-describedby}} to associate the error message with the form field. Once the field is valid, remove the error message. Setting {{aria-describedby}} to point to an error message {{}} {code:java} <label for="email">Email</label> <input id="email" type="email" aria-invalid="true" aria-describedby="email_error"> <p id="email_error">Please enter a valid email address in the format [e-mail]</p>{code} {{}}	Notes: Invalid form controls are visually indicated as invalid, but this state is not communicated programmatically. Assistive technology users may have difficulty determining which controls are invalid. h5. Recommendation Set {{aria-invalid="true"}} on form fields that contain invalid data. This will ensure that the field is exposed to assistive technologies as an invalid field, and screen readers will announce this, for example, by announcing "invalid entry" as part of the field description. Once the field is valid, remove the {{aria-invalid}} attribute or set it to {{false}}. Setting aria-invalid {{<label for="address">Address</label>}} {{<input id="address" type="text" aria-invalid="true">}} When an inline error message communicates specific information (e.g., beyond the fact that the field was left blank), use {{aria-describedby}} to associate the error message with the form field. Once the field is valid, remove the error message. Setting {{aria-describedby}} to point to an error message {code:java} <label for="email">Email</label> <input id="email" type="email" aria-invalid="true" aria-describedby="email_error"> <p id="email_error">Please enter a valid email address in the format [e-mail]</p>{code}
Notes: Invalid form controls are visually indicated as invalid, but this state is not communicated programmatically. Assistive technology users may have difficulty determining which controls are invalid. h5. Recommendation Set {{aria-invalid="true"}} on form fields that contain invalid data. This will ensure that the field is exposed to assistive technologies as an invalid field, and screen readers will announce this, for example, by announcing "invalid entry" as part of the field description. Once the field is valid, remove the {{aria-invalid}} attribute or set it to {{false}}. Setting aria-invalid {{<label for="address">Address</label>}} {{<input id="address" type="text" aria-invalid="true">}} When an inline error message communicates specific information (e.g., beyond the fact that the field was left blank), use {{aria-describedby}} to associate the error message with the form field. Once the field is valid, remove the error message. Setting {{aria-describedby}} to point to an error message {{}} {code:java} <label for="email">Email</label> <input id="email" type="email" aria-invalid="true" aria-describedby="email_error"> <p id="email_error">Please enter a valid email address in the format [e-mail]</p>{code} {{}}
Notes: Invalid form controls are visually indicated as invalid, but this state is not communicated programmatically. Assistive technology users may have difficulty determining which controls are invalid. h5. Recommendation Set {{aria-invalid="true"}} on form fields that contain invalid data. This will ensure that the field is exposed to assistive technologies as an invalid field, and screen readers will announce this, for example, by announcing "invalid entry" as part of the field description. Once the field is valid, remove the {{aria-invalid}} attribute or set it to {{false}}. Setting aria-invalid {{<label for="address">Address</label>}} {{<input id="address" type="text" aria-invalid="true">}} When an inline error message communicates specific information (e.g., beyond the fact that the field was left blank), use {{aria-describedby}} to associate the error message with the form field. Once the field is valid, remove the error message. Setting {{aria-describedby}} to point to an error message {{}} {code:java} <label for="email">Email</label> <input id="email" type="email" aria-invalid="true" aria-describedby="email_error"> <p id="email_error">Please enter a valid email address in the format [e-mail]</p>{code} {{}}
Notes: Invalid form controls are visually indicated as invalid, but this state is not communicated programmatically. Assistive technology users may have difficulty determining which controls are invalid. h5. Recommendation Set {{aria-invalid="true"}} on form fields that contain invalid data. This will ensure that the field is exposed to assistive technologies as an invalid field, and screen readers will announce this, for example, by announcing "invalid entry" as part of the field description. Once the field is valid, remove the {{aria-invalid}} attribute or set it to {{false}}. Setting aria-invalid {{<label for="address">Address</label>}} {{<input id="address" type="text" aria-invalid="true">}} When an inline error message communicates specific information (e.g., beyond the fact that the field was left blank), use {{aria-describedby}} to associate the error message with the form field. Once the field is valid, remove the error message. Setting {{aria-describedby}} to point to an error message {{}} {code:java} <label for="email">Email</label> <input id="email" type="email" aria-invalid="true" aria-describedby="email_error"> <p id="email_error">Please enter a valid email address in the format [e-mail]</p>{code} {{}}
Notes: Invalid form controls are visually indicated as invalid, but this state is not communicated programmatically. Assistive technology users may have difficulty determining which controls are invalid. h5. Recommendation Set {{aria-invalid="true"}} on form fields that contain invalid data. This will ensure that the field is exposed to assistive technologies as an invalid field, and screen readers will announce this, for example, by announcing "invalid entry" as part of the field description. Once the field is valid, remove the {{aria-invalid}} attribute or set it to {{false}}. Setting aria-invalid {{<label for="address">Address</label>}} {{<input id="address" type="text" aria-invalid="true">}} When an inline error message communicates specific information (e.g., beyond the fact that the field was left blank), use {{aria-describedby}} to associate the error message with the form field. Once the field is valid, remove the error message. Setting {{aria-describedby}} to point to an error message {{}} {code:java} <label for="email">Email</label> <input id="email" type="email" aria-invalid="true" aria-describedby="email_error"> <p id="email_error">Please enter a valid email address in the format [e-mail]</p>{code} {{}}
Notes: Invalid form controls are visually indicated as invalid, but this state is not communicated programmatically. Assistive technology users may have difficulty determining which controls are invalid. h5. Recommendation Set {{aria-invalid="true"}} on form fields that contain invalid data. This will ensure that the field is exposed to assistive technologies as an invalid field, and screen readers will announce this, for example, by announcing "invalid entry" as part of the field description. Once the field is valid, remove the {{aria-invalid}} attribute or set it to {{false}}. Setting aria-invalid {{<label for="address">Address</label>}} {{<input id="address" type="text" aria-invalid="true">}} When an inline error message communicates specific information (e.g., beyond the fact that the field was left blank), use {{aria-describedby}} to associate the error message with the form field. Once the field is valid, remove the error message. Setting {{aria-describedby}} to point to an error message {{}} {code:java} <label for="email">Email</label> <input id="email" type="email" aria-invalid="true" aria-describedby="email_error"> <p id="email_error">Please enter a valid email address in the format [e-mail]</p>{code} {{}}
Notes: Invalid form controls are visually indicated as invalid, but this state is not communicated programmatically. Assistive technology users may have difficulty determining which controls are invalid. h5. Recommendation Set {{aria-invalid="true"}} on form fields that contain invalid data. This will ensure that the field is exposed to assistive technologies as an invalid field, and screen readers will announce this, for example, by announcing "invalid entry" as part of the field description. Once the field is valid, remove the {{aria-invalid}} attribute or set it to {{false}}. Setting aria-invalid {{<label for="address">Address</label>}} {{<input id="address" type="text" aria-invalid="true">}} When an inline error message communicates specific information (e.g., beyond the fact that the field was left blank), use {{aria-describedby}} to associate the error message with the form field. Once the field is valid, remove the error message. Setting {{aria-describedby}} to point to an error message {{}} {code:java} <label for="email">Email</label> <input id="email" type="email" aria-invalid="true" aria-describedby="email_error"> <p id="email_error">Please enter a valid email address in the format [e-mail]</p>{code} {{}}
Notes: Invalid form controls are visually indicated as invalid, but this state is not communicated programmatically. Assistive technology users may have difficulty determining which controls are invalid. h5. Recommendation Set {{aria-invalid="true"}} on form fields that contain invalid data. This will ensure that the field is exposed to assistive technologies as an invalid field, and screen readers will announce this, for example, by announcing "invalid entry" as part of the field description. Once the field is valid, remove the {{aria-invalid}} attribute or set it to {{false}}. Setting aria-invalid {{<label for="address">Address</label>}} {{<input id="address" type="text" aria-invalid="true">}} When an inline error message communicates specific information (e.g., beyond the fact that the field was left blank), use {{aria-describedby}} to associate the error message with the form field. Once the field is valid, remove the error message. Setting {{aria-describedby}} to point to an error message {{}} {code:java} <label for="email">Email</label> <input id="email" type="email" aria-invalid="true" aria-describedby="email_error"> <p id="email_error">Please enter a valid email address in the format [e-mail]</p>{code} {{}}
Notes: Invalid form controls are visually indicated as invalid, but this state is not communicated programmatically. Assistive technology users may have difficulty determining which controls are invalid. h5. Recommendation Set {{aria-invalid="true"}} on form fields that contain invalid data. This will ensure that the field is exposed to assistive technologies as an invalid field, and screen readers will announce this, for example, by announcing "invalid entry" as part of the field description. Once the field is valid, remove the {{aria-invalid}} attribute or set it to {{false}}. Setting aria-invalid {{<label for="address">Address</label>}} {{<input id="address" type="text" aria-invalid="true">}} When an inline error message communicates specific information (e.g., beyond the fact that the field was left blank), use {{aria-describedby}} to associate the error message with the form field. Once the field is valid, remove the error message. Setting {{aria-describedby}} to point to an error message {{}} {code:java} <label for="email">Email</label> <input id="email" type="email" aria-invalid="true" aria-describedby="email_error"> <p id="email_error">Please enter a valid email address in the format [e-mail]</p>{code} {{}}
Notes: Invalid form controls are visually indicated as invalid, but this state is not communicated programmatically. Assistive technology users may have difficulty determining which controls are invalid. h5. Recommendation Set {{aria-invalid="true"}} on form fields that contain invalid data. This will ensure that the field is exposed to assistive technologies as an invalid field, and screen readers will announce this, for example, by announcing "invalid entry" as part of the field description. Once the field is valid, remove the {{aria-invalid}} attribute or set it to {{false}}. Setting aria-invalid {{<label for="address">Address</label>}} {{<input id="address" type="text" aria-invalid="true">}} When an inline error message communicates specific information (e.g., beyond the fact that the field was left blank), use {{aria-describedby}} to associate the error message with the form field. Once the field is valid, remove the error message. Setting {{aria-describedby}} to point to an error message {{}} {code:java} <label for="email">Email</label> <input id="email" type="email" aria-invalid="true" aria-describedby="email_error"> <p id="email_error">Please enter a valid email address in the format [e-mail]</p>{code} {{}}
Notes: Invalid form controls are visually indicated as invalid, but this state is not communicated programmatically. Assistive technology users may have difficulty determining which controls are invalid. h5. Recommendation Set {{aria-invalid="true"}} on form fields that contain invalid data. This will ensure that the field is exposed to assistive technologies as an invalid field, and screen readers will announce this, for example, by announcing "invalid entry" as part of the field description. Once the field is valid, remove the {{aria-invalid}} attribute or set it to {{false}}. Setting aria-invalid {{<label for="address">Address</label>}} {{<input id="address" type="text" aria-invalid="true">}} When an inline error message communicates specific information (e.g., beyond the fact that the field was left blank), use {{aria-describedby}} to associate the error message with the form field. Once the field is valid, remove the error message. Setting {{aria-describedby}} to point to an error message {{}} {code:java} <label for="email">Email</label> <input id="email" type="email" aria-invalid="true" aria-describedby="email_error"> <p id="email_error">Please enter a valid email address in the format [e-mail]</p>{code} {{}}

[DXT Ninja Turtles](https:

//jiraprod.duke-energy.com/browse/DNT) / [DNT-2654 a11y audit - Form](https: //jiraprod.duke-energy.com/browse/DNT-2654) / [DNT-2655](https: //jiraprod.duke-energy.com/browse/DNT-2655)

Notes:

Invalid form controls are visually indicated as invalid, but this state is not communicated programmatically. Assistive technology users may have difficulty determining which controls are invalid.

Recommendation

Set aria-invalid="true" on form fields that contain invalid data. This will ensure that the field is exposed to assistive technologies as an invalid field, and screen readers will announce this, for example, by announcing "invalid entry" as part of the field description. Once the field is valid, remove the aria-invalid attribute or set it to false.

Setting aria-invalid

<label for="address">Address</label> <input id="address" type="text" aria-invalid="true">

When an inline error message communicates specific information (e.g., beyond the fact that the field was left blank), use aria-describedby to associate the error message with the form field. Once the field is valid, remove the error message.

Setting aria-describedby to point to an error message

Email <input id="email" type="email" aria-invalid="true" aria-describedby="email_error"> <p id="email_error">Please enter a valid email address in the format [e-mail]

• Options