WAVE is a browser extension used to test the accessibility of a web page. It alters the HTML to add indicators thoughout the page, but unfortunately there isn't a way to remove this indicators. That's where this bookmarklet comes in. When you're done with the evaluation, click on this bookmarklet, and all the indicators will disappear.
Important note: This is not a perfect solution. This bookmarklet is only removing the indicators, but not actually reseting WAVE. So if you need to run WAVE again, you will likely need to Run it twice to open the WAVE side panel and apply the indicators again.
Download the wave-reset.html
file included in this Gist
Most bookmarklets provide a link that you can drag and drop into your browser bookmarks, but using this method of importing the bookmark allows you to associate an icon with the bookmarklet. So if you don't want an icon, follow the instructions on how to edit the wave-reset.html
file to replace the icon.
To install this bookmarklet
- Get to the bookmark manager
- Open the browser customize menu (3 dots or hamburger menu in the upper right corner)
- Select "Bookmarks"
- Select "Bookmark manager"
- Or, right-click on the bookmarks bar and select "Bookmark manager"
- In the upper right corner of the bookmark manager are 3 dots, select and choose "Import bookmarks"
- Select the downloaded "wave-reset.html" file
- Activate the "Open" button to import
- The new bookmark will be added to an "Imported" folder.
- Move the bookmark to a new destination and delete the "Imported" folder
Editing the bookmark within the browser will likely break the icon, so edit the wave-reset.html
file first
- Open the
wave-reset.html
file in any text editor - Search for
Reset WAVE
near the end of the file, you may need to make the text wrap to see it, then edit it - Only change the text within the angle brackets, do not remove them!
- Save and repeat the install
The original icon has been included as an SVG in this Gist
To remove the icon:
- Open the
wave-reset.html
file in any text editor - Within the
wave-reset.html
file is anICON
property, remove everything between the double quotes - Save and repeat the install
To replace the icon:
- Open the
wave-reset.html
file in any text editor - Within the
wave-reset.html
file is anICON
property, remove everything between the double quotes - Start with, or convert your file to, a GIF or PNG.
- Make it as small as possible. I usually use a tool like TinyPNG
- Convert the png into a data URI using a tool like online png tools, or i-converter
- Now add the data URI from the tool within the
ICON
property double quotes - Save and repeat the install
- This bookmarklet will only run when you click it
- It does not collect any data from you, nor does it store any data
- To check, copy the obfuscated code within the
HREF
of thewave-reset.html
file and paste it into a JavaScript Beautifier to see that it matches thewave-reset.js
code included in this Gist