1

the rating system is not accessible to blind people using a screen reader.

I recently found out that your site offers recommendations based on my album ratings. The problem is that i can't choose a rating using my screen reader NVDA. I am using chrome with windows, btw. When I am on an album page, i can only see this:

AllMusic Rating
10
User Ratings (6.770)
Your Rating
Your user rating

I guess you can somehow change the "your rating" line to some value, however I am unable to do so.

maybe a combo box would be helpful, but I don't know how that would affect the visual component of the site.

Follow

3 replies

Votes Newest Oldest
D

Hello! My wife actually ran into the same issue. Here's what we came up with that worked for her:

I built a custom javascript snippet that adds a button containing a header, that says "Rate Album" (for ease of navigation). Clicking it opens a prompt box, where the user can rate the album 1 through 10.

The script can be found here: https://gist.githubusercontent.com/duplaja/0bfff713c1eb030a8fa47888ff85c1a5/raw/f97ef1f0871c1f19da96c0bec3cfb83a70bbb604/allmusic-ratings.js

To use it, you'll need a Chrome extension that allows custom JavaScript on a per-site basis. We used "User JavaScript and CSS", but others should work. The page rule was targeted to: https://www.allmusic.com/album/*

If you have questions, please don't hesitate to ask!

Comment

This is great information. We are currently working on an update to AllMusic pages with greater accessibility in mind.

Do either of you know of examples of websites that do a good job allowing users to rate content while using a screen reader?

Comment
D

Zac, that's great to hear!

Sites that work well with rating (screenreader): Album of the Year (has a text box + rate button)

Sites that do not handle ratings well with screen readers (AllMusic, RateYourMusic) tend to use a "hover + click" method on visual stars to rate, where the rating is indicated by highlighted stars.

A star method could work, but it would need to a) be properly labeled (via aria-label or title with its rating value) and b) would need to be marked to the screenreader as an element that can be controlled (role="button"), and c) should probably have a unique web element per rating (not the whole / half determined by hover position on a single star, but an element for 3, one for 3.5, one for 4, etc)

W

hi.

thanks for the script. it works very well.

and also thank you for the interest in accessibility. hopefully something can be done to all the site's feeatures.

Comment
D

I'm glad to hear it's working well for you!

Reply