Accessibility: Help with Error Messages on Forms – Aria attributes, role alerts, direct links

My client is working towards WCAG compliance, they had their site assessed and received the below feedback. Can anyone please help?

• How do you add role="alert" or live regions to errors in a form?
• How do you add aria-described attributes to relate the invalid field to it's error message?

^ they reference the html codes required but I don't know how to add them into the form - assume I need Javascript? 

• Can you add direct links to the error messages / invalid fields?
   Or give screen readers the option to skip valid fields and labels when looking for error?
   

Website: http://brackenridge.squarespace.com/
password: GSPass

Below is screenshot of full feedback if helpful reference.

Thanks so much! 

Facing these same issues. Don't even know how to begin. Attached is an example: I'm using Paragraph 1 in the footer and am getting a message to label these titles built as text tags. Umm... huh? Sure would appreciate anyone who could tell me how to do this 🙏

https://borrowhappy.com/

17 hours ago, juliaprather said:

Facing these same issues. Don't even know how to begin. Attached is an example: I'm using Paragraph 1 in the footer and am getting a message to label these titles built as text tags. Umm... huh? Sure would appreciate anyone who could tell me how to do this 🙏

https://borrowhappy.com/

@juliaprather I think I can actually help with this one! I had similar messaging originally so had to redo a bunch of headings / paragraphs.
Basically people who are visually impaired or use screen readers, can't see the distinctions in design, so rely on text hierarchy. So any text styled with H1, H2, ...etc will be given a "title tag" and anything marked as P will be given a "text tag".
Using your example, while I can obviously see that "Loan Types" is a heading, and below are the grouped links, a screenreader will just see it as another "text tag" because you're using P1. This makes it unclear that the links below are actually related. 
Equally if you style pulled out text in H4, the screen reader will mark it as a "title tag", which adds confusion when the text following it is either another heading or paragraph text that isn't actually related.
Does that all make sense?

There are code snippets you can use to change the text / title hierarchy on specific blocks if just a couple of one offs, but because I had consistently used H4 for pull outs, I had to change them all to P1 and then restyle both to match. A bit of a bother at the beginning but much easier for consistency in the long run!