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?


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.

  • the w3c link you included says "The label element represents a caption in a user interface." just like mdn – albert Jul 18 '14 at 17:49
  • @albert, HTML5 documents might be a bit fuzzy in this issue, but the intent is that “user interface” refers to controls. A label element that is not associated with a labelable element has no meaning assigned to it. – Jukka K. Korpela Jul 18 '14 at 17:56
  • right, but they don't have to be in a form or connected to a form....at least in html5...if i understand it correctly – albert Jul 18 '14 at 20:42

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

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.