Inspiration behind creating A11yInspect - A Browser Extension for Accessibility

Ever used an accessibility chrome extension and felt overwhelmed with an overload of information! I know I have! What does all this information mean - all the icons, all the code references? How do you decide on the accessibility with this influx of information? If you don't know accessibility, all they do is confuse everyone whether you are a developer, testers, content creator or designer! Are we making it difficult for people to understand accessibility? I believe we are! With so many accessibility chrome extensions there, is there a need for another chrome extension. Most tools leave you with more questions than answers. So I think there is a need for another browser extension A browser extension that has a simple UI, doesn't make you wonder about: Where’s the actual problem? What exactly is wrong? Why is it an issue? What code do I fix? What WCAG success criterion does it violate? Honestly, accessibility can and should be as simple as that! And yes developers & designers should be able to understand it without needing us accessibility professionals as intermediaries! What problem does A11yInspect solve? Our aim was to make accessibility testing simple. So how did we do it! Bookmarklets to the rescue! Who doesn't love bookmarklets? They look at the code and show you the relevant information on your page. Honestly, no one is going to go and check the aria-label or alt text or even the heading level in the code. Remember as much as we would like it, accessibility isn't everyone's job! So go give it a try! Download A11yInspect & try the different bookmarklets! Accessibility Testing We said lets not send people looking for the accessibility problems. At the end of the day, we are a tool. We should be making people's life easy to understand the accessibility gaps without feeling overwhelmed! We looked at it from a layman's perspective: In A11yInspect you can test an entire page or just test an element. You just changed a button on the page, just check buttons! Why confuse you with everything else! Let's give you the flexibility to choose how you want to look at the accessibility! How do we show the results! Overview - Everyone understands data - the Overview tab which gives you an overall idea of where you stand and what you have to work through Fails, Validates & Suggestion tabs - We wanted to not confuse users and we thought that separating the issues into Fails, Validates & Suggestion, will help people have a strategy. In addition, we ensured we has separate tables for WCAG Level A & AA. Lets do our job! Lets help people find a way to check and implement accessibility! Understanding the Accessibility Issue Accessibility Issues are grouped since people find it easier to implement similar issues. The Issues are provided 4 severity level either Blocker, Critical, Major or Minor. For every instance identified of the Issue, we provide: ID - a unique ID for every instance Attributes - Shows you the key information that will you need to check. Our first option if to see if we can identify the most relevant part of the code snippet for you to evaluate or then we what to consider when evaluating for accessibility Example of relevant information from the code: Visual Label=SK & Accessible Name=Your Profile Settings Example of guidance on what to consider: Check if Skip to main content link works appropriate Element Type - Remember the element you can test for, this is the same information WCAG SC - The applicable Success Criteria as per Web Content Accessibility Guideline Screenshot - One click and it downloads a screenshot and even highlights where the problem of with a red border. It is as simple as that! No more guess work! How long did it we take to create A11yInspect? Well we have been building the rulesets and the tool for 18 months now! It has been a fun journey of thinking of keeping it simple! With the reviews we are getting - people love the UI and the simplicity of the tool! Do try it out and share your comments and feedback! Did we learn anything during the development process? From a developers perspective, we learnt that developers want to develop, develop, develop. Accessibility doesn't come instinctively to them. It is an after thought. It was therefore important that our own developers use A11yInspect when they develop anything. And let me tell you, we have been able to make it simple for them. Yes at times they need the accessibility testers but they have started to get it 90% right first time round! So it is time to empower developers with something simple. Don't take accessibility hard for them! Make it simple! From a tester perspective, with less than 9,000 accessibility professionals in certified in the world, we needed to make the tool easy for testers also. We have to accept we have lot of new people joining the profession and also the experienced ones need sup

May 21, 2025 - 08:50

Inspiration behind creating A11yInspect - A Browser Extension for Accessibility

Ever used an accessibility chrome extension and felt overwhelmed with an overload of information! I know I have!

What does all this information mean - all the icons, all the code references?

How do you decide on the accessibility with this influx of information?

If you don't know accessibility, all they do is confuse everyone whether you are a developer, testers, content creator or designer!

Are we making it difficult for people to understand accessibility? I believe we are!

With so many accessibility chrome extensions there, is there a need for another chrome extension.

Most tools leave you with more questions than answers. So I think there is a need for another browser extension

A browser extension that has a simple UI, doesn't make you wonder about:

Where’s the actual problem?
What exactly is wrong?
Why is it an issue?
What code do I fix?
What WCAG success criterion does it violate?

Honestly, accessibility can and should be as simple as that! And yes developers & designers should be able to understand it without needing us accessibility professionals as intermediaries!

What problem does A11yInspect solve?

Our aim was to make accessibility testing simple.

So how did we do it!

Bookmarklets to the rescue!

Who doesn't love bookmarklets? They look at the code and show you the relevant information on your page.

Honestly, no one is going to go and check the aria-label or alt text or even the heading level in the code.

Remember as much as we would like it, accessibility isn't everyone's job!

So go give it a try! Download A11yInspect & try the different bookmarklets!

Accessibility Testing

We said lets not send people looking for the accessibility problems. At the end of the day, we are a tool. We should be making people's life easy to understand the accessibility gaps without feeling overwhelmed!

We looked at it from a layman's perspective:

In A11yInspect you can test an entire page or just test an element. You just changed a button on the page, just check buttons! Why confuse you with everything else! Let's give you the flexibility to choose how you want to look at the accessibility!

How do we show the results!

Overview - Everyone understands data - the Overview tab which gives you an overall idea of where you stand and what you have to work through
Fails, Validates & Suggestion tabs - We wanted to not confuse users and we thought that separating the issues into Fails, Validates & Suggestion, will help people have a strategy. In addition, we ensured we has separate tables for WCAG Level A & AA. Lets do our job! Lets help people find a way to check and implement accessibility!

Understanding the Accessibility Issue

Accessibility Issues are grouped since people find it easier to implement similar issues. The Issues are provided 4 severity level either Blocker, Critical, Major or Minor.

For every instance identified of the Issue, we provide:

ID - a unique ID for every instance
Attributes - Shows you the key information that will you need to check. Our first option if to see if we can identify the most relevant part of the code snippet for you to evaluate or then we what to consider when evaluating for accessibility

*Example of relevant information from the code:
*
Visual Label=SK & Accessible Name=Your Profile Settings

*Example of guidance on what to consider:
*
Check if Skip to main content link works appropriate

Element Type - Remember the element you can test for, this is the same information
WCAG SC - The applicable Success Criteria as per Web Content Accessibility Guideline
Screenshot - One click and it downloads a screenshot and even highlights where the problem of with a red border.

It is as simple as that! No more guess work!

How long did it we take to create A11yInspect?

Well we have been building the rulesets and the tool for 18 months now! It has been a fun journey of thinking of keeping it simple!

With the reviews we are getting - people love the UI and the simplicity of the tool! Do try it out and share your comments and feedback!

Did we learn anything during the development process?

From a developers perspective, we learnt that developers want to develop, develop, develop. Accessibility doesn't come instinctively to them. It is an after thought.

It was therefore important that our own developers use A11yInspect when they develop anything. And let me tell you, we have been able to make it simple for them.

Yes at times they need the accessibility testers but they have started to get it 90% right first time round! So it is time to empower developers with something simple.

Don't take accessibility hard for them! Make it simple!

From a tester perspective, with less than 9,000 accessibility professionals in certified in the world, we needed to make the tool easy for testers also. We have to accept we have lot of new people joining the profession and also the experienced ones need support to do more with their time!

A11yInspect tries to do just that in the way it also provide guidance on Success Criteria and even the simple thing of automatic screenshots, what a time saver!

What was the biggest challenge we faced?

Breaking away from how the industry does things was the key! Somewhere it was about how can A11yInspect be so simple?

If people compare us with our competitors, they will be confused, since they expect the confusion in some ways today. ☺

The other challenge was should we write our own ruleset? I think this was an easy decision for us.

Most tools out there are just wrappers for the open-source ruleset. So then what accessibility knowledge or experience do they bring to the table. As I see it none.

They may be able to make a better UI or a better feature, but basically all the tools out there are just giving you the same or similar information!

We didn’t want to be a wrapper! It was time to showcase our 20 years of experience in accessibility testing.

In Summary

In this time of reset in the industry, we are here to make accessibility testing simple for everyone!

We wish everyone would learn accessibility but lets be realistic.

Let's build something simple, easy, intitutive that provides answers not questions!

You can get the Chrome Extension or the Edge Extension and more to come!

Do download, try A11yInspect & provide suggestions!