difficulty rating a plugin

This is probably not in the domain of plugin developers but the guys who run the www.ads-software.com site itself

In what way could the markup be adjusted to fix this issue?

Looking at the code, I can see that the title tag for each rating option is empty. It might help to fill each title tag with the number for each option, e.g. <a href="//www.ads-software.com/support/view/plugin-reviews/toggle-wpautop?rate=1#postform"title=”1″><span class=”dashicons dashicons-star-filled” style=”color:#e6b800 !important;”></span> … should allow for a link that says “1” instead of “plugin-reviews-wpautop”.

I hope this works. I have not tried inserting code into a post with the visual editor before.

If we added a title to each of those stars, then would it not read 1,2,3,4,5 at that point? Would that be preferable?

I’m not used to screen-readers, so I don’t know what the proper way for it to be arranged or understood properly would be. I imagine that “Rate it 1 star”, “Rate it 2 stars” on those would be quite annoying. But if a 12345 works, then that could be done easily enough.

Also, we’d probably only want that on the “your rating” piece, not on the rest of the places stars appear (especially those that are not links).

Ideally, the screen reader should say the number of stars when you see the number of stars. It is helpful for us to be able to see other people’s ratings, too, as sometimes that can influence the choice of plugins. I do realize this is a lot of code–hopefully there is a way to change it in CSS.

Maybe the issue is that the current way it’s implemented through the ‘title’ attribute on the ‘div’ is not well supported.

Hidden plain text usually meets the majority of assistive technologies:

<div class="wporg-ratings">
    <p class="hide">Rating 5 out of 5 stars</p>
    <span aria-hidden="true" class="dashicons dashicons-star-filled"></span>
    <span aria-hidden="true" class="dashicons dashicons-star-filled"></span>
    [...]
</div>

...
.hide {
    left: -999em;
    position: absolute;
}

@sarah, on a Review landing page such as this one, can you find the section that has “19 reviews” easily? Would a heading help?

Hi Andrew. Yes, generally screen readers do pick up hidden text. I think you are right that there is probably a better solution for the rating selections. I have suggested that a friend join this discussion who also is much better at this stuff than I am. I can tell you exactly what my screen reader is reading to me, which is the code from the link. That tells me it either needs a title or some other means of associating the link with form data. There are other means of doing this, or other form designs that could accomplish the same things. Other form designs would run into the same need for associated ID, label, title, etc.

@andrew, on your linked page, a heading would be helpful where the “19 reviews” begins. I can read the “5 stars 18 4 stars 0 … etc. part. The only place where I am not able to read the number of stars is where I go to enter my own rating.

That’s great for your friend to join. The more help that we can give the www.ads-software.com developers, the easier it is for them to improve things.

Regarding the Review landing page, I think you’re looking at a different bit to me. As I’m sighted, I can see a section that gives an overview of all of the ratings of the page. Visually it says, “19 reviews. 18 are 5 stars and all other stars have not been rated yet”. Do you get any of that when you skim through the page?

Oops sorry I posted at the same time as you

@otto, A little way to assist people in finding things is to provide a good heading level structure. People can use the headings to skip to different parts of the page and they can use headings to understand relationships between content on the page.

The heading level structure on that page isn’t ideal, but a quick win could be to add a couple of hidden headings.

One here:

<div class="review-ratings" itemprop="aggregateRating" itemscope="" itemtype="https://schema.org/AggregateRating">
<h3 class="hide">Ratings overview</h3>

and one here:

<div class="review" itemprop="review" itemscope="" itemtype="https://schema.org/Review">
<h3 class="hide">Reviews page 1 of 2</h3>

It comes across, though in a different manner… The screen reader reformats the page, so the info is presented like:
19 reviews
5 stars 18
4 stars 0
3 stars 0
2 stars 0
1 stars 0

That is generally helpful… When I am scanning the plugins page, I get things like

ratings 6
3.5 stars

etc.

The only problem I am having is on the review posting. I nearly gave an app a 1-star review and posted a glowing comment about how much I loved it, assuming the first link in the table was 5 stars.

The headings would be helpful… I think that is probably a minor concern compared to the review form itself. Not being able to use the form keeps me from helping out the community, whereas lack of headings just means that I need to work a little harder to find what I am looking for.

Oh I see, thank you for clarifying.