Yeah Dave’s explanation is spot on. Sections actually aren’t announced by most screenreaders, but on a page like this that doesn’t matter because screenreader users rely on headings for navigation. Having headings in a good order is the most important thing.
You do need to change some bits on your forms though.
- aria describedby should not include the label as well as the error
- error messages shouldn’t appear as soon as you focus on an input. Change that to be on blur and it would be a much better experience
- Don’t change button labels with aria if there is already label text there
Remember that aria-label is a last resort. It isn’t fully translatable and aria-labelledby, sr-only text or any html text will almost always be preferable
I hope that makes sense
Marked as helpful
One more thing. I recommend removing this
<h3 class="sr-only" id="testimonialTitle">
Don't just believe on what we say, it has been proven
by ten of thousands people. Here is a review from CEO
of Huddle.
</h3>
This wouldn’t be a h3, it’s a paragraph. And if it is valuable content it would be on the page already.
Try not to overthink accessibility. It seems like you are throwing a bit much at this and it could actually make the page harder to interact with in some ways
@vanzasetia
Posted
@grace-snow Thanks Grace for your feedback!
Yeah, I was thinking too much about accessibility 😅. I will make the changes as soon as possible.
