<h1>Using CSS to highlight HTML errors - Alt Attributes</h1>
<p>A quick look at how we can use CSS to pick up common HTML errors and improve accessibility</p>
<h2>Img with a completely missing <code>alt</code> attribute</h2>
<img src="https://picsum.photos/400">
<h2>Img with an empty <code>alt</code> attribute</h2>
<img src="https://picsum.photos/400" alt>
<h2>Img with an <code>alt</code> attribute (no border)</h2>
<img src="https://picsum.photos/400" alt="provided by lorem picsum for testing">

/*missing alt attribute*/
img:not([alt]){
  outline: 5px dashed red;
  outline-offset: 5px;
}

/*empty alt attribute*/
img[alt=""]{
  outline: 5px solid blue;
  outline-offset: 15px;
}