How to Set Up Testing Tools

Print Page

WAVE Chrome or Firefox Extension

This tool helps you check pages for accessibility individually.

  1. Visit WAVE Extension page.
  2. Click either Chrome or Firefox extension link, depending upon your preferred browser.

What to look for: You should see an icon with a W in your browser toolbar, next to the address bar. It will run the checks when you click or activate this button.

Colour Contrast Analyser

This tool allows you to test the contrast between two colors using an eye dropper.

  1. Visit Colour Contrast Analyser page.
  2. Click the Download button, and the follow these instructions
    1. On a Mac, select the file with “.dmg” at the end of the filename.
    2. On a PC, select the file with “Setup” and “.exe” in the filename.

What to look for: If this installs properly, you will have a new application on your Windows or Mac desktop.

Force Show Keyboard Focus Bookmarklet

This bookmarklet puts an orange box around any interactive elements so that other keyboard interactions can be tested if a visible focus indicator has been removed.

    • Active your bookmarks bar. See sections below for instructions for Chrome and Firefox.
    • Navigate to the Force Focus Bookmarklet page.
    • Under “Installation” find the link called “Focus Bookmarklet.”
    • Click, hold and drag the link into your bookmarks bar.
    • Alternatively, you can install manually. Instructions for each browser are included below.

What to look for: If you’re on a website that doesn’t have focus indicators, click this bookmark in your bookmarks bar, and start tabbing through the site. An orange box will appear around interactive elements.

Turn on the Bookmarks Bar in Chrome

  1. On your computer, open Chrome.
  2. Once your Chrome browser has opened, navigate to the toolbar and click More.
  3. Select Bookmarks and then Show Bookmarks Bar.

Turn on the Bookmarks Toolbar in Firefox

  1. Click the Menu button and choose Customize.
  2. Click the Toolbars dropdown menu at the bottom of the page and select Bookmarks Toolbar.
  3. Click the Done button when you’re finished.

Manually Install Force Focus Bookmarklet on Chrome

  1. Type chrome://bookmarks/ into the address bar in Chrome.
  2. Click the Organize button next to the address bar.
  3. Click Add Bookmark.
  4. In the Name field, type the name “Force Focus.”
  5. In the URL field, paste the following: javascript:(function(){document.body.appendChild(document.createElement(‘script’)).src=’https://rawgit.com/pauljadam/bookmarklets/master/focus.js’;var iframes=document.getElementsByTagName(‘iframe’);for(i=0;i<iframes.length;i++) {iframes[i].contentDocument.body.appendChild(document.createElement(‘script’)).src=’https://rawgit.com/pauljadam/bookmarklets/master/focus.js’;}})();
  6. Click Save.

Manually Install Force Focus Bookmarklet on Firefox

  1. Click CTRL + SHIFT + B to open the Bookmarks Library. (You can also find this by going to the button called Open Menu in the Firefox Toolbar and then clicking Library > Bookmarks > Show all Bookmarks.)
  2. Make sure you have the “Bookmarks Toolbar” selected in the left-hand pane containing the bookmark folder structure.
  3. Next, click Organize in the toolbar, which is the first button next to the back and forward arrow keys.
  4. Click New Bookmark.
  5. In the Name field, type the name “Force Focus.”
  6. In the Location field, paste the following: javascript:(function(){document.body.appendChild(document.createElement(‘script’)).src=’https://rawgit.com/pauljadam/bookmarklets/master/focus.js’;var iframes=document.getElementsByTagName(‘iframe’);for(i=0;i<iframes.length;i++) {iframes[i].contentDocument.body.appendChild(document.createElement(‘script’)).src=’https://rawgit.com/pauljadam/bookmarklets/master/focus.js’;}})();
  7. Click Add.