3

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?

3 Answers 3

3

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.

3
  • the w3c link you included says "The label element represents a caption in a user interface." just like mdn
    – albert
    Jul 18, 2014 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. Jul 18, 2014 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, 2014 at 20:42
0

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

0

You should use role and aria-label properties.

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

1
  • Can you summarise what this is and why role / aria-label is needed? If you're linking off to an external source to provide the detail then that's not really answering the question, you're saying 'this place elsewhere is where you should go'. As a repository for UX solutions, ux.stackexchange answers should all attempt to directly answer the questions. If that link goes down, or the site/page gets deleted then your answer here becomes totally useless. Links to external sites should be used as citations / references, not as the answer.
    – JonW
    Feb 2, 2021 at 11:53

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

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