To ensure that assistive technologies – such as screen readers – correctly convey the meaning of an icon, additional hidden text should be included with the sr-only class, and the icon itself explicitly associated with the form control it relates to using aria-describedby. Alternatively, ensure that the meaning (for instance, the fact that there is a warning for a particular text entry field) is conveyed in some other form, such as changing the text of the actual <label> associated with the form control.
To ensure that assistive technologies – such as screen readers – correctly convey the meaning of an icon, additional hidden text should be included with the sr-only class and explicitly associated with the form control it relates to using aria-describedby. Alternatively, ensure that the meaning (for instance, the fact that there is a warning for a particular text entry field) is conveyed in some other form, such as changing the text of the actual <label> associated with the form control.
Although the following examples already mention the validation state of their respective form controls in the <label> text itself, the above technique (using sr-only text and aria-describedby) has been included for illustrative purposes.