The Ultimate Website QA Checklist
Try Marker.io for free
How-To Guides

The Ultimate Website QA Checklist

Last updated:
November 23, 2022
Contents
    Contents

    QA can be stressful.

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

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

    • 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!

    Website Quality Assurance (QA) Checklist

    Follow this website QA testing checklist to ensure your website is free of bugs—and provide the best user experience for your visitors.

    1. UI and Design Testing

    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:

    UI and design testing
    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

    2. Content testing

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

    What to look for:

    Content testing
    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

    3. 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:

    Functional testing
    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

    4. 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:

    Accessibility testing
    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

    5. SEO testing

    Is your website ready for search engines? Do all pages have clear titles, URLs, and meta descriptions?

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

    What to look for:

    SEO testing
    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, page load, and website performance 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

    6. Responsive & cross-browser testing

    Does your site work on all devices and operating systems?

    Your site should be easy to navigate on any device: desktop computer, laptop, phone, and other mobile devices.

    You should also take this opportunity to verify browser compatibility.

    What to look for:

    Responsive & cross-browser testing
    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

    7. Security testing

    Is your website secure? Are there any blatant vulnerabilities?

    Make your visitors feel at ease and prevent website attacks.

    What to look for:

    Security testing
    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

    8. Scripts, snippet codes, widgets, and plugins

    Is your website connected?

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

    What to look for:

    Scripts, snippet codes, widgets, and plugins
    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 with them.

    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 highresponsive images in a modern, high-quality 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.

    And if you want to analyze multiple pages at once, I recommend Experte. It's basically the same thing as Pagespeed—except you can do it in bulk, too!

    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 hyperlinks 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, how to fix them, and ensure full indexing of your website.

    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”. Something to keep in mind during website design: the more fluff on your site, the harder it is for the visually impaired (and in fact, other end-users) to make sense of what’s going on.

    Keep it simple and add:

    • Alt tags attributes to images
    • Labels to forms
    • Text to links
    • Clear, visible headings

    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
    • Screen sizes and screen resolutions: does the website feel nice to use on any screen size?

    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 quality assurance testing

    This checklist works exactly as you’d expect. The testing process is: 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 as well: no need to record your screen anymore!

    3. 2-way sync with PM tools

    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

    Frequently Asked Questions

    Get started now

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