<h2>Images</h2>
<img src="https://via.placeholder.com/100x100" />
<img src="https://via.placeholder.com/100x100" alt="" />
<img src="https://via.placeholder.com/100x100" alt="A placeholder" />

<h2>Canvas</h2>
<canvas width="100" height="100"></canvas>
<canvas width="100" height="100" role="img"></canvas>
<canvas width="100" height="100" role="img" aria-label="image showing only the color gray"></canvas>

html,
body {
  background: #1d1f20;
  color: #fff;
}

/* missing lang on <html> */
html:not([lang]),
html[lang=""] {
  border-top: 20px solid red;
}

/* missing alt on <img> */
img:not([alt]),
img[alt=""] {
  border: 5px dashed red;
}

/* missing role and aria-label on <canvas> */
canvas:not([role]),
canvas:not([aria-label]),
canvas[role=""],
canvas[aria-label=""] {
  border: 5px dashed red;
}

Array.prototype.forEach.call(document.getElementsByTagName("canvas"), (c) => {
  var ctx = c.getContext("2d");
  ctx.fillStyle = "#ccc";
  ctx.fillRect(0, 0, 120, 100);
})

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.