Categories
Video Blogs

How Do I Test My Website for ADA and WCAG Compliance Using Wave and Google Lighthouse?

View Video Transcript

Hi everyone, welcome to EcomBack.com Today we are going to teach you that how you can check if your website is accessible or not. and we will teach you that how you can use Wave and Google Lighthouse to check your website homepage collection page and all the product pages with the CMS pages. So first of all we need to install the Wave in Google Chrome. So we will search for Wave for Google Chrome. You will see this first option, Wave Evaluation Tool. Click on that add to Chrome, add extension it’s added so we can pin that to the tab bar. Now as you know it’s installed. So let’s try that on a test store. So I will clo se this tab. I have this dummy store open so we will click on the Wave app and you’ll see there are 24 errors and nine contrast issues and you can check the details over here. Now I can close that. Let’s try Collection page and let’s run this one again, 27 hours and five contrast. So that’s how you can check the wave on any of your store. Now let’s try the Google Lighthouse. So first of all click anywhere in the page, right click on that, click on Inspect. You will see Google Lighthouse. This is Lighthouse so you need to check the Accessibility and Desktop mode. If you want to try on mobile, you can try on mobile but it’s going to be same score. So we try Desktop and accessibility and I will click on Generate r eport. So let’s wait for it. As you can see, the report is generated and that comes with 54 which is really bad. Your report has to be 85 to 90 plus. So let’s try that again for the collection page. But we recommend when you do that test every page. You can do the collection page, product page, all your CMS pages, all the pages available. So I’m going to try that for the collection page. So it’s 60% which is still bad. So that’s where you can check the accessibility score of your website using the Wave and Google Lighthouse. If you have any questions please feel free to email us at sales@ecomback.com. Thank you.

Automated tools for testing website accessibility have evolved and provide a good starting point for testing, addressing patterns of errors in code and design that humans can be aware of, and catching issues before web developers go to hit ‘publish.’

Every website owner should perform a preliminary examination using free online tools. EcomBack recommends installing Google Chrome Extension tools such as WAVE from WebAIM and Google Lighthouse.

However, these inspections do not address all potential problems. These examinations are only designed to be quick and painless rather than definitive. A website may appear to pass these checks yet still have significant accessibility barriers. To evaluate accessibly fully, a more thorough evaluation is needed.

Online businesses need to hire an expert website accessibility consultant like EcomBack to assess their site. Learn about our ADA WCAG Compliance services below.

Here is how to use either WAVE or Google Lighthouse in only four to five easy steps.

How to Use Wave:

WAVE displays errors and warnings in-line, so you may quickly identify the component of your page that’s causing the problem. It also provides such as what the error is, how it affects various sorts of users and a recommendation on how to solve it.

  1. Enter in the Google search bar: ‘Wave for Google Chrome.’
  1. The first link should be WAVE Evaluation Tool. Click on this and then select ‘Add to Chrome.’ It will then get added to the tab bar.
  1. Go to your online store and click on the WAVE icon.
  1. WAVE will summarize how many errors and contrast errors are on the site. You can click on ‘Details’ for more in-depth notes. You may do this for every page on your website.

How to Use Google Lighthouse:

The Google Lighthouse accessibility audit generates a comprehensive report that gives information on all the tests that passed in addition to the ones that failed.

  1. In Google Chrome, go to your website link.
  1. Right-click anywhere on your online store main page (or whatever page you want to check for accessibility). Click on ‘Inspect.’
  1. Click on the tab labeled ‘Lighthouse’ and select ‘Accessibility’ from the Categories section and ‘Desktop’ from the Device section.
  1. Select ‘Generate Report.’
  1. If your report result isn’t a number between 85 and 90, this is a big problem.

Hire an Expert ADA WCAG Compliance Consultant at EcomBack

Web accessibility is becoming increasingly important as more and more people use the internet. Whether you realize it or not, your website may be inaccessible to those with disabilities.

We recommend making ADA compliance a top priority because not only does it give your site an advantage over others, but it also allows you to stay ahead of the game and avoid litigation. All websites should be prepared to make adjustments for disabled users.

From UX and content creation to development, EcomBack specialists are well-versed in ADA compliance standards. Get a free ADA audit and consultation today!

Read our other ADA Compliance blogs:

One reply on “How Do I Test My Website for ADA and WCAG Compliance Using Wave and Google Lighthouse?”

Leave a Reply

Your email address will not be published. Required fields are marked *

Video Blogs

How to Add Collections in Your Shopify Store in 8 Easy Steps

How to Add Collections in Your Shopify Store in 8 Easy Steps

Watch Now
Learn How to Get Facebook Ad Link and Post ID with Zero Hassle

Learn How to Get Facebook Ad Link and Post ID with Zero Hassle

Watch Now
EcomBack Shows You How to Add Products to Your Shopify Store

EcomBack Shows You How to Add Products to Your Shopify Store

Watch Now
VIEW MORE

Be The First To Know

Enter your email address below to subscribe to our newsletter.

Recent Blogs

What is Responsive Design and why it is Important?

What is Responsive Design and why it is Important?

READ MORE
What are AMP (Accelerated Mobile Page) Websites and Pages?

What are AMP (Accelerated Mobile Page) Websites and Pages?

READ MORE
Importance of e-Commerce Website

Importance of e-Commerce Website

READ MORE
AMP Mobile Speed Optimization Developers for Shopify eCommerce Stores

AMP Mobile Speed Optimization Developers for Shopify eCommerce Stores

READ MORE
VIEW MORE