Menu Close

Category: Websites

How to Write Image Alt Text for Craft Websites

There has been a lot of interest in website accessibility in the craft community recently, so I have written this tutorial to help everyone who is having trouble figuring out what to write in the alt text for their images, and for those who want to know why alt text is important.

Alt text is important for a few reasons. Not only for screen readers, but also for website SEO (search engine optimisation), and for anyone whose internet connections are faulty or very slow.

You may be asking, what is image alt text? Basically, it’s a piece of code that sits on a web page with your image that describes what the image is. People can read it if they’re using a screen reader or the image hasn’t loaded, and search engines can read it so they know what your picture is.

I’m going to start with some information on alt text, and how to add it to your site if you’re coding it yourself, or if you’re using WordPress.

Writing Alt Text, the Basics.

What Alt Text Is and How to Write It

If you’re writing the code for your website yourself, or just want to know what makes good alt text on a general website, Moz’s article on Alt Text for images is a great place to start. If you’re not writing the code yourself you can ignore what the code looks like and concentrate on the sections about writing the descriptions, and why alt text is important.

How to Add Image Alt Text in WordPress

A lot of websites are run using WordPress because it’s easy for the owner to add new content. I am assuming that you are using the latest version of WordPress and know how to upload an image.

Image alt text is used in several areas in WordPress, not only within posts and pages, so it’s best to always use the “best practice” method I’m going to outline below, rather than the just adding it within your post/page. This will mean your image will always have alt text, and you’ll still be able to tweak it inside the post/page specifically for the context of your article (if writing on a computer).

Go to your media library and upload an image. You’ll see the upload box with a tiny thumbnail of your image underneath. Click on the link on the right that says “edit”.

Wordpress media uploader after uploading a new image.

In the top text box write the title of your image. Under your image in the box named “Alternative Text”, write your alt text.

Edit media page for a WordPress image. From top to bottom, the title, image, edit image button and text box for alt text.

When you write your post or page, you can now add the image and the alt text will already be in place.

If using a computer rather than the mobile app you can edit the alt text to fit specifically with what you’re writing if you need to. The alt text of the image within the post/page will change, but the alt text you wrote when you uploaded the image will still be there and will be used in thumbnails throughout your site. For example, if you have “Related Posts” at the bottom of your posts.

To edit the alt text when inserting it into your post/page, click on the image. On the right hand side you’ll see the alt text under the title “Image Settings”. If you edit the alt text there, it will change on the post/page only, but the original alt text will still be in place if you use the image again.

Note: If you go into the media library and add alt text to files you have already used in a post or page, the alt text will not be automatically inserted into your post/page. You will need to use a plugin to copy them over. Make sure to backup your database first.

Writing Alt Text Specifically for Craft Sites

So, now you have a good idea of what alt text is, why it’s important, and how to add it to your site. How does the way we write it differ on a craft website? It’s all about context. I’m going to use images of knitwear as examples, but this information applies to writing the alt text for any craft photo.

Example 1: A vintage knitted pullover.

To start with, let’s look at an image from a vintage knitting pattern.

Woman in a close fitting knit top with crew neck, short puffed sleeves & a row of intarsia flowers across the chest & sleeves.

If we were writing alt text for a website that was not about a knitting pattern, we would probably write something like “Smiling woman leaning against a rock on a sunny day”, or something similar. Since we’re writing the alt text for a knitting pattern, that doesn’t tell our visitors what they need to know. Our visitors want to know about the garment.

Because we want to keep the number of letters limited to about 124, we first need to ask ourselves what information the text on the page will reveal. (Here is the pattern for the marguerite pullover shown in the photo).

If we look at the pattern, we can see the size of the garment and the gauge are noted, (which will tell us the thickness of the yarn needed), so we don’t need to mention any of those things in the image alt text.

What information is missing from the page text, but we can see in the image?

  • It’s a garment for a woman.
  • It has short, puffed sleeves.
  • It has a crew neck.
  • It’s close fitting and not loose.
  • It has a row of intarsia flowers across the top.

These are the things we need to include in our image alt text.

Here is how I would write the alt text for this photo.

Woman in a close fitting knit top with crew neck, short puffed sleeves & a row of intarsia flowers across the chest & sleeves.

You can use a website such as the free online character counter to save time when trying to reduce your letter count.

Let’s do another one. This time we’ll have an extra decision to make.

Example 2: Socks

Blue, mid-calf length socks with a wide cable pattern up the front that goes from the ribbed cuff  
to the toe decreases.

This photo of “Borealis Socks” was kindly supplied by Su Sayer, owner of “The Conscious Knitter“.

Let’s go through the same steps as we did for the first pattern. This time, instead of looking at a page that has the full pattern on it, we’ll be looking at the Borealis socks pattern listing in Su’s Payhip shop.

The pattern listing has a lot of information on sizes, yarn and the way the socks are knit, so this time there’s very little information missing that we would need to add. Instead of adding missing information, let’s see if the photo adds any detail to the information that has already been given, plus anything specific to this photo.

  • We know the socks fit lots of different foot sizes but there’s no mention of the length.
  • We know there’s a cable up the front but we don’t know where it starts and stops.

We’ll definitely add both of those to the alt text.

Mid-calf length socks with a wide cable pattern up the front that goes from the ribbed cuff to the toe decreases.

We’re still a few letters short of the maximum number. Is there anything else we can add? What about the colour? We could add that they’re blue, but should we?

Let’s think for a moment. Who do we write image alt text for?

  • People who use screen readers.
  • People with a slow or temporarily faulty internet connection.
  • People who have their browsers set to not show images, for whatever reason.
  • Search engines.

What value would adding the colour of the socks in the photo have? I can think of three.

  • People who can’t get the images to load will know the socks in the photo are blue.
  • People who want to knit socks for someone who likes the colour blue will know the yarn recommended in the pattern is probably available in blue (whether the knitter in question is sighted or not).
  • Search engines will know that the socks are blue, and will be more likely to return your page as a result if anyone is looking for blue socks.

So is adding the colour essential? No. But if you have room, you might want to add it. Just don’t add the colour in your image alt text at the expense of other, more important details.

Having taken everything into account, here is the alt text I would write for this particular photo:

Blue, mid-calf length socks with a wide cable pattern up the front that goes from the ribbed cuff to the toe decreases.

Example 3: A tutorial photo

Tutorial photos can be tricky to write alt text for, especially when you’re trying not to go over 124 characters. The most important thing is to try and not rely totally on images in your tutorial, but use them to enhance your written information.

Here is a tutorial I wrote on how to remove the ribbing from a knit garment (you’ll need to take a look at the tutorial to fully understand the information below. Don’t worry, it’s short): How to Remove Ribbing from a Garment Knit from the Bottom Up

I have tried to put all of the information on how to remove the ribbing from the garment in the text of the tutorial, and have added the photographs as a secondary source of information. That way, the alt text in the images only needs to describe what the image are, and not contain instructions.

Here are the photos from the article and their image alt text.

Darning needle threaded with a length of yarn being used to capture the stitches so they don't unravel.

Alt text: Darning needle threaded with a length of yarn being used to capture the stitches so they don’t unravel.

Cutting the stitches a row or two above the stitches that have been threaded onto yarn.

Alt text: Cutting the stitches a row or two above the stitches that have been threaded onto yarn.

Live stitches threaded onto yarn, ready to place onto the knitting needles.

Alt text: Live stitches threaded onto yarn, ready to place onto the knitting needles.

and finally,

Knit 1, purl 1 ribbing on a knitting needle.

Alt text: Knit 1, purl 1 ribbing on a knitting needle.

Having said all this, sometimes “as shown in the photo” is the best we can do in order to explain something, but try not to resort to that unless it’s your only option.

Some Helpful Links on Adding Alt Text on Social Media

How to add alt text to images on Facebook

How to add your own alt text to images on Instagram.

How to add alt text to images on Tumblr (only works in the app, not on desktop).

How to add alt text to images on Twitter.

At the time of writing this post, Reddit did not have a way to add alt text to images.

I hope this information has been useful. I have one last article to write on website accessibility (who are we making websites accessible for), and then I’ll return to uploading craft patterns, tutorials, news about my projects and sharing lots of things I have found interesting online by other craft makers.

Now if you’ll excuse me, I learnt a few things I didn’t know while doing the research for this post, and I have some image alt texts to fix…

Sarah (signature)

Searching for Knitting and Crochet Patterns Online

If you are one of the people who can no longer use Ravelry to search for knitting patterns, you can search on any major search engine and remove the results for Ravelry.

On Google, type in your search and add “-ravelry” and “-pinterest” (without the quotation marks). If you don’t mind going through pins you can leave that off.

On most other major search engines just add “-ravelry” at the end.

I will be adding two more planned articles, (one article and one tutorial), on website accessibility in the near future and will then get back to adding new freebies and sharing some fun projects and tutorials from crafts people I admire.

Sarah (signature)

A Public Statement on Ravelry

Cassidy Forbes from Ravelry is now sending out emails to people saying there is no problem with the new ravelry design, that it does not cause migraines and seizures and that people should “consider the sources” of such information. So far three people have come forward saying they recieved this email, or one like it that stated the same things.

For the record, I am one of the people for whom Ravelry caused a seizure in the new design, and migraines a couple of days after switching to Classic mode when they started changing fonts.

  • I am not a liar.
  • I am not having a “hysterical response”.
  • I have never had this extreme or as fast a response from any other website.
  • I am not spreading lies.
  • Ravelry are not inclusive.

Maximising Accessibility in Payhip Stores Part 2

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).

Two rectangular buttons. The first says "Follow", and the second has a square bracket lying on it's side and an arrow pointing upwards.

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).

Two rectangular buttons. The first says "Follow", and the second button says "Share".

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.

Two circle icons. The one on the left has the lower case "f" Facebook logo, and the one on the right has the  YouTube "play button" logo.

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.

Three rectangular buttons. From the left to right they say "All products, "Toys", and "Hats". The "All products" button is the active collection button and has light text on a dark background. The other buttons have dark text on a light background.

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.

Text: "Powered by Payhip (more...)
The words "Payhip" is underlined.

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 words "Powered by Payhip" on one line with "(more...) underneath. The words "Payhip" and (more...) are light text and surrounded by boxes with a dark background.

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.

Sarah (signature)

How to Maximise Accessibility on Payhip Stores

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.

Over the past few weeks a lot of knitting and crochet designers have been adding their patterns for sale via Payhip, however their shop accessibility for purchasers is not very good. They have given us the ability to change options and add our own css to customise our shops, so I’m sharing a few fixes and workarounds that I have applied on my Payhip shop to make it as accessible as possible.

You won’t need to know any programming or css to implement these fixes. To make this tutorial useful to as many shop owers as possible, I’m going to give you the code and a photo tutorial on where to place it.

Please note that I am NOT a graphic designer so my shop has the same retro look as my website. The CSS and fixes I’m giving you below will not turn your Payhip shop into a clone of mine! They will, however, increase the accessibility of your shop for your customers. It doesn’t fix all the accessibility problems as we have limited editing capabilities, but does make a lot of things better.

Where Do I Customise my Payhip Shop?

Sign in to your Pahyhip account and you will be taken to your dashboard. On the top, right hand side of your screen you’ll see a star icon and the word “Account”. Click on that and a drop down menu will appear.

Click on “Design Editor”

A screenshot from Payhip showing the drop down menu after clicking on "Account"in the man menu. There is an oval around the words "Design Editor".

This will take you to the editing section.

Customising Your Shop

The Store Page

Firstly we need to increase the contrast on the follow button.

On the left hand side of your screen you’ll see the words “Design Editor”. Click on “Product Page” from the drop down menu on the right and choose “Store Page”.

You’ll want to change two things. Firstly, the colour code for the follow button. I made it a slightly darker shade of the original colour by changing the hex code in the background box to #3784A4. You can also change the hex code for the border if you want to.

Screen shot of the Payhip Store Page design menu for "Misc" settings. The menu has the words "Follow Button", followed by three rectangles containing the hex colour codes for the background of the button, the text and the border. These boxes have been circled. 
At the bottom of the menu is a checked check box that says "Display product titles by default".

Next we need to display the titles of all of our products. At the bottom of the menu click the check box next to “Display product titles by default”. This means that users won’t have to hover their mouse over the product images to see what they’re called.

Finally for the store page, we’re going to add some custom css to fix a few issues.

Click on “CSS” at the top of the editing menu. You will see a re-sizable text box in which you can paste your custom CSS code.

Screen shot from Payhip showing the css editing menu for the store page. The top of the image shows that CSS has been clicked on the right hand side of the menu. Underneath this are the title "Customise CSS", a subtitle that says "Customise Stylesheet" and a text block containing CSS code".

First of all, we’ll darken the colour of the backgrounds for the product titles and the little flags that show the price.

A screenshot from Payhip showing a product link from the main page of my Payhip shop. The image is a square filled with a photo of a knitted toy. At the bottom is an opaque blue bar with the title of the product. On the top right is a short blue flag shape containing the price.

Copy and paste the following the following code into this box.

/* Changes the background colour on product titles and the price flags to increase readability */

.display-product-titles .ap-ebook-title
{
background: #0a5f91;
padding-top: 2px;
padding-bottom: 2px;
}
.ap-ebook-price {
background-color: #0a5f91;
}
/* Triangle before price */
.ap-ebook-price:before {
border-right-color: #0a5f91;
}

Next we’ll turn off the animated effect when hovering the mouse over a product and replace it with an outline. We’ll also make the outline around the product when a person navigating our shop using a keyboard has landed on the product. This is called “focus”. We want keyboard users to know when they have focus on links so they know what they’re “clicking” on when they hit the enter key.

A screenshot from Payhip showing a product link from the main page of my Payhip shop. The image is a square filled with a photo of a knitted toy. Surrounding the box is a thick blue outline.
/* Turns off the animation when hovering the mouse over a product */

.display-product-titles .ap-ebook:hover
{
transform: none;
}

/* Makes an outline around products when a keyboard tabs to the product so people using a keyboard to navigate know where they are on the page */

.display-product-titles a.ap-ebook:focus, .display-product-titles .ap-ebook:hover
{
outline: 5px solid #0a5f91;
outline-offset: -5px;
}

The final piece of code makes the links in the footer more visible, and makes it more obvious when someone is hovering their mouse over a link. The word “Payhip” in the image below shows the way the links look when a mouse is hovering over them. Note: the background colour of my shop is a greyed light green, however yours will be grey if you have left it at the default colour.

A screenshot from my Payhip store showing the links that appear in the footer. The word "Payhip" has white text on a dark background, whereas the rest of the text is dark on a lighter background.
/* Footer contrast and font size fixes. Bigger fonts with more contrast. */

.profile-page-footer
{
font-size: 1.2em;
color: #333;
}
.profile-page-footer a
{
font-size: 1.2em;
color: #333;
}
footer-more-section a
{
font-size: 1.3em;
color: #333
}
.profile-page-footer a#footer-show-more-link
{
color: #555;
}

/* Footer hover fixes. Makes it more obvious when a mouse is hovering over on of the links at the bottom. */

.profile-page-footer a:hover, .profile-page-footer a#footer-show-more-link:hover, #footer-more-section a:hover
{
color: #fff;
background: #0a5f91;
}

The Product Page

In the design editor menu, choose “Product Page”. The first thing we’ll change is to darken the background colour of the button. I changed mine to a darker version of the default colour by using the hex code #37754E

If you want to change it to a different colour, choose something from around the middle of the popup colour chooser. You can change the colour by sliding the rainbow coloured slider around. Don’t choose a light colour like cyan or yellow though. The best colour to choose is cool, such as blue or green, slightly darker than the mid range of the colour chooser, and slightly greyed. If you would like to, change the border colour as well.

Screenshot of the "Buy Button" colour chooser on Payhip. 
The top menu bar reads from left to right, button, page, css. The "button" tab is clicked.
Below that are the words "Buy Button", underneath which are text boxes containing the hex codes for the background, text and border.
There is a circle arounf the hex code for the background. Below this is a popup colour chooser containing a coloured box with different shades of green. On the right of this box is a slider for choosing other colours.

Now we’ll fix the text size, contrast and hover on the footer links in the css panel as we did for the shop page. This code will also darken the currency sign. In the css panel paste the following text.

/* Footer contrast and font size fixes */
.view-page-wrapper .view-page-footer, .view-page-footer a, .view-page-wrapper .view-page-footer a#footer-show-more-link, .meat-skirt-right .price .price-dollar
{
font-size: 1.2em;
color: #333;
}
footer-more-section a
{
font-size: 1.3em;
color: #333
}
/* or */
div.or-separator
{
font-size: 1.3em;
color: #000;
}
/* Footer hover fixes */
.view-page-footer a:hover, .view-page-wrapper .view-page-footer a#footer-show-more-link:hover, #footer-more-section a:hover
{
color: #fff;
background: #0a5f91;
}
.view-page-wrapper .view-page-footer a:hover
{
background-image:none;
}

The Checkout Page

In the design editor menu, choose “Checkout Page”.

Under “Customise Button”, make the background and border colours the same as you did on your “Follow” button on the store page. I chose to make a slightly darker shade of the default colour, #3784a4

Screenshot of the "Customise Button" colour chooser on Payhip. 
The top menu bar reads from left to right, button, css. The "button" tab is clicked.
Below that are the words "Customise Button", underneath which are text boxes containing the hex codes for the background, text and border.

Now we’ll fix the text size, contrast and hover on the footer links in the css panel as we did for the shop and product pages. This will make all of the pale grey text larger and more visible.

In the css panel paste the following text.

/* Fix the contrast of pale grey text */

label, p.input-label, div.cart-reminder-wrapper, .price-large-wrapper .currency
{
color: #333;
}
/* Darken and make larger - Secure payment with account or card via PayPal, footers and text */

.home-section .security-message-paypal-only-wrapper .security-message-text, .checkout-footer .powered-by-badge, .checkout-footer .checkout-footer-right a
{
font-size: 1em;
color: #000;
}
.checkout-footer .checkout-footer-right
{
padding-top:3px;
padding-bottom:3px;
background-color: #f4f4f4;
}

Other Things to Consider

The Product Page

If your product has more than one image, make sure thay are all the same height so the text on the page doesn’t move up and down the screen when your visitors click through the image carousel.

Since we have no way of adding alt text to our product photos in the carousel, adding descriptions of the photos in the product descriptions will at least tell visitors what they are if they can’t see the pictures for whatever reason.

A screenshot of a product page from my Payhip shop showing descriptions of the product photographs in the product description area.

These were all the accessibility fixes I managed to make to my shop, some remain that I was not able to fix.

If you found this tutorial useful please share it, or if you have any tips on making more changes to Payhip shops please leave a comment below.

Additional Code Added July 13th 2020

The Store Page

As I’ve learnt more about the CSS on Payhip, I’ve been able to make more accessibility changes. Adding the following code to the CSS of the Store Page will:

  • Change the look of the “Follow”, Share, and Collections buttons when users hover their cursor over them.
  • Increase the size of the font on the Collections buttons.
/* Make hover on follow button evident by changing the background to grey and the text blue*/

body > div.ap-wrapper > div.ap-top-author-details > div.ap-author-details-button-wrapper > div.default-state > a.btn.btn-primary.btn-blue.initial-follow-button:hover
{
color: #0a5f91;
background-color: #D3D3D3;
background-image: none;
}

/* Increase the size of the text on the collections buttons and make them change colour on hover. Background changes to blue and the text changes to white */

.ap-collections-wrapper a
{
font-size: 1em;
}
.ap-collections-wrapper a:hover
{
color: #fff;
background: #0a5f91;
}

/* Make the share button change colour on hover. Background changes to blue and the text changes to white */

body > div.ap-wrapper > div.ap-top-author-details > div.ap-author-details-button-wrapper > div.default-state > a.btn.btn-default.dripicons-upload.display-share-seller-profile-button:hover
{
background: #0a5f91;
}

body > div.ap-wrapper > div.ap-top-author-details > div.ap-author-details-button-wrapper > div.default-state > a.btn.btn-default.dripicons-upload.display-share-seller-profile-button:hover::before
{
color:#fff;
}

I am trying to find out if I can also change the font of the share button so I can make it say “Share” instead of using an icon. If I can, I’ll update with more information here.

The Product Pages

Adding the following code to the CSS of the Product Page will change the colours of the “Buy Now” and “Add to Cart” buttons when users hover their cursors over them. It will also increase the size of the text on the “Add to Cart” button.

/* Change the colours of the Buy Now button when hovered. The background changes to grey, and they text to green */

.view-page-wrapper .meat-skirt-right a.buy-button:hover
{
background-color: #d3d3d3;
color: #37754E;
background-image:none;
}

/* Change the colours of the Add to Cart button when hovered and increase text size. The background will change to blue and the text will change to white */

.btn.btn-default.btn-default-line-green:hover
{
background-color: #0a5f91;
background-image:none;
}
.view-page-wrapper .meat-skirt-right a#add_to_cart:hover {
color: #fff;
}
.add-to-cart-buy-page #add_to_cart
{
font-size: 1.2em;
}
Sarah

See also: Part two of this article for more tips for editing your Payhip store.