# Accessibility: Form validation alerts not readable by screen reader

**URL:** <https://community.hubspot.com/t/accessibility-form-validation-alerts-not-readable-by-screen-reader/39000>\
**Category:** HubSpot Ideas\
**Tags:** design-manager, forms, html\
**Created:** [June 16, 2021, 9:04am UTC](https://community.hubspot.com/t/accessibility-form-validation-alerts-not-readable-by-screen-reader/39000 "2021-06-16T09:04:16Z")\
**Posts on this page:** 6\
**Page:** 1

<div class="post-metadata">

**Author:** ![Lizzam](https://d10pqhm3lwygmk.cloudfront.net/user_avatar/community.hubspot.com/lizzam/32/84335_2.png) [@Lizzam](https://community.hubspot.com/u/Lizzam)\
**Post date:** [June 16, 2021, 9:04am UTC](https://community.hubspot.com/t/accessibility-form-validation-alerts-not-readable-by-screen-reader/39000/1 "2021-06-16T09:04:16Z")

</div>

For Hubspot forms that we’re using, the validation errors are not being read by screen readers.

 ![Lizzam_0-1623833468405.png](https://d2qpr2jzcazej7.cloudfront.net/original/2X/a/abc0ab94415a87000b26d3df47f934c4f14d7178.png)

When inspecting the errors, it seems that the HTML code used is not allowing the alert to be read properly.

Below are the suggestions to allow the error messages to be accessible even when it’s an inline messages.

 ![Lizzam_1-1623834012901.jpg](https://d2qpr2jzcazej7.cloudfront.net/original/3X/f/0/f0d29e07aa874a7cdd933ba934385e472465250a.jpeg)

- Removing role=alert from the error messages.
- Changing the error messages to be contained in an inline element like SPAN
- adding unique ID to the alert messages.
- The error messages and the fields are connected using Aria-Labelledby.

---

<div class="post-metadata">

**Author:** ![AEaster](https://d10pqhm3lwygmk.cloudfront.net/user_avatar/community.hubspot.com/aeaster/32/74903_2.png) [@AEaster](https://community.hubspot.com/u/AEaster)\
**Post date:** [November 22, 2021, 4:58pm UTC](https://community.hubspot.com/t/accessibility-form-validation-alerts-not-readable-by-screen-reader/39000/2 "2021-11-22T16:58:42Z")

</div>

I also would really love to see HubSpot form error messages made screen reader accessible!!

One thing to note, since there is already a label, it would be best practice to use `aria-describedby` instead of `aria-labelledby` for associating an error message to it’s input element

Furthermore, it would also be incredibly helpful to have a built in option for auto-focusing on the errored form fields on form submit

---

<div class="post-metadata">

**Author:** ![KApgar](https://d10pqhm3lwygmk.cloudfront.net/user_avatar/community.hubspot.com/kapgar/32/83262_2.png) [@KApgar](https://community.hubspot.com/u/KApgar)\
**Post date:** [November 22, 2021, 5:23pm UTC](https://community.hubspot.com/t/accessibility-form-validation-alerts-not-readable-by-screen-reader/39000/3 "2021-11-22T17:23:31Z")

</div>

This is such an important thing that needs to be done. Thank you for considering!

---

<div class="post-metadata">

**Author:** ![PGuinot](https://avatars.discourse-cdn.com/v4/letter/p/3e96dc/32.png) [@PGuinot](https://community.hubspot.com/u/PGuinot)\
**Post date:** [March 16, 2022, 1:18pm UTC](https://community.hubspot.com/t/accessibility-form-validation-alerts-not-readable-by-screen-reader/39000/4 "2022-03-16T13:18:29Z")

</div>

In the same vein, this type of captcha is unusable to validate forms for the visually impaired and blind.

---

<div class="post-metadata">

**Author:** ![PGuinot](https://avatars.discourse-cdn.com/v4/letter/p/3e96dc/32.png) [@PGuinot](https://community.hubspot.com/u/PGuinot)\
**Post date:** [March 18, 2022, 3:48pm UTC](https://community.hubspot.com/t/accessibility-form-validation-alerts-not-readable-by-screen-reader/39000/5 "2022-03-18T15:48:25Z")

</div>

For french people i find a great website to test the accessibility WCAG / WEB of your forms : [Grille Audit Wcag 2.2 d’Orange — La va11ydette](https://la-va11ydette.orange.com/?list=wcag-web&lang=fr)

---

<div class="post-metadata">

**Author:** ![jstrachan](https://d10pqhm3lwygmk.cloudfront.net/user_avatar/community.hubspot.com/jstrachan/32/68963_2.png) [@jstrachan](https://community.hubspot.com/u/jstrachan)\
**Post date:** [December 8, 2022, 6:00pm UTC](https://community.hubspot.com/t/accessibility-form-validation-alerts-not-readable-by-screen-reader/39000/6 "2022-12-08T18:00:17Z")

</div>

Agreed! We conducted a web accessibility audit this year and this was one of our findings. The function should also be updated to read out something more specific than “please complete this required field” to something more descriptive like “please complete the first name field”.
