Contents
How-To Guides

The Ultimate Website QA Checklist

Last updated:
July 7, 2022
Contents

QA can be stressful.

When you finally ship that website, it needs to be perfect.

But with all the moving pieces involved in a web development project, it’s easy to get overwhelmed:

  • All copy must be compelling, grammatically correct, and SEO-optimized
  • The website must be responsive and work on all browsers
  • No broken links
  • Structurally sound
  • Visuals are clear and compelling
  • …and dozens more.

There are just too many things to remember!

That’s why we made this website QA checklist.

Our goal with this page is to help you go through a round of QA as quickly and efficiently as possible—whatever the project is.

And if something isn’t clear, we’ve included a small “how to fix” section for the most common issues you might encounter while doing QA.

Happy testing!

UI & Design testing

Create a beautiful website that your users love

First impressions matter! Designing a website that expresses the brand’s identity and is enjoyable for visitors is no small feat.

What to look for:

Visual coherence and ease of navigation. Learn more & tips on how to fix
Text—consistent across all pages
Fonts
Paragraph, headers, and other text sizes
Color
Links’ behavior and color are consistent for all states
💡Unvisited, visited, hovered, active, disabled, etc.
Buttons
💡Double-check colors for CTAs, disable vs enable, etc.
Alignment and spacing are consistent throughout the site
Images, animations, and visuals. Learn more & tips on how to fix
All images and animations are visible
Proper dimensions
All visuals are in the right place
SVG format used where possible
Favicon is properly scaled
CSS has passed validation
HTML has passed validation

Content testing

Is the content on your site correct?

Sites riddled with spelling errors or poor structure will put off potentially valuable users.

What to look for:

Correct all grammatical/spelling errors. Learn more & tips on how to fix
Headers
Paragraphs
Navigation
💡Don't forget hamburger menus and other hidden navigation
Media
💡Check text inside of images and videos with extra care
Page metadata
💡Title, description, URL
Remove all placeholders
Blog posts must have an author
Include copyright statement in footer
Add a 404 page
No duplicate pages
Content is unique
💡Use a plagiarism checker like Grammarly

Functional testing

Are your site's features working as expected?

You don’t want to give out the idea that “not even the website works properly”. Double-check that every feature can be interacted with.

What to look for:

Ensure link validity. Learn more & tips on how to fix
Remove broken links
💡Use the "Link Checker" extension to do this faster
Minimize redirects
Verify links destination
💡Remove or fix links pointing to nowhere, too
Remove hidden links
💡You will only find those with a crawler tool like Screaming Frog
External links open in a new tab
In-page link anchors: make sure scrolling works properly
Use relative internal links rather than absolute
Ensure every page has at least one link pointing to it
💡Pages without links are harder for search engines to find
All elements can be interacted with
Drop-downs
Buttons
Text fields
Tooltips
💡Clear & concise goes a long way
Tables
Search
Checkboxes
Tabs
All forms work properly
Data validation (in all states)
💡Try a whole range of correct & incorrect data
Form submission and confirmation
💡Use the “Fake Filler” Chrome extension to do this faster
Data collection
Media
All videos are playable
WebP or SVG format used where possible
Cookie testing. Learn more & tips on how to fix
Disabled cookied testing
💡Also test deleting all cookies at critical points in your application
Corrupt cookie testing
💡Use the “EditThisCookie” Chrome extension to do this faster
Cookies are properly encrypted
Cookies have an expiry date

Accessibility testing

Is your website usable by people with disabilities?

About 15% of the world lives with some form of disability (hearing, visual impairment…). Make sure they can use your website, too.

What to look for:

Provide audio/visual alternatives. Learn more & tips on how to fix
Add alt text attributes for images
💡This is also important for SEO
Site is usable while zoomed in
Forms have labels
Links are recognizable
Add captions to videos
Provide an alternative for users with Javascript disabled
Clear color contrast for colorblind people
Use a logical structure
💡The “WAVE” Chrome extension helps a lot with this and other accessibility warnings

SEO testing

Is your website ready for search engines?

Do basic optimizations from the get-go and have your website indexed by all major search engines.

What to look for:

On-page optimization
Page title is relevant and optimized for target keyword
💡Keep it under 60 characters to avoid truncation
URL contains target keyword
Speed optimization
Sitemap considerations
Remove/nofollow pages you don't want indexed
Submit sitemap.xml to search engines
Logical internal linking structure. Learn more & tips on how to fix
Add a robots.txt file

Responsive & cross-browser testing

Does your site work on every device?

Your site should be easy to navigate on any device: desktop computer, laptop, phone, tablets…

What to look for:

Cross-device testing. Learn more & tips on how to fix
Content is readable
Navigation is functional
Forms are easy to fill
Alignment and spacing are responsive
Cross-browser testing
Firefox
Chrome
Safari
Cross-system testing
Windows
Mac
Android
iOS

Security testing

Is your website secure?

Make your visitors feel at ease and prevent website attacks.

What to look for:

Privacy policy
Log in/register screens, password pages
💡Ensure you give the proper response message in case of errors
All errors and breach attempts are logged
Valid SSL certificate

Scripts, snippet codes, and widgets

Is your website connected?

All tracking, marketing, and analytics snippet codes should run smoothly.

What to look for:

Google Analytics
Facebook pixel
User feedback tool
💡Use Marker.io to get rid of issues that went unnoticed
Any other ops tools (Intercom…)

Congratulations on making it through our website QA checklist—your site is now ready for live!

Common oversights and how to fix them

In this section, we’ll have a look at some of the most common oversights when doing website QA—and quick tips & tricks on how to deal withthem.

Visual coherence and ease of navigation

When designing websites, consistency is king.

For large projects, you’ll typically follow a web design style guide. This helps your team stay aligned on stuff like:

  • What fonts and colors to use
  • Icon style
  • Brand voice
  • etc.

A few extensions make this part of QA a little easier:

  • DebugCSS: to verify layout and what elements cause misalignment
  • VisBug: edit, style, and tinker with any page, in any state—and inspect elements more closely

Got it—back to the checklist!

Images, animations, and visuals

All images should serve a clear purpose. The goal of an image is to make it easier to scan a website, not add more fluff.

Needless to say that they should load fast, too.

The best practice for this is to serve responsive images in a modern format.

Since not all browsers support these next-gen formats, it's also your responsibility as a QA to ensure they are visible on every device.

The good news? Google PageSpeed Insights performs these checks for you. No need to manually verify every single image.

Got it—back to the checklist!

Correct all grammatical/spelling errors

Grammatical and spelling errors can put off potential customers and make them distrust the brand.

This is an easy fix with Grammarly. We kill two birds with one stone:

  • No grammatical mistakes
  • Plagiarism check

Be particularly careful with images if you have any text on there. Grammarly doesn’t do OCR yet!

We also recommend Hemingway to help make your writing more concise and clear.

Got it—back to the checklist!

Ensure link validity

Invalid links can confuse users, negatively affect your SEO, or cause critical security issues.

Because larger websites have hundreds (or thousands) of links, we recommend performing a site audit with Ahrefs.

With this audit, you’ll get an overview of all links, which ones cause issues, and how to fix them.

An alternative for this specific use case is the Chrome extension Link Checker.

Got it—back to the checklist!

Cookie testing

Cookies ensure proper communication between web pages on your site (shopping carts, tracking codes, etc.).

Good cookie testing should verify whether:

  • Your site remains usable if the user rejects cookies
  • Cookies get corrupted
  • Cookies have a proper expiration date

This is easy to do with the extension EditThisCookie.

Test critical flows on your app or website:

  • What happens if you suddenly disable or delete all cookies?
  • What if you change their value?

For example, log on to your app, then delete all cookies and reload the page—and make sure you’re properly disconnected.

Got it—back to the checklist!

Add alternatives to audio and visual content for the visually-/hearing impaired

Here are a couple more accessibility tips & tricks.

Similar to our earlier tip, ”every visual should have a purpose”. The more fluff on your site, the harder it is for the visually impaired to make sense of what’s going on.

Keep it simple and add:

  • Alt text attributes to images
  • Labels to forms
  • Text to links

Likewise, contrast should be top of mind when performing accessibility testing. Most sites are black on white for a good reason!

Finally, your website should have a logical structure that makes sense and is easy to navigate for anyone.

The WAVE extension helps a ton to identify and fix critical accessibility issues.

Got it—back to the checklist!

Logical internal linking structure

A logical internal linking structure means it’s easier:

  • For users to navigate your website
  • For search engines to understand and crawl it

For larger sites and e-commerce in particular, structuring a website into categories that make sense is paramount.

As a QA, your job here is this:

  • Ensure URLs make sense and always tell the user where they are. For example, awesome-store.com/men-clothes/shirts
  • Perform several navigation tests. For example “If I wanted to find men's shirts on this website, where would I click first?”

Got it—back to the checklist!

Cross-device testing

Cross-device testing means making sure your users have a quality experience on your site, no matter what device they use to access it.

When testing different resolutions and browsers, here are some things to keep in mind:

  • Text: is it still readable?
  • Spacing and alignment: is it significantly harder to make sense of the structure on different devices?
  • Scrollbars: avoid the dreaded horizontal scrolling

With BrowserStack, you can test any combination of browser, device, or resolution. And they have a Chrome extension!

Got it—back to the checklist!

How to use this checklist to do QA

This checklist works exactly as you’d expect. Go through every category, perform the checks, then come back to this page and cross out the checkbox.

If anything’s wrong, you can use a bug reporting tool like Marker.io (that’s us!) to report issues in one click.

Let’s look at a few ways Marker.io is awesome for QA testing.

1. Perform an entire QA session without leaving your website

A QA session usually looks like this:

  1. Go to staging, find a bug.
  2. Open screenshot tool, capture bug.
  3. Open software to annotate screenshots and add comments.
  4. Log into your PM tool.
  5. Create a new issue.
  6. Document the bug.
  7. Add technical information.
  8. Attach screenshot.
  9. …do we really need to go on?

There’s so much back-and-forth and alt-tabbing… this used to drive us crazy.

So we built Marker.io.

Doing QA is now a simple, 3-steps process:

  1. Go to URL, and just click on “Report a bug”.
  2. Input details.
  3. Click on “Create issue”—done!

All issues reported will directly land into your PM tool. This means you can stay on the website for the entire QA testing session.

2. Data-rich bug reports

If you’re still manually typing in source URL, environment info, console logs, and others with each bug report, you’re wasting a ton of valuable time.

With Marker.io, you don’t have to worry about any of that. Every report sent with our widget (or extension) will capture this data automatically.

This includes a session replay integration with LogRocket or FullStory: no need to record your screen anymore!

3. Our 2-way sync

Finally, all issues and reports are synchronized between your PM tool and Marker.io.

This means that if developers mark an issue as “Done” in Jira for example, it will be marked as “Resolved” in Marker.io as well.

Now you have an overview of all issues and their status.

Because comments are synced as well, you get to discuss each issue at length with your developers if necessary.

Sounds too good to be true?

We think so, too. Start your 15-day Marker.io trial today.

We’re trying to make this checklist the go-to reference when it comes to QA. So, if we missed anything, let us know and we’ll update it!

Continue reading

Try Marker.io for free.

Start free trial
Free 15-day trial  •  No credit card required •  Cancel anytime