Accessibility
A complete guide to configuring Primavera in the most accessible way possible.
Last updated
A complete guide to configuring Primavera in the most accessible way possible.
Last updated
Thank you for taking an interest in the accessibility of the Primavera theme! This page serves as a configuration guide to ensure maximum accessibility across your store. If you are looking for our approach on accessibility, visit our .
We have set up one store preset, Artistry, to model best practices for accessibility across the theme. We recommend either choosing this preset or looking to this preset as inspiration if accessibility is a priority for you.
We have developed Primavera in order to allow merchants to fully comply with accessibility guidelines such as , but there are several parts of the content that individual merchants are responsible for.
Users may wish to avoid autoplaying or movement for a variety of reasons. It can be difficult for some users to focus on reading text when there are animated elements on the screen, or certain types of motion may trigger motion sickness.
Where there is motion in the theme, users should have the ability to stop the motion to compy with . If this is especially of concern to you, we recommend disabling autoplay globally across all sections as well as ensuring the pause button visibility is set to always.
The theme detects for users who have opted for reduced motion at a browser level in order and shows animations and moving elements with a paused state by default.
Color schemes need to comply with and . Below is a list of contrast requirements for setting up your color schemes.
Text needs to have a contrast ratio of 5:1 with the background. The WCAG criteria states this must be a 4.5:1 contrast ratio, but the theme uses a semi-transparent version of the text color in some places as a decorative accent so a greater level of contrast is required.
Text secondary needs to have a contrast ratio of 4.5:1 with the background.
Exception accent needs to have a contrast ratio of 4.5:1 with the background.
For buttons, either the border or the background should have a contrast ratio of 3:1 with the section background color. If the button contains text, the button text color needs a 4.5:1 ratio with the button or page background.
Text on top of images can have poor visibility, especially as the image or text may appear differently at different screen sizes. Consider using the 'Enable overlay' setting in imagery sections or enabling 'Stack content on mobile' to guarantee proper visibility for all screen sizes. For buttons, consider using the primary or secondary styles as opposed to text to increase visibility of the buttons in situations where the background image may not have enough contrast with the controls.
All images and videos should have suitable alt text in order to communicate the purpose of the image for non-sighted users. This is especially important for content within interactive controls such as links or buttons, so that the user has a sense of what the control is doing. This is an issue that is easily detectable by automatic linters and is high priority to resolve.
Third party apps often create blocking accessibiltiy barriers. For example, an inaccessible popup modal can render a site completely unusable for disabled users, and opens up your site to litigation. Primavera cannot control the content or accessibility of third-party apps, including sections from third-party vendors or code customizations. Ask your app vendors about their accessibility before purchasing.
Primavera cannot control the accessibility of third-party apps. It is easy for a single app to create a breaking experience for disabled users, and opens up your site to potential litigation. This includes third-party sections available for purchase, and any other customer-facing code that is installed to your storefront. We recommend you ask vendors about their accessibility practices before purchasing services. Feel free to reach out to support if you have any questions.
Appearance > Label style: We recommend setting this value to 'Always on top'. While not an explicit WCAG violation, having floating labels can cause some users to think that the input is already filled.
Appearance > Input style: Some users may be confused about whether or not an input is an input unless it is fully contained. We suggest using the 'box' value.
Optimizations > Accessibility > Show focus outlines on text inputs: When this option is disabled, the theme will load the what-input JavaScript library to compensate for some Safari related focus ring bugs, and it will hide focus rings on text inputs. For better performance and a more clear user experience when working with forms, we suggest enabling this option, but it is not required to meet WCAG.
Optimizations > Accessibility > Shows a video description button when video alt text is created: Providing text alternatives for video content is required to comply with WCAG. Enabling this button will generate a transcript button with the alt text assigned to the video. We recognize that some stores may have used the alt text for alternative purposes so we have provided the option to disable this functionality, but bear in mind that this is a WCAG violation.
This guide will mention accessibility tips and caveats for certain sections on the theme.
Sidebar menu and Header:
Promotion blocks should contain a visible label for greatest accessibilty. If you choose use an image without a label, the image alt text must include a description of the link destination.
Announcement bar
Disable autoplay or consider limiting this section to use one single announcement.
Banner grid:
Reading order between desktop and mobile should be consistent. The first mobile banner should be the first desktop banner and etc.
Footer
In footer image or logo blocks, you may add a link to the the image, but you should also add a label for the link purpose so that screen reader users understand where the link is pointing to.
Logo list
Use the stack layout instead of the automatic logo list to reduce motion.
Scrolling content
Use a rich text section with customized padding in order to create a small banner without motion.
Slideshow
Hover arrows may not provide a strong enough signal to users that this section is a slidehsow. We recommend using arrows that are persistently visible, either the overlay or below option.
Consider disabling autoplay to avoid users experiencing content changing unexpectedly as they are reading it.
Video banner
Consider disabling autoplay as this can make it difficult for certain users to read the text on top of it.
Blog posts, Collection list, Featured collection, Multicolumn, Testimonials
Choosing the grid layout option to keep content persistently visible provides a stronger affordance that there is additional content over the slideshow option.
While we have included alt text across the theme for all user interface controls, merchants are responsible for writing alt text for their own content. Visit for your images.
Link text should describe the the content that they link to. Try to avoid generic link text as 'Shop now' or 'Read more', as this also has negative implications for SEO. Screen reader users have the ability to list all links, and multiple links with the same text and different destinations is a . Where there are links such as 'Read more' or 'Shop now' in the theme, these have been coded to incorporate additional context from things like the product, collection or blog post title automatically.