Accessibility

The pre-launch accessibility checklist I run on every site

TS Talha Shahzad··5 min read
The short version
  • Implementing a repeatable pre-launch check prevents costly post-launch code remediation and legal liability.
  • The checklist must cover six core areas: images, keyboard navigation, contrast, headings, forms, and screen readers.
  • Verify that all custom interactive components (like slide-out menus) handle keyboard focus correctly.
  • Combine automated scanners with manual testing to catch complex layout and functional barriers.

If you run a digital agency or build websites for clients, you need to establish a quality gate: what should I check for accessibility before launching?

Too many agencies design a beautiful client site, publish the files, and move on to the next project. Then, six months later, the client receives an ADA Title III lawsuit summons.

The client is angry, blames the agency, and demands a free fix. You are forced to pull developers off active projects to remediate legacy code for free, destroying your project profit margins and damaging your professional reputation.

To prevent this, you must implement a repeatable accessibility checklist before any website goes live. Shipping an accessible site is far cheaper and easier than trying to fix a broken one after the lawyers have found it.

The agency quality gate: why automated scans are not enough

Many developers think they are compliant if they run a Google Lighthouse audit and get a green score.

This is a dangerous assumption. Automated accessibility tools (like Lighthouse or the axe browser extension) are useful, but they only catch between 30% and 40% of all WCAG violations. They can tell you if an image is missing an alt tag, but they cannot tell you if the alt text actually describes the image. They cannot check if your custom mobile navigation menu contains a keyboard trap.

To protect your clients, your pre-launch check must combine automated scans with manual testing.

Here is the exact six-step checklist I run before any site launches.

The pre-launch accessibility checklist

1. The image alt text pass

Do not let a site ship with raw file names or missing alt tags.

  • Audit: Check every image on the site. Ensure all meaningful photos have descriptive, context-rich alt text.
  • Decoration Check: Verify that purely decorative images, background grids, or icons have explicit alt="" tags. This ensures screen readers skip them instead of reading out file paths.

2. The keyboard operability check

Unplug your mouse and test the site using only the Tab, Shift+Tab, and Enter keys.

  • Focus Indicators: Ensure every link, button, and input field has a visible, high-contrast focus ring when highlighted. If you see focus outlines disappear, find and delete any outline: none CSS rules.
  • Logical Sequence: Verify that the tab focus moves in a logical order, typically from left to right and top to bottom.
  • Component Test: Verify that dropdown menus expand, slider elements advance, and mobile overlays close using standard keyboard keys.
  • Trap Check: Ensure users cannot get stuck inside slide-out shopping carts or cookie consent banners. Pressing the Escape key should close these elements and return focus to the parent page.

Want a website that turns visitors into customers, not just compliments?

Book a 15-min intro

3. The color contrast audit

Ensure all text is legible for users with low vision or color blindness.

  • Ratios: Run the stylesheet colors through a contrast checker. Verify that all standard text has a contrast ratio of at least 4.5:1 against its background. Large headers (18px+ bold or 24px+ normal) must have a ratio of at least 3:1.
  • Forms: Ensure input borders have a contrast ratio of at least 3:1 against the surrounding page colors so users can identify where to click.
  • No Color-Only Cues: Ensure that links inside paragraphs are underlined, and that form error states include warning icons or text messages, rather than relying solely on red text to show errors.

4. The form and checkout audit

Forms are where conversions and lawsuits collide. Pay close attention to input fields.

  • Programmatic Labels: Every input field must have a visible <label> element linked to the input's ID using the for attribute.
  • No Placeholders as Labels: Do not rely on placeholder text inside the input box to label fields. The label must remain visible when the user begins typing.
  • Validation Messages: Ensure all validation error messages are placed inside an aria-live region or linked to the input using aria-describedby so screen readers read the error automatically.

5. The structural outline audit

Ensure search engines and screen readers can parse the document hierarchy.

  • Single H1: Verify that each page contains exactly one H1 tag (typically the main page title).
  • Logical Order: Ensure that headings follow a strict hierarchy (H1 leads to H2, which leads to H3). Never skip levels (such as H2 directly to H4) for visual styling purposes.
  • Semantic tags: Check that the page outline uses HTML5 structural elements (<header>, <nav>, <main>, <footer>) instead of generic nested divs.

6. The screen reader dry run

The final test is a real-world simulation. Turn on your device's built-in screen reader (VoiceOver on macOS/iOS or Narrator on Windows).

Close your eyes, load the staging site, and try to navigate your main menu, select a product or service, fill out the booking form, and submit it.

If you get lost, hear confusing file names, or cannot select the form inputs, your layout has a barrier. Document the step and send it back to the design team for adjustments.

Making compliance standard agency policy

Do not treat this checklist as an optional step. Make it a mandatory gateway in your agency's deployment process. The lead developer must sign off on the accessibility checklist before the DNS records are updated.

Investing an extra hour in pre-launch manual testing protects your project margins, secures your client's business from legal liability, and improves the site's organic SEO performance. If your development team needs help building this quality gate, a developer training and accessibility setup project can align your workflows. Ship compliant sites from day one.

Prefer to hire through Upwork?
Top Rated Plus, 100% Job Success, 450+ projects shipped. See the reviews and start a contract.
Hire me on Upwork

FAQ

What should I check for accessibility before launching?

Verify six main items: all images have descriptive alt text (or empty tags for decorative media), every element can be navigated by keyboard with a visible focus ring, contrast ratios pass 4.5:1, forms have linked labels, headings follow a logical outline, and the site reads correctly on a screen reader.

Can I rely only on automated scanners for pre-launch checks?

No. Automated scanners (like Lighthouse or axe) only catch 30-40% of accessibility issues. They cannot detect keyboard focus traps, logical tab sequences, or the accuracy of image descriptions. Manual testing is required.

How do I test a website with a screen reader?

Use the built-in screen reader on your device: VoiceOver on Apple macOS/iOS, or Narrator on Windows. Turn on the software, close your eyes, and try to navigate your site's menus and submit a form using only keyboard commands.

All posts
the next step is small

Want a site that does this for you?

15 minutes, no deck, no pressure. Worst case, you leave with a free plan.

keep reading

More notes