Required Indicator Test

A red asterisk is often used to indicate required fields. To be accessible:

Example 1: ARIA-Label

The element that contains the asterisk has role="img" and aria-label="required", so that a screen reader says "required" instead of "asterisk". This approach keeps the text "required" with the indicator. (Note: role="img" is needed because aria-label isn't allowed on generic elements.)

Example 2: ARIA-Required

The field has aria-required="true", which modern screen readers recognize and read as "required". It uses slightly less code and may be easier to internationalize, but you must remember to remove the aria-required attribute if you ever remove the indicator. (Note: the "required" attribute has the same effect, but adds browser-side validation.)