Add more

bookmarklets/background-images.html → bookmarklets/background-image-hide.html

@@ -12,3 +12,4 @@
 
 <div id="one"></div>
 <div id="two"></div>
+<div id="three"><img src="https://picsum.photos/300/200" alt="" style="width: 300px;height: 200px;margin: 1rem;"></div>

bookmarklets/background-image-hide.js

@@ -0,0 +1,26 @@
+/**
+ * @bookmarklet Background image hide
+ * @description Hide all CSS background images
+ * @author Zoe Mickley Gillenwater
+ * @authorUrl https://zomigi.com/blog/bookmarklets-for-accessibility-testing/
+ * @tags utility
+ * @pageTest true
+ */
+(function () {
+  var tags = document.getElementsByTagName("*");
+  var element;
+  for (var i = 0; i < tags.length; i++) {
+    element = tags[i];
+    if (element.currentStyle) {
+      if (element.currentStyle["backgroundImage"] !== "none")
+        element.style.backgroundImage = "none";
+    } else if (window.getComputedStyle) {
+      if (
+        document.defaultView
+          .getComputedStyle(element, null)
+          .getPropertyValue("background-image") !== "none"
+      )
+        element.style.backgroundImage = "none";
+    }
+  }
+})();

bookmarklets/background-image-highlight.html

@@ -0,0 +1,15 @@
+<style>
+#one, #two {
+  background-image: url("https://picsum.photos/300/200");
+  background-repeat: no-repeat;
+  background-size: contain;
+  background-position: center;
+  width: 300px;
+  height: 200px;
+  margin: 1rem;
+}
+</style>
+
+<div id="one"></div>
+<div id="two"></div>
+<div id="three"><img src="https://picsum.photos/300/200" alt="" style="width: 300px;height: 200px;margin: 1rem;"></div>

bookmarklets/background-images.js → bookmarklets/background-image-highlight.js

@@ -1,5 +1,5 @@
 /**
- * @bookmarklet Background images
+ * @bookmarklet Background image highlight
  * @description Highlight all CSS background images
  * @author Zoe Mickley Gillenwater
  * @authorUrl https://zomigi.com/blog/bookmarklets-for-accessibility-testing/

bookmarklets/test-csp.js

@@ -11,7 +11,7 @@ document.addEventListener("securitypolicyviolation", cspCheck, false);
 var testScript = document.createElement("script");
 testScript.setAttribute(
   "src",
-  "https://jsnmrs.github.io/bookmarklets/bookmarklets/test-js-external.js"
+  "https://code.jasonmorris.com/bookmarklets/bookmarklets/test-js-external.js"
 );
 document.body.appendChild(testScript);
 

bookmarklets/truncation.js

@@ -3,7 +3,7 @@
  * @description Identify instances of text-overflow: ellipsis
  * @author  Jason Morris
  * @authorUrl https://jasonmorris.com
- * @tags accessibility
+ * @tags accessibility, wcag:1.4.10
  * @pageTest true
  */
 (function () {