What HTML should I use for a rated theatre review?
I'm authoring a reusable widget, in HTML, that reflects a common pattern often seen in theatre reviews. The widget is quite simple, with minimal components, namely:
- A star rating,
- The review itself
- The reviewer (an individual/publication/website etc)
My main concern is that it's accessible to site visitors using screen readers, and so I'm wondering what the ideal mark-up would be. Currently, I'm using the following pattern:★ ... ★
I'm fairly certain an
articleat the root is correct, but I'd love to know if anyone has any thoughts on how to improve this.
When you ask about HTML specifics, it becomes more of a StackOverflow.com type question instead of a UX question so you might have to post there instead.
But I can still comment on what you have since I'm in both forums.
It's good to have a "text alternative" for your star rating so that it can be conveyed to assistive technology such as screen readers and Braille devices, but specifying an
is often not honored. See " https://www.w3.org/TR/using-aria/#label-support ", in particular, the third last bullet point:
Don't use aria-label or aria-labelledby on a span or div unless its given a role.
In your case, you can probably treat your star rating as an "image" even if it isn't graphical, although you can peruse all the possible roles here - https://www.w3.org/TR/wai-aria/#role_definitions . You could even give it an image role but give it a more descriptive definition of the role by using https://www.w3.org/TR/wai-aria/#aria-roledescription . But I would probably keep it simple:★ ... ★
Note that the actual role name is "img" and not "image".
Hiding the actual star characters with
Just for fun, I also tried:
It's sounds good with NVDA on Firefox but that's a very minimal test. You'd want to try other browsers (Chrome), other screen readers (JAWS), and other platforms (VoiceOver on Mac and iOS).