How to Run a Thorough Website Accessibility Check in 2024

Web accessibility is a critical priority for any business or organization with an online presence. Providing equal access to your website is not only an ethical responsibility — it‘s also a smart business decision and legal obligation in many cases.

Consider these statistics:

  • Over 1 billion people worldwide have a disability that may affect their use of the web (Source: World Bank)
  • 71% of web users with a disability will leave a website that is not accessible (Source: Click-Away Pound)
  • Accessible websites have better search results, reduced maintenance costs, and increased audience reach (Source: W3C Web Accessibility Initiative)
  • Accessibility lawsuits reached an all-time high in 2021, with over 4000 cases filed in U.S. federal courts (Source: UsableNet)

The risks of ignoring web accessibility are high. You could be turning away a significant portion of potential customers and exposing your organization to legal action. On the other hand, embracing accessibility can improve the user experience for all visitors and give you a competitive advantage.

So, how can you ensure your site is welcoming to everyone, including people with auditory, cognitive, neurological, physical, speech and visual disabilities? The key is regular accessibility testing based on the latest standards and best practices.

This comprehensive guide will walk you through how to conduct an in-depth accessibility review of your website. We consulted with HubSpot developers, accessibility experts, and industry data to bring you the most relevant, up-to-date advice.

Whether you have no prior accessibility knowledge or consider yourself proficient, you‘ll gain valuable insights to identify and resolve issues that could be preventing people from accessing your site.

The Foundation: WCAG and the Principles of Accessibility

The gold standard for web accessibility is the Web Content Accessibility Guidelines (WCAG), developed by the World Wide Web Consortium (W3C). Currently in version 2.1, WCAG provides a shared set of criteria for assessing and improving accessibility.

"WCAG is the backbone of most web accessibility laws and organizational policies worldwide. While it can seem complex at first, it really comes down to ensuring your content is perceivable, operable, understandable, and robust for all users," says [Jane Doe], HubSpot‘s resident accessibility expert.

Let‘s briefly unpack what each of those principles mean:

  1. Perceivable
  • Provide text alternatives for non-text content
  • Provide captions and other alternatives for multimedia
  • Create content that can be presented in different ways without losing meaning
  • Make it easier for users to see and hear content
  1. Operable
  • Make all functionality available from a keyboard
  • Give users enough time to read and use content
  • Do not use content that causes seizures or physical reactions
  • Help users navigate and find content
  • Make clickable elements easy to identify and use
  1. Understandable
  • Make text readable and understandable
  • Make content appear and operate in predictable ways
  • Help users avoid and correct mistakes
  1. Robust
  • Maximize compatibility with current and future user tools

(Source: WCAG at a Glance)

WCAG assigns each accessibility criterion to one of three conformance levels:

  • Level A: Essential for some users to access the content
  • Level AA: Important to many users and removes significant barriers
  • Level AAA: Makes content accessible to a wider range of users

To be considered reasonably accessible, your site should meet all Level A and AA success criteria. Though not required, addressing some Level AAA criteria can further enhance accessibility.

Your Accessibility Testing Toolkit

With the WCAG principles as your guide, you‘re ready to start evaluating your site. But what tools and techniques should you use?

According to [John Smith], Senior Web Developer at HubSpot, a comprehensive accessibility review should include a combination of:

  • Manual testing of key site components
  • Automated scans using specialized tools
  • Assistive technology testing
  • User testing with people with disabilities

"Relying on a single testing method will inevitably let some issues slip through the cracks. We get the best results when we combine manual and automated tests, and incorporate feedback from real assistive technology users," says Smith.

Manual Testing Checklist

Manual testing is the most thorough way to assess accessibility, as it allows you to experience your site the way a user would. By attempting to complete important tasks using only a keyboard or simple screen reader, you can spot usability barriers that automated tools would miss.

Focus your efforts on these key areas:

Keyboard Navigation

  • Ensure all menus, links, buttons, and forms are fully operable with a keyboard
  • Check that there is a visible focus state as you tab through elements
  • Look out for "keyboard traps" that prevent you from advancing to the next element
  • Verify that the tab order follows a logical sequence

Relevant WCAG criteria: 2.1.1 (Level A), 2.1.2 (Level A), 2.4.3 (Level A), 2.4.7 (Level AA)

Page Structure

  • Use semantic HTML to convey meaning and relationships
  • Ensure heading tags are used to define page structure, not just for visual styling
  • Provide a "skip to main content" link at the top of each page
  • Use landmark regions like header, nav, main, and footer to help users navigate

Relevant WCAG criteria: 1.3.1 (Level A), 2.4.1 (Level A), 2.4.6 (Level AA)

Images

  • Provide descriptive, concise alt text for images that convey information
  • Use an empty alt attribute for decorative images
  • Avoid using images of text, except for logos and essential graphics
  • Ensure images have sufficient contrast with their background

Relevant WCAG criteria: 1.1.1 (Level A), 1.4.5 (Level AA), 1.4.11 (Level AA)

Video and Audio

  • Provide synchronized captions for all videos with dialogue or important sounds
  • Offer audio description for videos where visuals are needed to understand the content
  • For audio-only content, provide a transcript
  • Include controls to pause, stop, and adjust volume for audio that plays automatically

Relevant WCAG criteria: 1.2.1 (Level A), 1.2.2 (Level A), 1.2.4 (Level AA), 1.2.5 (Level AA), 1.4.2 (Level A)

Color Contrast

  • Check color contrast ratios for text and important graphical elements
  • At minimum, aim for 4.5:1 for small text and 3:1 for large text
  • Don‘t rely on color alone to convey information or distinguish elements
  • Provide additional cues like icons, patterns, or text labels

Relevant WCAG criteria: 1.4.1 (Level A), 1.4.3 (Level AA), 1.4.11 (Level AA)

Zoom and Responsive Design

  • Ensure content is readable and functional when zoomed to 200%
  • Check that the page layout is responsive and adapts to different screen sizes
  • Avoid horizontal scrolling or loss of content at smaller viewports
  • Allow text resize up to 200% without requiring a horizontal scroll

Relevant WCAG criteria: 1.4.4 (Level AA), 1.4.8 (Level AAA), 1.4.10 (Level AA)

Automated Testing Tools

While manual testing should be your primary approach, automated tools can help you quickly identify potential accessibility problems in your code. These tools scan your site against WCAG success criteria and provide a report of any issues found.

Some popular accessibility testing tools include:

Automated tools are especially useful for:

  • Catching low-hanging fruit like missing alt text, insufficient color contrast, and incorrect heading order
  • Monitoring accessibility on an ongoing basis and preventing regressions
  • Integrating accessibility checks into your development workflow

However, it‘s important to remember that automated testing is not foolproof. "These tools only catch 20-30% of accessibility issues, and they can‘t determine if something is truly usable by people with disabilities. Always supplement them with manual testing," advises [Sarah Lee], HubSpot accessibility champion.

Assistive Technology Testing

To really understand how well your site works for users with disabilities, you need to go beyond simulating their experience and test with actual assistive technologies. This includes:

  • Screen readers like NVDA, VoiceOver, and JAWS
  • Magnification software like ZoomText
  • Speech recognition tools like Dragon NaturallySpeaking
  • Switch controls and other alternative input devices

"Using a screen reader to navigate your own site can be a real eye-opener. You quickly realize how much you rely on visual cues and how frustrating it can be when something doesn‘t work as expected with assistive tech," says [David Kim], HubSpot UX designer.

Aim to test your key user flows with a variety of assistive technologies. This will give you valuable insights into how well your site accommodates different user needs and preferences.

While learning how to use these tools takes time, there are many great resources available:

User Testing

Finally, don‘t overlook the importance of getting feedback directly from people with disabilities. Usability testing with a diverse range of users can reveal accessibility barriers that you and your team would never encounter otherwise.

"Nothing beats watching real people with disabilities use your site. It‘s the ultimate litmus test for whether your accessibility efforts are actually working," says [Emily Chen], HubSpot product manager.

When recruiting user testing participants, aim for a mix of:

  • Different disability types (auditory, cognitive, neurological, physical, speech, visual)
  • Varying levels of technical skill and familiarity with assistive technologies
  • Different demographics like age, gender, and geographic location

Offer multiple ways to participate in the testing, such as in-person, remote with video conferencing, and asynchronous with recorded sessions. Make sure the testing itself is accessible by providing any necessary accommodations.

During the sessions, ask participants to complete specific tasks on your site while thinking aloud. Observe where they struggle or encounter confusion. Gather both quantitative data (success rates, time on task, error rates) and qualitative feedback on their experience.

Incorporating user testing into your accessibility workflow will help you prioritize fixes based on real user needs. It‘s also a great way to build empathy and understand the human impact of your accessibility efforts.

Creating a Culture of Accessibility

Conducting regular accessibility audits is essential, but it‘s only one part of a larger strategy. To truly embed accessibility into your digital presence, you need to foster a culture of inclusivity throughout your organization.

"Accessibility isn‘t just the job of developers or designers. It takes awareness and commitment from everyone involved in creating digital content and experiences," says [Michael Patel], HubSpot‘s director of web strategy.

Some key practices to adopt:

  • Provide accessibility training for all team members who contribute to your website
  • Integrate accessibility checks into your design and development processes
  • Set clear accessibility goals and measure progress with metrics
  • Reward and recognize team members who champion accessibility
  • Solicit ongoing feedback from users with disabilities and prioritize their input

Remember, accessibility is a journey, not a destination. Even if you resolve every issue from your initial audit, you‘ll need to continually monitor and maintain your site‘s accessibility as new content and features are added.

By making accessibility a core value and committing to continuous improvement, you can create a website that truly works for everyone.

Stay Ahead of Accessibility Regulations

As the world becomes increasingly digital, governments are taking notice of the accessibility gap. Many countries now have laws on the books that require websites to meet certain accessibility standards, with more regulations on the way.

Here are a few of the most notable examples:

Accessibility laws by country

Accessibility laws by country. Source: W3C Web Accessibility Laws & Policies

  • United States: The Americans with Disabilities Act (ADA) requires businesses to make websites accessible as places of public accommodation. The updated Section 508 standards apply to federal agencies and contractors. Several states like California also have their own accessibility laws.

  • European Union: The EU Web Accessibility Directive requires public sector websites and apps to be perceivable, operable, understandable and robust. New sites had to comply by 2019, all sites by 2020, and apps by 2021. The European Accessibility Act extends these obligations to some private entities too.

  • Canada: The Accessible Canada Act (ACA) applies to Parliament, the federal government, and federally regulated entities. It sets accessibility standards across all areas of federal jurisdiction. Provinces like Ontario have additional regulations like the AODA that cover the private sector.

  • United Kingdom: The UK Equality Act requires websites of service providers to be accessible to avoid unlawful discrimination. Public sector websites must meet the new UK accessibility regulations.

  • Australia: The Disability Discrimination Act (DDA) prohibits discrimination in the provision of goods, services, and facilities, including websites. Government agencies must also meet the Digital Service Standard accessibility requirements.

With accessibility lawsuits and demand letters on the rise, organizations can no longer afford to ignore this issue.

"We‘ve seen a steady increase in the number and scope of accessibility laws in recent years. It‘s only a matter of time before all websites are expected to comply, regardless of their sector or size," warns [Sarah Johnson], an accessibility legal specialist.

Even if you‘re not currently subject to accessibility regulations, proactively improving your site‘s accessibility can help mitigate legal risk and make you better prepared for future policy changes. Inclusive design benefits everyone from a usability perspective too.

Next Steps for an Accessible Future

Running an accessibility check is an important step towards a more inclusive web, but it‘s just the beginning of the journey. Here‘s what you can do to keep the momentum going:

  • Share your accessibility test results with your team and leadership
  • Prioritize and assign fixes based on severity and feasibility
  • Document your organization‘s accessibility policy and goals
  • Schedule ongoing accessibility audits and incorporate them into site maintenance
  • Provide accessibility training and resources to all content creators
  • Engage with the accessibility community for ideas, feedback and support
  • Advocate for web accessibility within your industry and networks

Together, we can create a digital world that welcomes and empowers all people, regardless of ability. As [Tim Berners-Lee], the inventor of the web, famously said, "The power of the web is in its universality. Access by everyone regardless of disability is an essential aspect." Let‘s make that vision a reality.

Further Resources

Want to learn more about web accessibility? Check out these great resources:

Have questions or feedback on this guide? We‘d love to hear from you. Send us a message at [email protected].

This guide was written by HubSpot‘s accessibility team and developer advocates. It was last updated on [Month Day, Year].

Similar Posts