Required Fields Marked With "*" Accessibility Suggestion

Problem/Motivation

We recently had an accessibility report for our site compiled and we received a noted failure in accordance to some of our webforms:

This is the below message regarding the required fields in our webform:

Communicating which field is required is important information that must be accessible to all users.

The asterisks added to the instruction phrase “Mandatory fields” are typed “*” characters, meaning that they exist on the page inside the HTML code. But, all the other asterisks that are intended to denote the required form fields are background images inserted using CSS. This causes multiple failures under different WCAG criteria.

Labels need to contain the “required” information as well as their respective elements do in the code. Since the information in this case comes from CSS only, their existence will not be announced to screen reader users and to any user who might need to replace the site styles with their own custom CSS to meet their accessibility requirements.

Proposed resolution

I've created a patch, with some custom code that pertains only to our site in some ways so I won't share it here. I put some javascript into webform.element.options.js and webform.states.js to grab the label if it had a required field and add the "*" after it in a span tag. I initially tried to do it in the twig but I couldn't get it to work.

However I'm 99.9% sure it was not the best practice of resolving the issue. I feel like there was a better file or a better way. Any suggestion is welcome and I would be happy to try and create a patch for everyone here and help resolve the issue.