Overview
PowerReviews is dedicated to enhancing the accessibility of our review displays. We are rolling out enhancements that align with WCAG 2.2 standards, validated by leading accessibility experts.
The outcome of these efforts is greater inclusivity, reduced risk, and an improved out-of-the-box experience for all customers.
An independent accessibility vendor conducted a manual audit of the PowerReviews display and collection system. The audit identified 145 issues across 41 components, predominantly ranging from high to medium severity. No critical issues were found.
Some of the necessary fixes may alter the styling of clients' review displays and collection forms, particularly for those with extensive customizations. These changes will be controlled by a setting that will be opt-in for existing clients and enabled by default for new clients.
Enabling and Testing Accessibility Updates
For existing clients, these updates will not be enabled by default. Our team must activate these enhancements for you to ensure a smooth rollout. Please test the new updates (below) before having them enabled.
Contact PowerReviews to Enable Accessibility Settings
To activate the new WCAG 2.2 accessibility updates for your review display and collection forms, existing clients should contact their Client Success Manager. PowerReviews must enable these settings; please do not attempt to activate them yourself. New clients will have these updates enabled by default.
Test Accessibility Settings for Custom Styling
Before implementing accessibility improvements in your live environment, test your current review displays and collection forms for compatibility.
- New updates may impact custom CSS and styling.
- Review all page layouts where PowerReviews components are present.
- Resolve any problems or consult with your web development team as necessary.
How to Test Accessibility Enhancements Using URL Parameters
Preview accessibility updates on your site by appending special parameters to your product page URLs. No code changes are required.
To test, use either or both of the following parameters:
?pr_ACCESSIBILITY_UPDATES_WCAG2_2=true?pr_WCAG2_STAR_CONTRAST_ENABLED=trueExample
Your product page URL:
https://www.yourstore.com/products/sample-productTo include the desired parameter(s), add them to the end (e.g., ).
https://www.yourstore.com/products/sample-product?pr_ACCESSIBILITY_UPDATES_WCAG2_2=trueor
https://www.yourstore.com/products/sample-product?pr_WCAG2_STAR_CONTRAST_ENABLED=trueTip: You can test both settings simultaneously by joining them with an ampersand (&).
https://www.yourstore.com/products/sample-product?pr_ACCESSIBILITY_UPDATES_WCAG2_2=true&pr_WCAG2_STAR_CONTRAST_ENABLED=trueSummary of Accessibility Fixes
General Enhancements
These fixes have been pushed to production and are automatically applied to all PowerReviews components.
- Improved Screen Reader Experience:
- Removed Redundant Labels: The word "dialog" was removed from the "Flag this review" modal's aria-label.
- Hidden Decorative Elements: The "X" and flag SVG icons are now hidden from screen readers to reduce verbosity.
- Improved Error Association: Each error in a form is now properly associated with its corresponding field, so screen readers can announce it directly.
- Fixed Hidden Content: The date on the review submission "Thank you" page is no longer hidden from screen readers.
- Enhanced Form Control Instructions: The review meter and comments field are now programmatically associated to improve usability.
- Added Text Alternatives for SVGs: aria-labels were added to SVG images like the Instagram logo for better screen reader interpretation.
- Added Image Descriptions: Generic ARIA labels were added to buyer images, and alternative text was added to the PowerReviews logo in the instance the logo is not present.
- Updated Placeholder Text: The search placeholder was updated from “Enter Search Terms” to “Enter Terms to Search Reviews.”
- Improved Filter Dropdowns:
- Corrected aria-expanded Attribute: The aria-expanded attribute is now correctly set to false for unexpanded filter dropdowns.
- Corrected Button Behavior: The aria-expanded attribute is now correctly removed from DROPDOWNS_V2 filtering when on mobile or zoomed in.
Enhancements Behind Enablement (Requires Action)
Since these fixes might significantly alter the appearance or functionality of your components, particularly if custom CSS is in use, PowerReviews must enable them upon request. Please contact your dedicated Client Success Manager to arrange for their enablement. We recommend testing these changes before they are enabled.
- Updated Flagging Form UI:
- Changes: Substantial changes were made to the flagging form, including a new header, a more prominent required field asterisk, and rounded buttons/modal edges. The "X" button was also moved inside the modal for better contrast.
- Risk: These changes may conflict with custom CSS and styling.
- Placeholder Removal from Email Input:
- Changes: Placeholder text was removed from the email input field in the Write-a-Review (WAR) form, as it was being used incorrectly for functional information.
- Risk: This may impact any custom styling tied to the placeholder element.
- List Markup Enhancements:
- Changes: Various components and elements are now correctly marked up as unordered lists (<ul> and <li>) to provide better context for screen reader users, who will be told how many items are in the list.
- Affected Components:
- Image galleries (grid and scroll layouts)
- Review Snapshot's Pros & Cons section
- "Share to" buttons on the Thank You page
- Media within Answers on the Q&A Display
- Risk: Clients using custom CSS that targets specific HTML elements may see styling regressions.
- High-Contrast Stars & Histogram:
- Changes: The default rating stars and histograms were updated to a new, higher-contrast color for improved visibility and accessibility.
- Affected Components: Review Display and Write-a-Review (WAR) Form.