Resource library

QA How-To

Accessibility Testing Basics for QA

Learn practical accessibility testing with keyboard checks, screen readers, zoom, contrast, semantic HTML, automation, defect reports, and team gates.

1,923 words | Article schema | FAQ schema | Breadcrumb schema

Overview

Accessibility testing asks whether people with different visual, hearing, motor, speech, and cognitive needs can perceive and operate the product. It is not a final compliance scan and it is not limited to screen readers. A form may pass an automated rule set while its focus jumps unpredictably, its errors are never announced, or its instructions rely on color alone.

This guide gives QA engineers a practical testing sequence for web applications. It explains how to interpret requirements, test with keyboard and zoom, inspect names and semantics, use screen readers purposefully, combine automation with human judgment, and report barriers so developers can reproduce and fix them. It focuses on durable habits rather than a list of tool buttons. The workflow can start with any critical journey.

Start With People, Tasks, and Standards

Standards such as WCAG organize accessibility around four principles: content must be perceivable, operable, understandable, and robust. Success criteria give teams testable requirements, but the real objective is successful task completion. Map critical journeys such as registration, authentication, purchase, account recovery, and support to barriers that could exclude a user. This keeps testing grounded when a page has hundreds of possible checks.

Confirm the target standard, conformance level, platforms, browsers, assistive technologies, and legal or contractual context with the product owner. Do not turn a guideline number into legal advice. QA can report observable behavior and mapped criteria, while accessibility specialists or counsel handle formal conformance claims. Include people with disabilities in research and usability testing where possible, because technical conformance cannot predict every lived experience.

  • Perceivable: information is available beyond one sensory channel.
  • Operable: controls work with keyboard and other input methods.
  • Understandable: labels, instructions, and behavior remain clear.
  • Robust: semantics work across browsers and assistive technologies.

Run a Keyboard-Only Pass

Put the mouse aside and use Tab, Shift+Tab, Enter, Space, Escape, and arrow keys according to the control. Start at the browser address bar or page beginning. Confirm every interactive element receives focus in a logical order, focus is visible, controls activate with expected keys, and no region traps the user. Skip links should move focus to main content, not only scroll the screen.

Pay special attention to menus, dialogs, date pickers, carousels, grids, tooltips, and custom dropdowns. When a modal opens, focus should move into it, remain within while it is active, and return to the invoking control after close. Removing the visible outline without a strong replacement is a defect. Also check that hover-only content can be reached and dismissed by keyboard without covering required information.

  • Focus order matches reading and task order.
  • Visible focus is clear against adjacent colors.
  • All actions have keyboard equivalents and expected key behavior.
  • Overlays can be entered, operated, dismissed, and exited predictably.

Check Structure and Accessible Names

Semantic HTML gives browsers and assistive technologies shared meaning. Inspect whether the page has a useful title, language, landmarks, heading hierarchy, lists, tables, labels, and native buttons or links. A clickable `div` does not automatically gain button keyboard behavior or role. Native elements usually provide the most dependable semantics and should be preferred before adding ARIA or custom keyboard code.

Every control needs an accessible name that communicates purpose. A magnifying-glass icon might need Search, while a row of Edit buttons may need names that include the record context. Verify name, role, value, and state in the browser accessibility tree. Do not duplicate visible labels or expose decorative icons as noise. ARIA can communicate expanded, selected, pressed, invalid, and current states, but scripts must update those states when the interface changes.

  • Use one descriptive page title and a logical heading outline.
  • Associate visible labels programmatically with form controls.
  • Hide decorative images and give informative images purposeful alternatives.
  • Prefer native elements, and use ARIA only to fill a semantic gap.

Test Forms and Error Recovery

Forms combine labels, instructions, state, validation, and focus, so they expose many barriers. Verify required fields are identified in text and programmatically. Instructions should appear before they are needed. Placeholder text is not a substitute for a persistent label. Group related controls such as radio buttons with a fieldset and legend or an equivalent semantic structure that announces the shared question.

Submit the form empty and with invalid values. Errors should identify the field, explain how to correct it, and not rely on red color alone. On submission, move focus to an error summary or the first invalid field according to the design, and ensure screen readers are informed of the change. Preserve valid entries and let users review, correct, and resubmit without starting over. For financial or destructive actions, provide confirmation or reversal where requirements call for it.

  • Labels remain visible after users enter data.
  • Required and invalid states are exposed in more than color.
  • Error text explains correction and links to the affected field.
  • Dynamic validation does not interrupt typing or announce excessively.

Verify Color, Reflow, and Visual Adaptation

Use a contrast analyzer to check text, icons that convey meaning, control boundaries, focus indicators, and important states against their actual backgrounds. Test default, hover, focus, selected, disabled, error, and high-contrast or forced-colors states. Color cannot be the only way to distinguish a required field, failed input, chart series, or active navigation item. Add text, shape, pattern, or semantics as another cue.

Zoom desktop content to 200 percent and test reflow at a narrow viewport. Users should not lose content, controls, or functionality, and ordinary reading should not require two-dimensional scrolling except for content that inherently needs it, such as a complex table. Increase browser or operating-system text spacing where applicable. Check long localized strings and user-generated content, because layouts that survive sample English often fail with real text.

Use a Screen Reader With a Purpose

Learn one common screen reader and browser combination on each supported platform, such as NVDA with Firefox or Chrome on Windows and VoiceOver with Safari on Apple platforms. Turn it on before opening the page, then navigate by headings, landmarks, controls, and reading order. The goal is not to listen to every word. Test whether structure supports orientation and whether the critical task can be completed without visual inference.

For a dialog, verify the opening announcement includes its role and name, focus lands on meaningful content, controls have accurate states, errors are announced without taking over, and focus returns after closing. For live updates such as cart totals or upload status, confirm essential changes are announced once at an appropriate priority. An automated accessibility tree snapshot can help regression, but actual assistive technology reveals interaction and announcement timing.

  • Navigate by landmarks and headings before reading linearly.
  • Check control names, roles, values, states, and instructions.
  • Test dynamic updates and focus changes in critical workflows.
  • Avoid treating different screen-reader wording as a defect when meaning is correct.

Automate the Rules Machines Can Judge

Automated engines can reliably find missing labels, invalid ARIA, duplicate IDs, some contrast failures, and structural rule violations. Run a scanner in component tests for reusable widgets, in page-level browser tests for key routes, and periodically across representative templates. Fail new violations at an agreed severity, and keep a reviewed baseline for legacy issues with owners and deadlines rather than silently excluding them.

A browser test can inject an engine and assert results after important states: `await page.getByRole('button', { name: 'Pay' }).click(); const results = await new AxeBuilder({ page }).analyze(); expect(results.violations).toEqual([]);`. Scan the modal after it opens, not only the initial page. Automation cannot judge whether alternative text is meaningful, focus order is logical, instructions are understandable, or a screen-reader interaction is usable, so manual coverage remains required.

  • Scan rendered states, including errors, dialogs, and expanded menus.
  • Test shared components early to prevent repeated defects.
  • Review suppressions with an owner, reason, and expiration date.
  • Do not report automated pass percentage as accessibility conformance.

Report Barriers So They Get Fixed

Lead with user impact. Instead of saying WCAG 2.4.7 failed, say keyboard users cannot see which checkout control has focus, so they cannot safely submit payment. Include the page and build, exact steps and keys, actual and expected behavior, browser, OS, assistive technology and version, screenshot or short recording, relevant DOM snippet, and the success criterion if your process maps standards.

Suggest the outcome, not an unverified implementation. For example, require a programmatically associated label rather than prescribing a particular ARIA attribute when a native label may be better. Severity should combine task impact, affected population, frequency, and availability of a reasonable workaround. Retest with the original method and run nearby regression because focus or announcement fixes can shift behavior elsewhere.

Build Accessibility Into Delivery

Add accessibility acceptance criteria during design and story refinement. Review interaction patterns, focus behavior, content labels, error handling, color tokens, and responsive states before implementation. Give designers and developers tested accessible components so each team does not reinvent a dialog or combobox. Include keyboard and automated checks in the definition of done, with manual screen-reader testing for critical or novel patterns.

Track repeated defect patterns and fix the source. If missing form labels recur, strengthen the component API, lint rules, code review checklist, and tests. Monitor customer feedback and involve disabled users in usability studies. An accessibility backlog should not become a permanent release exemption. Prioritize barriers in high-value journeys, assign owners, and measure prevention as well as issue closure across releases.

  • Define focus, keyboard, label, error, and reflow behavior before coding.
  • Use accessible design-system components with regression coverage.
  • Gate new machine-detectable violations at an agreed level.
  • Schedule human testing for critical journeys and complex widgets.

Frequently Asked Questions

What is accessibility testing in QA?

Accessibility testing evaluates whether people with different disabilities can perceive, understand, navigate, and operate a product. It combines standards-based inspection, keyboard and screen-reader use, visual adaptation checks, automation, and human usability evidence.

Can automated tools test all web accessibility requirements?

No. They can detect many code-level violations, but they cannot reliably judge meaningful alternative text, logical focus, clear instructions, appropriate announcements, or overall task usability. Automated scanning must be combined with manual and user testing.

How do I test a website with only a keyboard?

Start at the top and use Tab and Shift+Tab to move, Enter or Space to activate controls, arrows where the widget pattern requires them, and Escape to dismiss overlays. Check reachability, logical order, visible focus, expected behavior, and freedom from traps.

Which screen reader should a QA tester learn first?

Choose a combination used by your audience and supported platform. NVDA with Firefox or Chrome is a practical Windows starting point, while VoiceOver with Safari is built into macOS and iOS. Learn focused task navigation before attempting broad audits.

What should an accessibility bug report include?

Include user impact, page and build, exact input steps, actual and expected results, browser, OS, assistive technology and version, evidence, and any mapped requirement. Describe the accessible outcome without forcing an untested technical fix.

Does passing WCAG mean a website is fully accessible?

Conformance to an appropriate WCAG level is important, but it does not guarantee that every person can use every workflow comfortably. Usability studies with disabled people, support feedback, and testing across real assistive technologies add evidence that criteria alone cannot provide.

Related QAJobFit Guides