Indicate required form controls using image indicators
Make sure indications of required form controls are conveyed through IMG elements
Informing users about required form fields and programmatically conveying that information to assistive technologies is critical in making sure the most basic form submission errors are avoided. However, providing that information in plain text is often considered to be inelegant by visual designers, who will often prefer to rely on symbols to convey that information. As a result, another option that is often found is to use the asterisk (*) symbol and position it right next to the label of the field that is mandatory. As the asterisk text symbol is not a recommendable solution due to most screen readers ignoring it by default, a favoured accessible approach is to use an image instead.
To do so, simply make sure the text label wrapped into the LABEL element that is tied to the required form control also carries an image of the asterisk symbol, complete with an ALT attribute value describing its function (alt=”required”). As long as the image and the content of the LABEL element are programmatically bound to the form control, setting focus on the control will automatically convey the mandatory status [...]