<h1>Using CSS to prevent HTML Errors: Alt Attributes</h1>


<!-- should pass -->
<p>Expected: Pass</p>
<img src="https://picsum.photos/300" alt="a well written alt description">

<!-- fail, missing alt attr -->
<p>Expected: Fail</p>
<img src="https://picsum.photos/300">

<!-- fail alt attribute is null (see final comment after tests)-->
<p>Expected: Fail</p>
<img src="https://picsum.photos/300" alt>

<!-- fail, alt attribute is empty (see final comment after tests)-->
<p>Expected: Fail</p>
<img src="https://picsum.photos/300" alt="">

<!-- Test default output from a CMS that enters "Alt Text" if someone forgets an alt attribute -->
<p>Expected: Fail</p>
<img src="https://picsum.photos/300" alt="Alt Text">

<!-- should be valid -->
<p>Expected: Pass</p>
<img src="https://picsum.photos/300" alt="" role="presentation">

<!-- should fail as role="none" is not well supported yet -->
<p>Expected: Fail</p>
<img src="https://picsum.photos/300" alt="" role="none">

<!-- should pass as none will fall back to presentation, as per W3C best practices guidance -->
<p>Expected: Pass</p>
<img src="https://picsum.photos/300" alt="" role="none presentation">

<!-- should fail as there is no alt attribute, despite the role removing semantic information -->
<p>Expected: Fail</p>
<img src="https://picsum.photos/300" role="none presentation">

<!-- should warn as the alt attribute starts with "image of" -->
<p>Expected: Warning</p>
<img src="https://picsum.photos/300" alt="image of who knows what">

<!-- should warn as the alt attribute starts with "picture of" -->
<p>Expected: Warning</p>
<img src="https://picsum.photos/300" alt="picture of something random!">

<!-- 
## what are the last 3 about?
 
To improve maintainability it is suggested that whenever you have a purely decorative image (which should have no alt description) that you apply role="presentation" or role="none presentation" to future proof it.

This way when you get to an image that has no alt attribute you can easily identify if this was intended to make the image decorative, or if it was missed by mistake.

The CSS is structured to ensure that role="none" is not used without the "presentation" fallback due to the poor support it currently has.

One thing I am unsure about is whether: 

<img src="https://picsum.photos/300" role="none presentation" aria-label="test">

Is valid with an aria-label, something I need to check but I almost certain it is not correct! 

-->

img{
  outline: 5px solid green;
  margin: 1rem;
}


/*combining the previous examples and removing the img[alt=""] that is no longer needed*/
img:not([alt]),
img[alt="Alt Text"],
img[alt=""]:not([role="none presentation"]):not([role="presentation"])
{
  outline: 8px dashed red !important;
  outline-offset: 8px!important;
}

img[alt^="image of" i],
img[alt^="picture of" i]{
    outline: 8px dotted darkorange !important;
  outline-offset: 8px!important;
}