![(please configure the [header_logo] section in trac.ini)](/chrome/site/your_project_logo.png){kind=logo}
Opened 7 weeks ago
Last modified 6 weeks ago
#8276 new defect (bug)
Profile Page: The plugin's star rating is not being read correctly by screen readers
| Reported by: | wildworks | Owned by: | |
|---|---|---|---|
| Priority: | normal | Milestone: | |
| Component: | Profiles | Keywords: | has-patch |
| Cc: |
Description
In the plugin section of the profile page, ratings are displayed with stars next to the plugin title link. While these ratings are understandable to sighted users, they are not accessible to users who rely on screen readers. When the title link is focused, my NVDA reads it as follows:
Plugin Name heading Plugin Name Block Extension link visited
Please note that meaningless characters are being read.
<h3>
<a href="">Plugin Name</a>
<div class="wporg-ratings" title="4 out of 5 stars" style="color:var(--wp--preset--color--pomegrade-1, #e26f56);">
<span class="dashicons dashicons-star-filled"></span>
<span class="dashicons dashicons-star-filled"></span>
<span class="dashicons dashicons-star-filled"></span>
<span class="dashicons dashicons-star-filled"></span>
<span class="dashicons dashicons-star-empty"></span>
</div>
</h3>
This HTML should be modified as follows:
<h3>
<a href="/">Plugin Name</a>
<div class="wporg-ratings" aria-label="4 out of 5 stars" style="color:var(--wp--preset--color--pomegrade-1, #e26f56);">
<span class="dashicons dashicons-star-filled" aria-hidden="true"></span>
<span class="dashicons dashicons-star-filled" aria-hidden="true"></span>
<span class="dashicons dashicons-star-filled" aria-hidden="true"></span>
<span class="dashicons dashicons-star-filled" aria-hidden="true"></span>
<span class="dashicons dashicons-star-empty" aria-hidden="true"></span>
</div>
</h3>
- Use the
aria-labelattribute instead of thetitleattribute. - Add the
aria-hiddenattribute to the stars.
Attachments (1)
Change History (7)
This ticket was mentioned in PR #663 on WordPress/wordpress.org by @joedolson.
6 weeks ago
#1
- Keywords has-patch added
#2
@
6 weeks ago
Maybe partially resolved by https://github.com/WordPress/wordpress.org/pull/663; but that markup does include aria-label, and it's not clear to me how it relates to the block used for ratings, so I'm not really sure.
@wildworks commented on PR #663:
6 weeks ago
#3
I think this PR likely aims to fix the review content on the plugin page.
In this section, the rating is outside the heading, so even if the title link is focused, screen readers apparently don't read out the rating.
<div class="header-top"> <div class="wporg-ratings" aria-label="3 out of 5 stars" data-title-template="%s out of 5 stars" data-rating="3" style="color:#ffb900;"> <span class="dashicons dashicons-star-filled"></span> <span class="dashicons dashicons-star-filled"></span> <span class="dashicons dashicons-star-filled"></span> <span class="dashicons dashicons-star-empty"></span> <span class="dashicons dashicons-star-empty"></span> </div> <h3 class="review-title"> <a class="url" href="https://wordpress.org/support/topic/good-direction-but-still-lacks-flexibility/">Good Direction, But Still Lacks Flexibility</a> </h3> </div>
Perhaps the solution is to inject screen reader text into the heading?
<div class="header-top"> <div class="wporg-ratings" aria-label="3 out of 5 stars" data-title-template="%s out of 5 stars" data-rating="3" style="color:#ffb900;"> <span class="dashicons dashicons-star-filled"></span> <span class="dashicons dashicons-star-filled"></span> <span class="dashicons dashicons-star-filled"></span> <span class="dashicons dashicons-star-empty"></span> <span class="dashicons dashicons-star-empty"></span> </div> <h3 class="review-title"> <span class="screen-reader-text">3 out of 5 stars</span> <a class="url" href="https://wordpress.org/support/topic/good-direction-but-still-lacks-flexibility/">Good Direction, But Still Lacks Flexibility</a> </h3> </div>
Additionally, I found that to fix the original ticket, we will likely need to make the fix in a different repository. Here it is.
#4
@
6 weeks ago
https://github.com/WordPress/wporg-theme-directory/pull/163 should fix this issue, but I'm not sure how to test it locally.
@joedolson commented on PR #663:
6 weeks ago
#5
So many different places these things are kept... :D
@wildworks commented on PR #663:
6 weeks ago
#6
This PR should resolve the original issue. https://github.com/WordPress/wporg-theme-directory/pull/163
Partially fixes https://meta.trac.wordpress.org/ticket/8276 by adding
aria-hiddento the ratings star output.However, the container already has an
aria-label. This is run throughwp_kses_postat a few points, but I wouldn't have expected that to removearia-label, so I'm not sure why it's gone.In block contexts, this is rendered via
wporg/ratings-stars, but I have no idea where that is.