A span element that conveys special meaning or interactive state must have appropriate ARIA attributes or role to be accessible and pass validation.
The span element is a generic inline container with no semantic meaning. To make it meaningful for assistive technologies (such as screen readers), ARIA attributes or a role attribute should be used when the element represents states, properties, or interactive features.
For example, in the following code the span is used to visually indicate a required field with an asterisk *, but it lacks additional semantic information:
<span class="required" aria-required="true"> *</span>
To address this, add role="presentation" (to mark it as purely visual), or use aria-hidden="true" (to hide it from assistive technology), as the asterisk does not have semantic value for screen readers. Only use ARIA required (aria-required="true") on the form control (e.g., input), not on the decorative indicator.
Recommended HTML (decorative asterisk not announced):
<span class="required" aria-hidden="true">*</span>
Alternative (if you want to announce “required”):
Announce “required” with visually hidden text and use the actual aria-required="true" on the input.
<label for="name">
Name
<span class="required" aria-hidden="true">*</span>
<span class="visually-hidden">Required</span>
</label>
<input id="name" name="name" aria-required="true">
This approach ensures accessibility, semantic correctness, and W3C HTML validation compliance.