Hi - I was directed here by HubSpot support. I’m trying to comply with some government-mandated accessibility requirements for a HubSpot form. They identified the following two issues, along with descriptions and solutions. However, I’m not able to understand how to make these changes. If someone can assist I would be very grateful.
Issue #1: Asterisks read as star in screen reader
- Description: The asterisk within the label of each required field is read as “star” in the NVDA screen reader.
- Solution: Add an aria-hidden attribute (aria-hidden=“true”) to each span element containing an asterisk.
I am not quite sure how to go about doing this. I tried modifying the form elements with an asterisk and don’t understand how to add an aria-hidden attribute to them, can someone assist?
Issue #2: Error message not read in screen reader
- Description: The error message text “Please complete this field” and “Please complete all required fields” in div elements with an alert role attribute are not announced in the NVDA screen reader.
- Solution: Add alert role attribute to the span element containing the error text or dynamically add the aria-describedby attribute to text input and textarea elements that have aria-invalid=“true” and append the referenced span tag containing the error text.
Again, not sure how to do this, if someone is able to assist I would be hugely appreciative! Thank you in advance!
If this is a HubSpot form on an external site, this post from our Community Champion