Alternatives for using an aria-label on a span

Invalid: aria-label on a span

The example below is not valid per ARIA 1.2. It is using a span with an aria-label. Not all screen readers will read this text. See: Short note on aria-label, aria-labelledby, and aria-describedby.

        <span aria-label="4.3 out of 5 stars">
            <span class="fa fa-star"></span>
            <span class="fa fa-star"></span>
            <span class="fa fa-star"></span>
            <span class="fa fa-star"></span>
            <span class="fa fa-star-half-o"></span>
        </span>
    

Recommended: using "offscreen" text

From what I can find, the most foolproof option is using an "offscreen" method for screen reader text. One implementation of this is the .sr-only class in boostrap.

        <span>
            <span class="sr-only">4.3 out of 5 star</span>
            <span class="fa fa-star"></span>
            <span class="fa fa-star"></span>
            <span class="fa fa-star"></span>
            <span class="fa fa-star"></span>
            <span class="fa fa-star-half-o"></span>
        </span>
    

Questionable: using the title attribute

Another option is using the title attribute, but from what I have read, it is does not consistently work for screen reader users:

• Don't Rely on the Title Attribute for Accessibility
• Using the HTML title attribute

        <span title="4.3 out of 5 stars">
            <span class="fa fa-star"></span>
            <span class="fa fa-star"></span>
            <span class="fa fa-star"></span>
            <span class="fa fa-star"></span>
            <span class="fa fa-star-half-o"></span>
        </span>