Skip to content

Instantly share code, notes, and snippets.

@Mottie
Last active December 27, 2022 20:33
Show Gist options
  • Save Mottie/806ea71f6bd5112d0c891ad4d4b5a1c6 to your computer and use it in GitHub Desktop.
Save Mottie/806ea71f6bd5112d0c891ad4d4b5a1c6 to your computer and use it in GitHub Desktop.
Reset WAVE Evaluation Tool Bookmarklet

Bookmarklet to reset WAVE

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

Download the wave-reset.html file included in this Gist

Installing

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

Text

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

Icon

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 an ICON 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 an ICON 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

Security

  • 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 the wave-reset.html file and paste it into a JavaScript Beautifier to see that it matches the wave-reset.js code included in this Gist
<!DOCTYPE NETSCAPE-Bookmark-file-1>
<META HTTP-EQUIV="Content-Type" CONTENT="text/html; charset=UTF-8">
<TITLE>Bookmarks</TITLE>
<H1>Bookmarks</H1>
<DL><p>
<DT>
<A HREF="javascript:(function()%7B(function%20()%20%7B%5B...document.querySelectorAll('link%23wavestyle%2Cscript%23wavescript%2Ciframe%23wave_sidebar_container%2C%23wave5topbar%2C%23wave5bottombar%2C%23wave5codetoggle%2C%23wave5code%2C%23wave5_iconbox%2C%23wave5_title%2C%23wave5_iconbox_title%2C%23wave5_details%2C%23wave5_iconbox_summary%2C%23wave5_iconbox_doclink%2C%23wave5_iconbox_arrow%2C.wave5icon%5Bsrc*%3D%22extension%3A%2F%2F%22%5D%2C.wave5text')%5D.forEach(el%20%3D%3E%20el.remove())%3Bdocument.documentElement.style.marginLeft%3Dnull%3B%7D)()%3B%7D)()%3B" ADD_DATE="1257995008" ICON="data:image/png;base64,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">Reset WAVE</A>
</DL>
// Original JS code
(function () {
[
...document.querySelectorAll('link#wavestyle,script#wavescript,iframe#wave_sidebar_container,#wave5topbar,#wave5bottombar,#wave5codetoggle,#wave5code,#wave5_iconbox,#wave5_title,#wave5_iconbox_title,#wave5_details,#wave5_iconbox_summary,#wave5_iconbox_doclink,#wave5_iconbox_arrow,.wave5icon[src*="extension://"],.wave5text')
].forEach(el => el.remove());
document.documentElement.style.marginLeft = null;
})();
Display the source blob
Display the rendered blob
Raw
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 60 60" style="enable-background:new 0 0 60 60" xml:space="preserve"><ellipse cx="30.2" cy="29.6" rx="23.3" ry="23.5" style="fill:#4877b5"/><path d="M7.9 22.5c6.1 0 4.9 20 11 20s4.9-20 11-20 4.9 20 11 20 4.9-20 11-20" style="fill:none;stroke:#fff;stroke-width:4"/><path d="M59.2 29c-.2-6-2.2-11.7-5.8-16.5a29.5 29.5 0 0 0-12.5-9.6c-4.3-1.7-9-2.4-13.6-2A29.2 29.2 0 0 0 1.2 25.7c-.5 3.3-.4 6.7.3 9.9 3.2 15.8 18.6 26 34.4 22.8C43 56.9 49.4 52.9 53.6 47c3.9-5.2 5.8-11.6 5.6-18zm-6.7 2.5A22.08 22.08 0 0 1 46 45.7c-7.9 7.9-20.5 8.9-29.5 2.1l-.5-.3.6-.6c10.3-10.4 20.7-20.7 31-31.1 1.7 2 2.9 4.3 3.8 6.8.6 1.8 1 3.8 1.1 5.9.1.6.1 2.5 0 3zm-23.5-4L12.5 44a22.4 22.4 0 0 1 5.2-32.9c8-5.2 18.4-4.8 25.9.9l.4.3-3.5 3.5L29 27.5z" style="fill:#a00"/></svg>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment