问题
I'm showing product ratings using Unicode star symbols. iOS VoiceOver doesn't read this aloud correctly, so I thought I'd use aria-label on my span to tell screen readers what it means.
<span aria-label="4.0 stars out of 5, 123 ratings">★★★★☆ 4.0 (123)</span>It's not working. iOS VoiceOver ignores my aria-label completely.
What am I doing wrong? How can I fix this?
回答1:
The aria-label is sometimes ignored by some assistive technology if the element you put it on doesn't have any semantic meaning. A <span> doesn't have semantic meaning. If you add a role that is appropriate for your stars, then it should be read correctly.
回答2:
One method would be to add a role=img
<span aria-label="4.0 stars out of 5, 123 ratings" role="img">★★★★☆ 4.0 (123)</span>
来源：https://stackoverflow.com/questions/54141817/use-aria-label-on-a-span