A group smiling during a business meeting

How To Check A Website For Accessibility

An inclusive website is easier to use, faster to navigate, and safer from legal and reputational risk. A baseline website accessibility check does not require specialist hardware, but it does require a clear process, appropriate tools, and an understanding of how assistive technologies interpret content. The steps below outline how teams can identify common barriers early, address straightforward issues quickly, and support ongoing accessibility efforts as a site evolves. More complex patterns and edge cases still require specialist review.

Why Accessibility Checks Matter

Accessibility checks protect both people and organizations. They help you spot barriers before they frustrate users or attract complaints. They also reduce rework by catching issues while they are small and inexpensive to fix. Embedding checks into everyday work improves quality for everyone, not just people who use assistive technology.

Legal And Ethical Reasons To Check

Many organizations are subject to equality and anti-discrimination laws that apply to digital services, though the scope, enforcement, and technical expectations vary by jurisdiction, sector, and risk profile. Even when not legally required, accessible design is the right thing to do. It ensures that people with disabilities can complete tasks independently. Early accessibility testing lowers cost compared with fixing barriers after launch, when code and content are harder to change.

Benefits For All Users

Accessibility improvements help every visitor. Clear structure and readable typography support users on mobile devices, slow connections, and in noisy or low‑light environments. Better color contrast and keyboard access also help power users who prefer the keyboard. Small enhancements create a smoother experience for all.

First Visual Checks By Eye

Start with a quick scan of each page using your eyes and your browser. Visual checks can reveal obvious issues in minutes and set the agenda for deeper testing. Keep notes as you go, especially when you see patterns that repeat across templates.

Page Layout And Reading Order

Scan the page from top to bottom. Headings should follow a clear hierarchy, with a single main heading followed by subheadings in logical order. Content should read in a natural left‑to‑right and top‑to‑bottom flow. Ensure nothing essential appears only on hover or focus, such as key instructions or navigation items that disappear when the pointer moves away.

Text Size And Color Contrast

Zoom the page to 200% and verify that text remains readable without horizontal scrolling on responsive layouts. Headlines should reflow properly, line length should stay reasonable, and controls should remain visible.

To ensure accessibility, text must meet the WCAG 2.1 Level AA minimum contrast ratio:

  • 4.5:1 for standard text
  • 3:1 for large text or essential user interface components (such as borders on form inputs)

Because it can be difficult to judge contrast accurately by eye, use color contrast tools to measure these ratios. This is especially important for brand-specific grays or text placed over images.

Links And Buttons On The Page

Interactive items should be visibly interactive. Links and buttons need clear labels that describe their purpose, avoiding vague text like “click here.” Check hover and focus states for color and outline changes. Ensure the focus indicator is highly visible and aligns with WCAG 2.2 focus appearance requirements, including minimum contrast and area thresholds where applicable, without being obscured by fixed or overlapping interface elements. The indicator must have enough contrast against the background to be easily spotted by users with low vision.

Keyboard Only Accessibility Checks

Many users rely on the keyboard or simply prefer it for speed. A simple keyboard navigation test reveals issues that automation often misses. Work through core pages and key flows to confirm predictable, consistent behavior.

Moving Through The Site With The Keyboard

Use Tab to move forward, Shift+Tab to move backward, and Enter or Space to activate links and buttons. Confirm that focus moves in a logical sequence that matches the reading order. Focus should never jump unpredictably. Look for a visible focus highlight around the active element, and ensure that skipping sections does not hide critical information.

Testing Forms, Menus, And Pop Ups

Try every interactive part with the keyboard: menus, search boxes, filters, accordions, carousels, and cookie or privacy banners. Open and close pop‑ups with the keyboard and verify that focus moves into the pop‑up and returns to the trigger when closed. Focus must not become trapped within a section or lost behind the page.

Checking Skip Links And Focus Visibility

Implement a ‘Skip to Main Content’ link as one of the first focusable elements on the page. While it can be visually hidden by default, it must become visible upon keyboard focus, allowing users to bypass repetitive navigation blocks.

Using Automated Accessibility Tools

Automation provides quick coverage and catches many obvious, machine-detectable errors, but typically identifies only a fraction of accessibility issues. Manual testing is required to evaluate usability, context, and user experience.

Browser Extensions For Quick Checks

Free browser extensions can scan a page and highlight common code issues. They identify missing alt text, low contrast, missing form labels and names, empty links, and invalid heading structures. Run these tools on key templates and high‑traffic pages to get an initial picture of accessibility.

Reading And Prioritising Automated Reports

Automated results can be long. Group findings by impact and fix the most serious issues first. Address blockers that prevent keyboard use or hide information from assistive technologies. Next, fix structural problems that affect many pages, such as heading levels or repeated contrast failures. Treat the rest as improvements to schedule as part of ongoing maintenance.

Integrating Checks Into Development

Add automated accessibility checks to your code pipeline or regular review points. A small set of rules in continuous integration can catch regressions before they reach production. Include accessibility items in code review checklists and pull request templates to keep focus on consistent WCAG checks.

Screen Reader Accessibility Checks

A short screen reader test can provide valuable insight into how non-visual users experience a site, though it cannot replace structured testing or evaluation by experienced users. You do not need to master every command to uncover common barriers. Start small, practice on a few pages, then expand.

Picking A Screen Reader To Test

On Windows, many testers use NVDA or JAWS. Apple devices include VoiceOver for macOS and iOS, and Android offers TalkBack. Choose one screen reader to begin, learn the basic navigation commands, and confirm that your site supports common tasks without visual cues.

Navigating By Headings, Landmarks, And Links

Screen reader users often jump by structure instead of reading every line. Use commands to move by heading, region (landmark), and link. Check that headings are descriptive and logical. Confirm the presence of landmarks such as navigation, main, and footer so users can move quickly between major sections. Ensure link text makes sense out of context.

Reading Forms, Tables, And Images

Form fields must have labels that the screen reader announces. Trigger an error to verify that the message appears near the field and is announced when focus returns. For tables, confirm that header cells are set correctly so users understand row and column relationships. Provide descriptive alt text for informative images to convey their intent to non-visual users. For decorative images, ensure they use a null alt attribute or CSS background-image so screen readers ignore them entirely, reducing ‘noise’ for the user.

Checking Code Structure And Semantics

Clean, semantic code improves compatibility with assistive technology and reduces maintenance. Reviewing markup ensures that what you see visually is represented correctly in the document structure.

Headings, Landmarks, And Lists In The Code

Ensure headings follow a logical hierarchy, beginning with an H1 that describes the primary page content, followed by H2 through H6 to nest sub-sections. While WCAG does not require sequential heading levels, maintaining a logical hierarchy improves predictability and usability for screen reader users. Landmarks such as nav, main, aside, and footer help users jump between regions. Make sure lists in the design use ul/ol markup in the code rather than styled paragraphs, so screen readers can announce item counts and structure.

Buttons, Links, And Custom Widgets

Use real button elements for actions that change state, and link elements for navigation. Avoid building interactive controls from plain spans or divs. Prioritize native HTML5 elements over custom-built components. If a custom widget is unavoidable, you must strictly follow WAI-ARIA design patterns to provide the necessary roles and states, ensuring the component’s functionality is communicated to assistive technologies.

Focus Order And Tab Index

The DOM order should match the visual and logical reading order. Avoid positive tabindex values, as they override DOM order and often introduce unpredictable navigation issues. Inspect the source order in developer tools and ensure it aligns with the expected path users follow across the page, especially through forms and components that open and close dynamically.

Testing Forms And User Journeys

Users judge accessibility by whether they can complete tasks. Test end‑to‑end journeys, not just isolated pages, and watch for small barriers.

Key Journeys To Test End To End

Walk through core flows such as sign‑up, checkout, contact, and account management. Perform each journey using only the keyboard and then repeat with a screen reader. Note any blockers, unclear instructions, unexpected page changes, or session timeouts. Confirm that progress indicators and status messages are visible.

Clear Errors And Validation Messages

When a user makes a mistake, the interface should help them recover. Place error messages near the field, explain what went wrong and how to fix it, and ensure they are announced by screen readers. Do not rely on color alone to indicate errors; provide icons or text cues as well. Preserve user input so people do not need to retype entire forms.

Time Limits And Session Handling

If your site has time limits for security or performance, provide warnings before expiry and a way to extend time. People who read slowly, use assistive technology, or work in complex environments need fair time to complete tasks. Restoring state after a timeout also reduces frustration.

Involving Real Users

People with disabilities bring lived experience that reveals problems tools miss. Small, respectful sessions can uncover high‑impact issues quickly.

Working With Disabled Users

Recruit participants who use a variety of assistive technologies, such as screen readers, magnifiers, voice control, or switch devices. Short sessions focused on real tasks often surface the most important barriers.

Observing Real Use, Not Ideal Paths

Ask participants to complete common tasks without coaching. Observe where they hesitate, backtrack, or need help. Avoid guiding people through a perfect route. The goal is to understand how the site behaves in real-world conditions, informed by lived experience, rather than assuming ‘ideal’ or developer-intended interaction paths. Record observations to help the team understand the impact of specific issues.

Gathering Feedback And Setting Priorities

Combine usability session notes with support tickets and analytics. Group problems by user impact and frequency. Convert them into a prioritized backlog so the most significant barriers are addressed first.

Recording Results And Planning Fixes

Good documentation accelerates remediation and demonstrates due diligence. A streamlined process helps teams collaborate and track progress.

Writing A Simple Accessibility Report

Organize findings under headings such as content, design, code, and user feedback. Include the page or component where you found each issue, steps to reproduce, and screenshots or short clips if helpful.

Mapping Issues To WCAG Success Criteria

For each issue, reference the relevant WCAG criterion. This makes WCAG checks explicit, supports traceability, and shows progress even when perfection is not yet possible. Mapping to standards also helps non‑technical stakeholders understand risk and compliance status.

Building An Action Plan And Retesting

Turn the report into actionable tasks with owners, due dates, and acceptance criteria. Schedule retests after fixes land and before release. Keep a running log so you can see trends and avoid repeating mistakes on future features.

Tools, Training, And Ongoing Practice

Accessibility is a practice, not a project. The right mix of dependable tools, role‑specific training, and routine checkpoints keeps quality high and prevents regressions as your site grows. Combining automated monitoring with manual testing and human insight creates a more reliable and defensible accessibility process.

Recommended Approach For Regular Checks

Maintain a focused toolkit that supports both day‑to‑day checks and deeper accessibility reviews.

Core tools and methods to include:

  • Color contrast checker
    Use contrast tools to verify text, icons, and interactive states meet WCAG requirements across themes and components.
  • Browser developer tools
    Inspect heading structure, landmarks, focus order, and ARIA attributes directly in the browser to validate semantic markup.
  • Automated accessibility checker
    Run tools such as GrackleDocs accessibility checker for fast detection of common issues like missing labels, low contrast, and structural errors.
  • Screen reader for routine smoke tests
    Use at least one screen reader to confirm that navigation, forms, and dynamic updates are announced correctly.
  • Release checklist
    Include keyboard navigation tests and screen reader checks as part of every deployment to prevent regressions.

Grackle Scan – Website Accessibility Scanner

Grackle Scan adds continuous visibility to accessibility monitoring, especially for PDFs published across websites and repositories. It automatically scans internal and external sites to identify inaccessible PDF documents and reports on their accessibility status against WCAG and PDF/UA standards.

Clear monthly reports, real‑time compliance checks, and progress tracking help teams prioritize remediation and demonstrate improvement over time. This makes it easier to manage large volumes of documents, reduce legal risk, and make informed accessibility decisions without manual overhead.

Grackle AUDIT – Web Accessibility Auditing

Grackle AUDIT provides a comprehensive approach to accessibility testing that goes beyond automation. It combines manual WCAG audits with usability testing carried out by people with lived experience of disability.

Manual audits follow the W3C WCAG Evaluation Methodology and deliver detailed, actionable findings aligned to WCAG success criteria. Usability testing highlights real‑world barriers that technical checks often miss, offering insight into how users actually experience the site.

Reports are written to be clear and practical, helping teams understand what needs to change and why. Ongoing collaboration, accreditation support, and documented conformance help organizations demonstrate due diligence and maintain accessibility over time.

Training Designers, Content Editors, And Developers

Anyone who changes the site can introduce barriers. Provide short, repeated sessions tailored to each role. Designers learn contrast, layout, and focus patterns; content editors learn headings, links, and alt text; developers learn semantic HTML, ARIA, and testing basics.

Making Accessibility Part Of Normal Workflow

Add accessibility steps to design reviews, code reviews, and content approvals. Make checklists visible in planning tools and pull request templates. When accessibility is part of “definition of done,” new errors are less likely to reach production and remediation becomes faster.

Key Steps To Check A Website For Accessibility

Use this short checklist to run a reliable web accessibility check.

  • Scan pages visually for clear layout, logical headings, and readable text
  • Do a keyboard-only pass to confirm logical focus, working menus, and usable pop-ups
  • Run automated tools to catch common issues and recurring patterns
  • Perform a targeted screen reader test to validate structure, forms, and announcements
  • Review code semantics so markup matches what users see
  • Test full user journeys, not just individual pages
  • Involve real users with assistive technologies to uncover missed barriers
  • Record findings, map them to WCAG checks, and prioritize high-impact fixes
  • Retest after each fix and before every release

Repeat these steps whenever the site is updated to keep testing meaningful and your experience inclusive.

Back to Knowledgebase