IMPORTANT NOTE: Payhip have been so good at responding to requests to make shops more accessible that this tutorial is no longer relevant. Whilst there are still some problems, they are actively working on fixing them.
After writing part one of my tutorial on increasing accessibility in Payhip stores and doing more testing, I have found more improvements that can be made, so let’s get to it!
Once again, I am supplying code that you can copy and paste so that it’s useful for the largest number of people possible. If you know CSS, I’ll try and explain what each change is doing in regards to accessibility so you can edit it to your own tastes.
If you haven’t read part one of my tutorial on increasing accessibility in Payhip stores, you will need to read that first in order to know where to paste the css code mentioned throughout this tutorial.
The Store Page
These changes should all be pasted into the “customise css” box for the store page.
The Rainbow Stripe
The rainbow stripe at the top of the page is very distracting, which can cause issues for people who are visually sensitive. Let’s get rid of it.
div.stripe
{
display: none;
}
The Share Button
The share button on Payhip stores is a huge problem when it comes to accessibility because it has no indication of what it is for unless you’re familiar with the share icon on mobile devices. I am familiar with the share icon on mobile but I still didn’t understand what it was until I clicked on it. (In fact, I only realised that’s what it was today).
We can’t edit the html to give it a name, but we can make sure the text is readable and it’s purpose is obvious. (Huge thanks to Twitter user superastrofemme, who helped me with the font change!)
/* Change Share Button to Say "Share" */
a.btn.btn-default.dripicons-upload.display-share-seller-profile-button::before
{
font-family: proxima-nova,Arial,Helvetica,sans-serif !important;
content: "Share";
color: #555;
}
This is how the share button should look now. (The change in the colours of the “follow” button were covered in part 1 of Maximising Accessibility in Payhip Stores).
Even though this button now has a visible word on it, screen readers can still not tell what it is. Unfortunately there’s nothing we can do about this, but I will be following up with Payhip to see if they can fix it.
The Social Media Account Icons
By default, the social media account icons are very small, pale circles. When you click on these, they go to the Payhip shop owner’s social media accounts. On desktop they’re way up in the top, right hand corner of the page, whilst on mobile, they sit under the shop name.
Let’s make them larger, and put a little extra space between them. This makes them easier to see, and easier to use on mobile. I’m increasing the size by 150% and making them slightly more opaque. They’ll be easier to see, but not black, which would grab the visitor’s focus away from the main content of the page.
/* Increase size and opacity of social sharing icons */
.ap-top-author-details .on-the-web-wrapper img
{
width: 30px;
height: 30px;
margin-right: 15px;
opacity: .5;
}
The social media account icons will now be slightly larger and darker like those in the image below. The number of icons on your page will depend on how many of your social media accounts you have linked to Payhip.
The Active Collection Button
When you use collections in Payhip, the button for the collection you are currently looking at is called the “active collection button’. The background was just a little too light in contrast to the white text. This code will make it match the blue of the price and other elements on the page.
/* Darken backround on the active collection button */
.ap-collections-wrapper a.active, .ap-collections-wrapper a.active:hover {
border-color: #0a5f91;
background-color: #0a5f91;
}
Here’s how the active collection button will look after the changes. The background is a little darker than previously.
The “More” Down Arrow
Using a link to make footer navigation show up is not a best practice. The best thing to do would be to make the links visible at all times, or at least give the arrow link a name, but we can’t do that. Since we can’t, let’s change the text of the link to make it more obvious what clicking on it will do.
/* Change down arrow to text and make some room between links*/
.profile-page-footer a
{
margin-right: 20px;
}
.profile-page-footer a#footer-show-more-link
{
position: relative;
top: -1px;
}
.profile-page-footer a#footer-show-more-link:before
{
font-family: proxima-nova,Arial,Helvetica,sans-serif !important;
font-size:0.9em;
content: "(more…)";
}
The arrow has now been changed to say “(more…)”. Note that my background is green. Yours will either be the default grey, or the colour you chose to use.
As with the share button, this link still can’t be seen by text readers and I’ll be following up with Payhip about this, and other issues to see what they can do to fix them.
Changing the Footer Links for Mobile
When you have links that are close to each other, you need to have plenty of space around them on mobile websites because fingers are bigger than cursors. The following code will make all of the links in the footer look like buttons if you’re viewing the page on a device fewer than 600 pixels wide.
@media only screen and (max-width: 600px)
{
/* Change footer link styling for mobile */
.profile-page-footer a, #footer-more-section a
{
text-decoration:none;
color:#fff;
background-color: #0a5f91;
display:inline-block;
border-radius: 5px;
padding:15px;
margin:5px;
}
.profile-page-footer a#footer-show-more-link
{
display: block;
max-width:100%;
}
.profile-page-footer a#footer-show-more-link:before
{
color:#fff;
}
.profile-page-footer a, #footer-more-section a:selected
{
color: #0a5f91;
background-color: #D3D3D3;
}
}
Here’s how the footer links will look on mobile. Again, your background colour will be different to mine.
The Product Pages
These changes should all be pasted into the “customise css” box for the product pages.
The Rainbow Stripe
We’re going to get rid of the rainbow stripe on the products page in the same way we did on the store page.
div.stripe
{
display: none;
}
Text and Slideshow Button Contrast
When you have uploaded more than one image for a product, there will be arrows in pale grey boxes on either side of your images. The background of these, and the colour of text in the page need to be slightly darker.
/* Change the colour of the slideshow arrows */
button.slick-arrow
{
background-color: #aaa;
}
button.slick-arrow:hover
{
background-color: #666;
}
/* Change the colour of text */
.view-page-wrapper .by-seller-section, .meat-skirt .description, .view-page-wrapper .view-page-meta .meta-file-size, span.dripicons-duplicate
{
color: #666;
}
The “More” Down Arrow
Just as we did for the store page, we need to change the text of the down arrow in the footer to make it’s purpose clearer.
/* Change down arrow to text and make some room between links*/
.view-page-footer a
{
margin-right: 20px;
}
.view-page-wrapper .view-page-footer a#footer-show-more-link
{
position: relative;
top: -1px;
}
.view-page-footer a#footer-show-more-link:before
{
color: #555;
font-family: proxima-nova,Arial,Helvetica,sans-serif !important;
font-size: 0.9em;
content: "(more…)";
}
Changing the Footer Links for Mobile
The following code will change the links in the footer on mobile to match those on the store page
@media only screen and (max-width: 600px)
{
/* Change footer link styling for mobile */
.view-page-wrapper .view-page-footer a, #footer-more-section a
{
text-decoration:none;
color:#fff;
background-color: #0a5f91;
display:inline-block;
border-radius: 5px;
padding:15px;
margin:5px;
}
.view-page-footer a#footer-show-more-link
{
display: block;
max-width:100%;
}
.view-page-footer a#footer-show-more-link:before
{
color:#fff;
}
.view-page-footer a, #footer-more-section a:selected
{
color: #0a5f91;
background-color: #D3D3D3;
}
}
The Checkout Page
Changing the Footer Links for Mobile
One last change is to make the footer links on the checkout page match the rest of the site.
@media only screen and (max-width: 600px)
{
/* Change footer link styling for mobile */
.checkout-footer .checkout-footer-left
{
background-color: #f4f4f4;
padding: 15px;
}
.checkout-footer .checkout-footer-right a
{
text-decoration:none;
color:#fff;
background-color: #0a5f91;
display:inline-block;
border-radius: 5px;
padding:15px;
margin:5px;
}
.checkout-footer .checkout-footer-right a :selected
{
color: #0a5f91;
background-color: #D3D3D3;
}
}
How Has Making these Changes Improved Accessibility?
If you were to check your Payhip shop’s accessibility using Lighthouse in Chrome’s dev tools, you’ll find the score has been improved by about 5 points. That’s not a great difference, and honestly, it’s not a good score (57 on desktop and 75 on mobile). The changes that still need to be made are simply beyond our control as Payhip shop owners.
What we have done, however, is supply some workarounds for the problems that remain, and improved a lot of the accessibility features that cannot be measured by software.
If you have added all of the changes, including those from part one of my tutorial on increasing accessibility in Payhip stores, you’ll have made sure that:
- Even though your photos don’t have any alt tags, the names of your patterns are immediately available on the main shop page, and descriptions of the photos are available in the text block on your product pages.
- People who navigate by tabbing through your page on a keyboard can navigate through the whole page without getting stuck.
- Whenever a link or button is being selected, or a mouse is hovering over them, there’s an obvious change in the way they look.
- It’s obvious what all the links and buttons are for if you are sighted, and with some assistance technology. I’ll be following up with Payhip to see if they can make the share and “more” footer links readable to screen readers.
- It’s possible to navigate the page and purchase a pattern using the NVDA screen reader, aside from the previously mentioned links. (NVDA is an open source, free screen reader used by approximately one third of screen reader users. You can download it to test if it works with your website, and what happens if you don’t have alt text on images).
- All elements can be seen by people who are colour blind.
- All fonts are of a reasonable contrast and size, and zooming in to the page will make them larger.
- Pages are fully viewable, even when zoomed in to 300%
- There are no videos or animated elements that will play without the visitor’s consent and prior knowledge.
I will be following up with Payhip over time to see if they can fix some accessibility aspects of stores when their budget allows for coding changes. In the meantime, hopefully the changes in my tutorials are helpful.
