In light of the recent COVID-19 pandemic - OPTASY would like to offer DRUPAL website support for any Healthcare, Government, Education and Non-Profit Organization(s) with critical crisis communication websites or organizations directly providing relief. Stay Safe and Stay Well.

What Are Some of the Best Web Accessibility Testing Tools to Evaluate Your Website With? Top 5 Chrome Extensions

What Are Some of the Best Web Accessibility Testing Tools to Evaluate Your Website With? Top 5 Chrome Extensions

by Adriana Cacoveanu on Feb 29 2020

You've gone through the guidelines, standards, warnings, and best practices included in the W3C recommendations and... you're stuck. How do you know whether your website is 100% WCAG 2.1 compliant? What are the best web accessibility testing tools out there that you could use? 

Free, easy to use accessibility evaluation tools that you could run on your website to spot the issues lurking in there. 

And which could even get you some valuable recommendations on the best ways to address them. 

All that before you actually have someone (or even a whole team of QA testers) review your website. Before you carry out an in-depth accessibility audit and run user-centric testing sessions with... real people involved. 

You must be thinking about browser extensions... 

They're so accessible: you just open the page you want to check and click a button in your toolbar. They're free and make great "starts" for identifying accessibility issues on your website. And for getting your hands on some valuable recommendations on how to fix them. 

So, here are 5 automated accessibility testing tools that we recommend you try first: 

 

0.1. But What Are Accessibility Tools More Precisely? 

"Are there any recommended tools available that can help me test for accessibility issues?"

Take these common accessibility issues that might still go "undetected" on your website: 

 

  • there's not enough color contrast on certain pages (or no contrast at all)
  • one or more images don't have ALT descriptions added to
  • an editor deleted the content for one of the H2 tags but left that tag lingering in there and confusing the screen readers
  • someone from your design team has put a placeholder text instead of a text field, which risks displaying an unlabeled field, that screen readers cannot... read
  • there's one label missing from your newsletter sign-up form 

     

These are all frequent issues that web accessibility evaluation tools can help you detect and address. 

They fall into multiple categories: 

 

  • browser extensions, that we'll be focusing on in this post
  • command-line tools accessibility testing tools that you can integrate with your continuous integration system 

     

Tip: Keep in mind that the following 5 best web accessibility testing tools detect about 30% of the issues. They make a great starting point for a more complex audit and comprehensive monitoring strategy that you should set in place. 

 

1. Wave, The Venerated Web Accessibility Evaluation Tool for Chrome 

A full-featured, easy to use website accessibility checker that's been in most developers' toolkits for quite a few years now. 

5 Best Web Accessbility Testing Tools: Chrome Extensions- Wave

Here's how it works: 

 

  • it adds a visual overlay of error icons and indications to the web page that you're auditing
  • icons which, once clicked, provide you with information and recommendations about the accessibility issues detected: redundant titles, structural elements, links to HTML, poor color contrast, how those issues impact different types of users, what WCAG guidelines they violate, etc.
  • it points out to you the "troublesome" code via annotated HTML popping up in the panel at the bottom of the screen 

     

In short, Wave is one of the robust website accessibility checkers that goes beyond streamlining your audit process.

It's also geared at educating users (website owners, QA testers) about the accessibility issues to pay attention to. 

"How to use Wave accessibility tool?" 

Either way:

 

  • you can just enter your URL in the dedicated field on their website
  • you can download the browser extension 

     

Go for the extension particularly if it's dynamic, password-protected and locally stored web pages that you need to check. 

 

2. Tenon, Accessibility as a Service 

"How do I test accessibility?" 

Tenon's another tool that comes both in a free and paid version. 

5 Best Web Accessbility Testing Tools: Chrome Extensions- Tenon

What makes it "worthy" of this top 5 selection?

 

  • it addresses the common scenario: running accessibility tests after neglected guidelines have already turned into critical issues that affect the user experience 
  • it's such a flexible tool for content creators, designers, developers, and testers
  • it generates... generous reports with code snippets for each error, corresponding WCAG guidelines, and recommendations on how to fix them 

5 Best Web Accessbility Testing Tools: Chrome Extensions- Tenon accessibility report

In short: Tenon helps you run a preventive type of accessibility check on your website. You can detect key issues before they even get to turn into major usability problems 

Furthermore, you can easily incorporate Tenon into your toolset via its API. It integrates smoothly with any CMS, IDE, deploy tool or automated build that you might be using.

 

3. Google Lighthouse, One of the Top Automated Accessibility Testing Tools  

"How do I know if my website actually is WCAG 2.0 compliant?" 

5 Best Web Accessbility Testing Tools: Chrome Extensions- Google Lighthouse

You give it a full check using a tool like Google Lighthouse here: 

 

  • it's open-source
  • it's automated
  • it's so handy (it's Chrome built-in)
  • it's super easy to use 

Moreover, this accessibility testing tool is part of a whole suite of checks that you can run using Chrome Developer Tools: 

  • SEO
  • Progressive Web App
  • Performance
  • Best Practices 

What it does it provide you with a full report of its test results: 

 

  • whether all the buttons on that page have accessible names or not
  • whether all the images have ALT attributes added to
  • whether that page has a title or not ... 

     

Next, you simply take it from there and improve the areas signaled in the report. 

And here's how you use it: 

 

  • open devtools in your Chrome Browser
  • look for the "Audits" tab
  • click "Perform an Audit"

Tip: save the report in a JSON format for later (or to send it to someone in your team). 

Another great thing about Google Lighthouse is that it's one of those web accessibility evaluation tools that don't require you to sign up. You just drag a report onto the online report viewer that it provides you with. 

 

4. Axe Browser Extension 

"How do you know if your site actually is WCAG 2.0 compliant?" 

5 Best Web Accessbility Testing Tools: Chrome Extensions- Axe

You "grab" a tool like Axe here and give your site an automated audit. 

It'll just attach itself as a new tab to your Chrome's Dev Tools. Once you click that blue "analyze" button, you'll be given a whole list of "violations" detected on your page. 

Why have we included it in our highly exclusive list of 5 best web accessibility testing tools? 

 

  • because it's free (a self-contained open-source library)
  • because you get to custom-tune it to your specific accessibility testing needs: add specific rules, integrate it with testing frameworks and browsers of your choice...
  • because each signaled issue "exposes" the corresponding markup, as well

     

Just hit "Inspect code" and you're taken to the tab in DevTools, where the "culprit element" is outlined.

Tip: another reason why this is one of the first website accessibility checkers that you should consider is that the Axe accessibility report goes beyond signaling clear violations of accessibility guidelines.

It also highlights aspects that you could improve on your website's UI.

 

5. Siteimprove, One of the Best Web Accessibility Testing Tools

5 Best Web Accessbility Testing Tools: Chrome Extensions- Siteimprove

We confess: Siteimprove is our favorite website accessibility checker. Here's why: 

 

  • it provides us with actionable information regarding all the issues that it detects
  • it generates clear explanations on the impact of those issues on some users
  • it also "spoils" us with intuitive user experience: issues get highlighted to the right side of the page 

     

Where do you add that the entire web page audit process is performed in our Chrome browsers. 

Easy to use and highly efficient. What more could you wish from a free accessibility testing tool? 

 

Final Word 

Turn this type of accessibility testing — using Chrome extensions — into a part of a more comprehensive testing strategy. 

You shouldn't limit your evaluation to the results that you get by using any of these 5 best web accessibility testing tools. 

There's still some level of "human intervention" needed to interpret those results. To come up with the proper set of steps to take, right? 

Use them if you just want to check whether: 

 

  • there are any images without ALT descriptions on your website
  • the HTML is valid
  • your form fields have both labels and descriptions 

     

Whereas for assessing: 

 

  • whether that HTML is semantic or not
  • whether those form field descriptions are user-friendly enough
  • whether there's a proper heading hierarchy on a given page on your website

     

... you'll need human analysis. 

Automated accessibility testing will (only) point out key aspects for your QA testers to focus on. 

 

The END

Have you used any of these accessibility testing tools on your website? 

Do you usually stop your audit there or do you use an automated & manual testing type of "combo"? Does it depend on the context actually? 

Share your thoughts in the comments down below! 

Photo by John Schnobrich on Unsplash 

Development

We do Web development

Go to our Web development page!

Visit page!

Recommended Stories

4 Reasons Why You Need Drupal Maintenance Services
  Entering the world of Drupal web development can feel like diving into the unknown for many business owners. Once they've figured it out with the help of a developer or a Drupal development agency, the business runs smoothly for a little while.  However, building and optimizing a website is like buying a new house—it's functional at first, but things break down and need repairing and regular care in time.  Since spring is just over the corner, what better moment to start cleaning, improving, optimizing, and refreshing your website? Whether you do it in-house or hire an agency that offers Drupal maintenance services, it will work wonders and could actually double your potential market value. But first, it's essential to understand why a regular maintenance plan is critical, how to tell when you need Drupal maintenance, and what does Drupal maintenance include. This article will answer these questions.   Why you should stick to a regular Drupal maintenance plan  If you've already entered the world of digital marketing, you know that the journey towards attracting and retaining customers doesn't end with web development and deployment. Change is a permanent constant in life, and businesses have to adapt to this ever-changing dynamic.  Security  A few years ago, website maintenance was optional. Building a static website that you could leave unattended for the entire year was perfectly normal.  Today, as the digital landscape has expanded and become more prone to security vulnerabilities, Drupal support is imperative for maintaining a healthy security posture.  Although Drupal is known for being the most secure CMS, this only applies if your Drupal website is regularly optimized with security updates and patches. The Drupal community and Drupal security team continuously build security patches, fixes, and upgrades, and Drupal users need to be in the loop about these updates. In other words, keeping up with the news and module updates in Drupal security is vital in order to avoid breaches.  Constant Drupal core module updates can boost website protection and secure it against cyberattacks and threats.  Fixing errors To ensure that your website performs well and meets the needs for speed and agility that the modern digital user demands, fixing bugs and errors is a top priority. These malfunctions may happen for multiple reasons—rushed coding and deployment, inadequate testing, or miscommunication. They may affect your site's performance and loading speed or even alter your Drupal website’s functionality.  And since users don't want to spend more than four seconds waiting for websites to load, not paying attention to repairing bugs could cost you customers.  This price is too big to pay, and it's worth considering Drupal maintenance services as part of your website strategies.  Keep your content fresh with new features Another reason why Drupal maintenance matters is related to scalability. Drupal websites can grow together with your business goals. Constant feature and module updates allow Drupal users a high level of customizing capabilities that helps businesses keep up with the changing needs of the customer.  With Drupal 8, integration is much more affordable, so if you haven't migrated yet, you might want to contact a Drupal agency to help you decide whether an upgrade is the right choice for your business.  The user behavior has dramatically shifted in the last year, which is why content optimization, new features, and enhancements allow brands to stay fresh and align to this changing environment.  SEO optimization Ranking high on Google and other search engines is crucial for your website to stay relevant. An excellent Drupal maintenance team has SEO experts that provide Drupal SEO audits and optimization.  “Good SEO work only gets better over time. It’s only search engine tricks that need to keep changing when the ranking algorithms change.” – Jill Whalen   How to tell when you need Drupal maintenance If you're not yet convinced that you need Drupal support and maintenance services for your website, here are some indicators that you can't postpone it any longer without hurting your business: Your website is slow, and you have received complaints about its loading speed. Your web traffic has dropped considerably. You experience more security breaches. Your content and design are outdated. Links, buttons, or forms are not working.   These are some of the red flags of poorly maintained websites. If you recognize these warning signs as part of your website, it's definitely time to start planning your maintenance strategy. What do Drupal maintenance services and support include? A useful maintenance model covers: Security and module updates Third-party integration support Regression testing  Bug diagnosing, fixing, and testing Hosting infrastructure maintenance Hack, malware, down recovery   Partner with the right Drupal maintenance and support agency When thinking about hiring a Drupal maintenance team, you need to consider your needs. At Optasy, we cover a wide range of website maintenance requirements and can create a customized maintenance and support plan to support your website's specific needs.  How does this sound to you? Have you made up your mind whether it is worth investing in Drupal maintenance services or not? If yes, then contact a reliable, dedicated support partner like Optasy and see how our Drupal maintenance services can keep your website up and running.  Photo credit: geralt on Pixabay.     ... Read more
Raluca Olariu / Mar 02'2021
4 Key Things to Know When Optimizing Your Drupal Website for Mobile
  Approaching a mobile-first strategy for your Drupal website is imperative. Since 52% of all website traffic comes from mobile devices, businesses that want to strive must ensure that they optimize their site for mobile.  Why is mobile optimization important? A website designed for desktop use can be non-functional on a phone or tablet. Building a mobile-friendly site that looks good regardless of how users access it is no longer optional for companies that want to deliver high-quality digital experiences.  "If I were to start Drupal from scratch today, I'd build it for mobile experiences first and desktop experience second." - Dries Buytaert, founder and lead developer of the Drupal CMS There are plenty of benefits and competitive advantages of implementing a mobile-first approach to your Drupal website. We'll name a few: Positively impacts search ranking Improves loading times Increases visibility across all devices Enhancing mobile performance for Drupal websites is not rocket science, but if you're a rookie in web development, hiring a Drupal developer to help you implement some of the steps highlighted in this article may be the safest strategy.  Without further ado, let's start to learn how you can optimize your Drupal website for mobile use.   1. First things first: you need a mobile menu.  Start your mobile optimization journey by installing a mobile menu that enables navigation links to be displayed accurately on narrow screens.  A popular style for mobile menus is the 'hamburger' icon. This type of menu is substituted by a symbol with three horizontal lines when the screen narrows to a particular width. When clicked on, the icon displays the mobile-friendly main menu of the Drupal website. Want to use this type of menu? Start by installing the Responsive Menus module and download the tar.gz.file.  In your dashboard, open the Extend tab and select the Install New Module button.  Lastly, use the file browser to upload the tar.gz file. You should now be ready to use the module to customize and style your website's menu.  Remember that you can also hire Drupal developers at any stage of your optimization process to help you streamline your operations.    2. Don't ignore code minification.  One of the top priorities for mobile site functionality is quick loading times. As CSS or HTML files can get bulky, removing unnecessary elements from your website's code can help it render more fastly.  There are a few steps for successfully minifying your code: Install the Minify module  Download the tar.gz file and unarchive it Move the resulting folder into your website's Drupal modules section.  Enable the module from your dashboard You also have the option to enable the minify module to start working automatically. This will assist your Drupal website in loading quicker on mobile devices and thus improving the user experience.    3. Browser cache implementation for mobile-friendly Drupal websites. The next step in optimizing your Drupal site for mobile is to implement browser caching, which allows a user's browser to store data, so it doesn't have to repeatedly download the same files.  This reduces latency if, for example, your site has an extensive background image. The browser caching allows the picture to be stored on each visitor's device, so it doesn't have to be downloaded every time the user visits your site.  Browser caching is a built-in tool in Drupal, and although you can configure it in your control panel, we recommend that you consult the official guide before doing it or hire a Drupal developer to help you.    4. Consider image optimization.  Websites that contain many large image files can have longer loading times on mobiles. You don't want that if your goal is to provide high-quality experiences for your mobile users. Therefore, you can start optimizing your images to accelerate your site's performance. How can you reduce the size of your photos without jeopardizing their quality? It's actually easy. Drupal's ImageAPI Optimize module helps you manage your images before uploading them onto the website.  You only have to download the module's tar.gz file, install, and enable it in your dashboard. To automatically optimize your images for mobile devices, make sure to select ImageAPI Optimize as the default toolkit.  When creating responsive images, the amount of space an image fills on the screen is significant. Drupal lets you use @media rules to modify images depending on each user's screen size. This high level of personalization is allowed by the Breakpoint and Responsive Images modules.    Why Drupal 9 might be the best option for a mobile-first approach The latest version of Drupal provides optimized modules and features for mobile devices that enhance the user experience and address modern customers' needs.  Among the key benefits of Drupal 9 for mobile optimization are: Improved speed of content delivery Responsive design for various screen's widths  Editing content on mobile is easier  In conclusion, if you want to deliver high-quality, personalized user web experiences in the modern era, optimizing your website for mobile devices is a must. Optasy can help you build a mobile-first approach that satisfies the need for speed and high functionality that today's mobile users expect.  Image credit: deeptuts on Pixabay... Read more
Raluca Olariu / Feb 22'2021
10 Best Headless CMS in 2020, That Cover Most of Your Requirements (Part 2)
Ready to compare the features of 5 other best headless CMS in 2020? We've got them ready for you to just dive in and: survey the key reasons why you'd choose one over the other discover each one's main use cases narrow down your options … and pick the one that matches your requirements. What Is the Best Headless CMS in 2020? 5.6. Directus An open source tool for managing and delivering content across an entire network of platforms and devices. And here are some of the top reasons for choosing Directus: it provides your editorial team with an easy to use admin app for managing content it can be in the cloud or self-hosted it provides API for your development team to fetch content 5.7. Netlify CMS  One of your top 10 headless CMS options, an open source one, that you get to add to any static site generator of your choice. A React single-page application that provides you with an easy to use UI, playing the role of a… wrapper for your Git Workflow. Basically, when using Netlify CMS your content gets stored in your web app's git repository (as markdown files), close to your codebase.   "How does a Netlify CMS Gatsby setup work?"   It's pretty straightforward: You enter your content via that user-friendly interface, then Gatsby uses it to come up with the right pages for your web app. Why would you use it? it fits both large and small-sized projects, with fewer pages to create, to add content to, to edit, and to manage you get to review/preview your content and make changes in real-time, and even control entries status in editorial workflow mode it provides you with an easy-to-use UI, with just 3 tabs: workflow, media, and content you're free to use it with any static site generator you get to extend its functionality: add your own UI widgets, editor plugins, customized previews, etc. 5.8. GraphCMS     An API-first content management system, a GraphQL-native one, that allows you to distribute content across multiple digital platforms. And not just anyhow, but… within minutes. Your developer team gets to create content APIs in no time, whereas your content team gets all the tools they need for a smooth editor experience.   Source: capterra.com GraphCMS vs Contentful: Main Differences GraphCMS works best for enterprise and mid-market companies, enabling them to build highly scalable applications GraphQL is its underlying technology: an open source query language for APIs, that's been growing more and more popular among developers Contentful targets top global brands, helping them distribute digital content experiences across complex networks of markets and channels REST is its underlying technology: a programming paradigm for distributed systems And here are 2 good reasons for choosing GraphCMS as your go-to headless content management system:  you get a CMS that's client-side and JAMstack compatible you get to tap into the benefits of a JAMstack approach to development (JavaScript & Markup & API) 5.9. Cosmic A cloud-hosted headless content management system that provides you with both GraphQL and REST APIs. But what makes Cosmic one of the best headless CMS in 2020? Why choose the Cosmic Headless CMS?  it ships with features like content modeling, media management, localization, and webhooks it grants you a smooth editor experience with its WYSIWYG  editor, that you can use to incorporate (by embedding code) third-party services like Typeform and GitHub. it integrates smoothly with AWS, Slack, Algolia, Stripe, HubSpot 5.10. Kentico Kontent A cloud-based content delivery API that turns your structured content into content that's easy to be "consumed" by any device or digital platform that you might use as a front-end delivery layer.  Why would you choose it over other great options of headless CMS? you get an AI chatbot when using Kentico Kontent it provides webhooks and custom elements that make third-party integrations a lot smoother you get content management API enabling content consumption And we've come to… the END of the list of 10 best headless CMS in 2020. Which one checks the most features off your list? Now, if you're facing a "Headless Drupal 8 vs Contentful" dilemma, we're here to: help you identify the one that works best for your business and your requirements make your headless CMS-based project work Just drop us a line!   Image by tdfugere from Pixabay   ... Read more
Adriana Cacoveanu / Sep 26'2020