The Siteimprove Accessibility browser extension and editing a live page with browser DevTools

Summary

The Siteimprove Accessibility Checker browser extension and browser DevTools can be used together to identify accessibility issues and simulate fixes directly in the browser, allowing for fast validation without needing to publish changes.

What it is

Introduction

Create a powerful combination for quickly finding and fixing accessibility errors by using the Siteimprove “Accessibility Checker” browser extension with browser DevTools.

This type of functionality is supported by all major browsers including Chrome, Firefox, Edge, and Safari.

DevTools can also be referred to as “Developer Tools" or “Web Inspector.” 

The browser extension:

• Runs Siteimprove’s automated accessibility checks. It does not run the other Siteimprove modules such as Quality Assurance or Policy
• Runs those accessibility checks on a single web page, i.e. only the web page you have open in your current tab
• Will show you most, but not all, of the same accessibility errors that the platform will show you
• Is free for everyone to download - not just Siteimprove customers
• Lets you check a page in seconds. There’s no need to wait for a recrawl or a single page re-check, like you need to do in the Siteimprove platform

How it works

Browser DevTools

DevTools comes pre-installed with every browser. It’s a “power user” feature which is hidden by default. To open DevTools, you typically press F12, or right-click then choose “Inspect” – but this article doesn’t focus on keyboard shortcuts and where to click. Instead, this article focuses on general techniques.

DevTools gives you the ability to inspect and edit the web page that you have open in your current tab. The “inspect” functionality lets you see the source HTML and CSS for the page. It’s under a tab called “Elements” in Chrome DevTools and “Inspector” in Firefox DevTools. 

The “edit” functionality is in the same place, and lets you edit that HTML and CSS. Your edits will exist only in your local copy of the page – the local copy that your browser automatically makes behind the scenes, every time you navigate to a page. Your edits will be automatically thrown away by the browser when you reload the page, so that you can start fresh with a new round of edits, or stop editing and browse the web in the regular way again.

Why it matters

This editing functionality is remarkable in that you don’t need admin access to that web page’s server, content management system, or any kind of permission from the author(s) of that web page. This is a rare power in the world of computers. With desktop software like Microsoft Word or Photoshop, you can’t easily rearrange the screens and dialogs of that software - not even temporarily. You would need significant software development expertise to do that. But for web pages, thanks to DevTools, this ability is available to a much larger group of people. The goal of this article is to make you a part of that group of people.

As an example of this, the https://www.3.org/ web page currently looks like this:

DevTools can be used to edit the page by removing most of that main paragraph – everything after the word “guidelines”: 

You can make edits in DevTools appear on a page, within seconds and for any page you visit, as if they were made by the page author.