Web Accessibility: Practical Checks for Design and Development

Accessible web design lets people understand and complete a task using different senses, input methods and assistive technology. Build that into the page structure and interaction states, then test the actual journey. A clean automated report alone cannot establish accessibility.

Key Takeaways

• Use WCAG criteria to define testable requirements.
• Check keyboard, focus, text enlargement, forms and errors manually.
• Include disabled people in relevant usability testing.
• Record the scope and limitations of any accessibility claim.

Start with the task, not a score

Choose a complete task: find a room, choose dates, understand a cancellation policy and make a reservation. List every page, overlay, third-party widget and confirmation involved. A compliant-looking homepage does not establish that the date picker works.

The W3C WCAG understanding documents explain individual success criteria, their intent and exceptions. Use the version and level required for the project. Legal applicability varies by jurisdiction and service; a design checklist is not a legal compliance determination.

Check the interface through several input methods

Check	Practical test	Failure to record
Keyboard	Complete the task without a pointer	Unreachable control or keyboard trap
Focus	Follow the visible focus through menus and dialogs	Focus hidden, lost or moved unexpectedly
Text	Enlarge text and inspect controls	Clipped labels or missing instructions
Reflow	Test narrow width and zoom	Necessary content requires avoidable two-axis scrolling
Forms	Submit missing and invalid values	Error identifies neither the field nor the fix
Status	Trigger loading, success and failure	Change is only communicated visually
Content	Inspect headings, links and image alternatives	Structure or purpose cannot be understood

Record the browser, device, assistive technology where used, reproduction steps and affected task. “Accessibility issue” is not enough for an implementer to reproduce a failure.

Text needs contrast and room to grow

WCAG contrast guidance specifies 4.5:1 for normal text and 3:1 for large text under its definitions and exceptions. A brand palette must be checked against the actual background, including photographs and disabled or selected states where applicable.

WCAG does not impose a universal 16px body-font minimum. Resize Text addresses enlargement up to 200% without loss of content or functionality, subject to its exceptions. Reflow addresses how content adapts at small effective widths. Both require testing behavior, not checking a token value.

The color palette worked examples show why a color pair can pass on one surface and fail on another.

Design the error before approving the form

For an illustrative hotel enquiry, a required departure date is missing. A useful error identifies the field, explains what is needed, preserves the other entries and provides a clear route to correction. Turning the border red without text is insufficient.

Check the sequence: submit, error announcement, focus location, correction and resubmission. Then test a server failure. The visitor should know whether anything was sent and what to do if the service remains unavailable.

These states belong in the design system, so each team does not invent a different error pattern.

Use automated tools for what they can detect

WAVE and axe can identify classes of issues and help prevent regressions. They do not replace evaluating whether text alternatives are useful, focus order makes sense or a task can be completed with assistive technology.

Pair automated checks with manual testing and sessions involving users with relevant access needs. Describe the tested scope precisely. “No issues found by this tool on this page” is a narrower claim than “the website is accessible.”

Make a repair plan that survives release

For each issue, record the affected users/task, criterion, reproduction steps, owner and verification result. Prioritize blocked tasks and repeat failures in shared components; one component repair can help many pages.

Retest after changes to menus, consent tools, checkout, embeds or content templates. Content editors need guidance too: meaningful headings, descriptive links, useful image alternatives and accessible documents. Responsive design checks belong in the same release review.

Earlier versions of this article included untraceable accessibility-related business statistics and company outcomes. They have been removed. The reason to improve a blocked journey is visible in the task itself; it does not need an invented revenue percentage.