Can/Should I Label an informational span for screen readers?

Question

I have an informational span, specifically, a span full of stars that represent a rating (star icons that can be filled or unfilled). As is, it shouldn't be visible at all to a screen reader, since there is no text to read, but the information is important to a user. I'm thinking of putting a label in that's only visible to screen readers. From the MDN docs, that seems like it's okay, since they say it

represents a caption for an item in a user interface

and there is language that says it "can" be associated with a control, but none that it must be. That makes sense, since you can associate a label with a fieldset as well as an input, but I'm not sure if that extends out to labeling a span. (as @Jukka notes, label is not appropriate for fieldset, I was thinking of legend)

Is labeling a span with equivalent information sufficient for a screen reader to see and use it? Is that bad practice?

Answer 1

No. The label element is meant for labeling controls (form fields), and for them, it has support in user agents and in assistive software. Using it to label something else is illogical and most probably does not serve a useful purpose: either it is ignored, or it is implemented in a manner that makes the user think that it is associated with a control.

Formally, the close-to-de-facto-standard HTML5 CR says that the label element must be associated with a “labelable element”; this is defined so that e.g. span is not labelable (and neither is fieldset: a label element must label a control, not a set of controls).

The MDN site is not authoritative. Though generally very useful, it is misleading in this issue. The label element is not for labeling “user interface elements” in general.

The most accessible way to present ratings with stars is to use a separate image for each number of stars and an alt attribute that expresses the number in words, e.g. <img alt="Three stars out of five" src=stars3.png>. There are various other approaches. If you use a span element that you somehow format to look like some number of stars, then the technique most probably does not provide for good accessibility. If you have to work under such conditions, use a title attribute on that element, expressing the rating verbally. The attribute will be read by some software under some conditions.

Answer 2

not disagreeing with @jukka's opinion on using img / elements, but here's another version using input /s http://jsfiddle.net/leaverou/CGP87/light/

Answer 3

You should use role and aria-label properties.

Mozilla give this example : https://codepen.io/svinkle/pen/oYjoNE