Skip to main content

Making Your Site More Accessible

Lesson 13 from: Conversion Rate Optimization: Convert Visitors Into Buyers

Rita Cidre

buy this class


Sale Ends Soon!

starting under


Unlock this classplus 2000+ more >

Lesson Info

13. Making Your Site More Accessible

Lesson Info

Making Your Site More Accessible

accessibility doesn't get a ton of attention for marketers but it's a really important driver of conversion rates. Accessibility simply measures people's ability to use your site. This means any population including people with disabilities or those in various contexts like multitasking. I'm going to walk you through two tools to test your site for these two very specific and important populations. Let's begin. We just defined accessibility. Now let's talk a little bit about why it matters and then we'll get into some tools that can help you measure and improve your site's accessibility. In the us alone, about 19% of the population is said to have a disability and that number is quite the same around the globe. 71% of online shoppers with limitations will abandon a site if they find it hard to use and 82% of these customers say that they would spend more money if the sites were more accessible. So making your site accessible to various populations is over the right thing to do. And ver...

y important for many reasons, including business results, enter the Web Content Association guidelines. So the Web Content Association guidelines are a series of guidelines published by the Web Accessibility Institute for making web content more accessible in desktops, laptops, tablets and mobile devices Following these guidelines basically ensure that your site is accessible to people with disabilities, everything from blindness to low vision deafness, photosensitivity hearing loss and limited movement. Now the guidelines created by this association, otherwise known as W. ca 2.1 are actually fairly complicated but these are at a very high level. Um, the things that they outline first to provide text alternatives for non text content this includes photos, videos, etcetera. Second color contrast ensure that there is a stark contrast between the background color and your text color so that people with color blindness can actually read it. Third provide user controls for pausing, stopping or hiding content. Use clear page titles, headings and labels provide captions for videos with audio and then finally, keyword. Sorry, keyboard accessibility for users that don't have a mouse. There are three levels of conformance with these guidelines that the association sort of gives out Level A is basic web accessibility features Level double A. Is a site that deals with the most common barriers for disabled users and level triple A is the highest and most complex level of web accessibility. Something to definitely strive for. Okay, so let's look at some useful links that can help you on your road to making your site more accessible. The first thing that I wanted to show you is the website for the web accessibility initiative. Here you'll find a complete list of the guidelines if you want to sort of dig deeper into them. And then here's another link where you can find just more specifics around additional laws that your your specific country might have to help users with disabilities engage with with websites and with technology. It's important to know what the laws are in your country, uh This organization makes them available easily here. And as I mentioned earlier all these links will be available to you guys in the course folder. So once you've become sort of aware of what these different uh what these different guidelines are, there are some tools that can help you identify areas for opportunity on your site. Wave or the wave of the web accessibility evaluation tool is one I would say this is probably the most robust tool and um I'm just going to enter my site here to see the results. This is by far the most robust tool and it's I would say uh directed much more at designers. But if you have a design team that helps you with your website and you want to dig deep into accessibility guidelines, this is a really, really great one in order to share specific recommendations with your designers for things that could make your site just better in terms of accessibility. Another tool that I find useful is this free tool from freelance network Top Tell and it allows you to see how your what your site looks like to folks with different types of color blindness. Um later in this course we will talk about the importance of color contrast as a way to drive attention to the call to action or C. T. A. On your site or in your land and in your landing pages. And so it's important as you are selecting colors for your site that you consider the different types of color blind uh folks or folks with disabilities that might be accessing your content. So here in this free tool you can see what my site looks like for different types of color blind conditions. You can select here. This is red green color blindness. So you can see that even though my C. T A. S or call to action buttons pop quite well on the left here for folks who don't have color blind conditions on the right. The contrast is lost a little bit. And so these are all areas for opportunity. And if you are in the initial stages of selecting even colors for your brand palette or the colors for your website, I would highly recommend that you run them through this tool to make sure that they are accessible to a broad group of people. And then finally accessibility in terms of user experience and user design really extends beyond making sure that your site is accessible to people with disabilities. It also means making your site accessible with two people who are using your site in various contexts or in various devices. So, mobile friendliness is of course really really important to this. So our friends at Google have created a test that allow us to see whether your site is mobile friendly. So this might take a second. But basically what this test is measuring is whether your site is what's called has a response. What is called the responsive design, which means that uh that the site basically can adapt itself to a wide variety of screen sizes and this is taking a second. So while it loads, I'll just show you another quick way to take a look at whether a site is responsive. So you know that a sight of it is responsive. If you close the window and you are able to see the elements sort of adapt themselves to the new size, what is that can scroll down? This is my website here and as I expand it, especially this elements in the bottom that are sort of stuck together as I expanded. You can see that the design sort of responds to the size of the screen. This is what's called responsive design. And if you run your site on Shopify squarespace, if you are if you install the sort of modern template in wordpress. Most templates at this point are responsive, meaning that they will make your site past the mobile friendly test and you can see here that my results are in and my my site is mobile friendly. I know that because my site is responsive, so it's really friendly to folks folks accessing it in almost any single device. Um but if if you if your site is not responsive and it's not mobile friendly. This tool from google is a great one because it will give you very specific resources and recommendations here to make your sights, your site responsive and make your pages mobile friendly awesome. So this is the end of our walk through of accessibility tools. As I mentioned, this accessibility is um there's a wealth of information on the internet around this topic in many ways that you can improve your site. These are just some of the tools that I as a marketer used to ensure that my site is built in an accessible way for a wide variety of people as a way to not just serve my potential customers but also help improve conversion rates from my website.

Class Materials

Bonus Materials with Purchase

CRO Tactics Cheat Sheet.pdf
CRO Formulas and Definitions.pdf
Fiverr Conversion Rate Optimization Worksheet - Rita Cidre.pdf