Webpage QA Checklist

Building a page on the web is tough. Having a solid QA checklist will help you know you've got the technical things right. Subscribe for free to see the full list.

Use this checklist to ensure high-quality web development work and better user experience. You should be able to say, "Yes," to pass off each checklist item.

Code Checks

Meta Title: present and correct?
Meta Title: no HTML entities or unicode characters?
Broken Links: none that are 404 or 500?
Valid HTML?
Only one H1 tag?
External links are all following policy? (correct "rel" and "target" values)

Visual Checks

CSS

Alignment: text, images, other elements line up as expected?
Spacing: typography, white space, images?

Images

No broken / missing images?
Image sizes are optimized for the web? (large images should be less than 200kb and smaller images should be less than 100kb)
Correct image types are used? (.jpg for photos, .png for graphics / transparent backgrounds)
Alt tags on all images? (empty alt="" is ok)
Good image quality?

Mobile

No side-scrolling? (assuming your site isn't a horizontal-scrolling site)
Text is readable? (good font-size, text doesn't get hidden or pushed off-screen)
Responsive flow? (check the experience for mobile through tablet and desktop sizes)

Accessibility

Content

Heading levels are sequential and logical? (Don't skip from H2 to H5)
Alt text is available on non-decorative images?
Tab order is logical and easy to navigate?
Skip to content button available?

Localization

German

Words don't break screen boundaries on mobile (overflowing or exceeding container widths)?

Japanese, Chinese, Korean

Characters don't "fall off" the line? (Exp: the last character in a set of characters without spaces gets pushed to the next line)

Arabic and Hebrew (RTL-direction languages)

Right to Left (RTL) settings for translated text?
Images or timelines of sequential events moves from Right to Left (RTL)?
English or other LTR formatted languages / phrases / words still shown in LTR format, even when mixed with the RTL language?
Numbers (phone numbers, time) still shown in LTR format?
Icons that don't indicate direction aren't mirrored?
Icons indicate forward motion by pointing to the left? Backward motion by pointing right?

Refer to the Material Design standards for RTL usability for more information and details about the best practices for RTL languages and UI.