Accessible SVG images

//add aria label to link that opens in new tab
function aria_formatter($content) {
$replace = array('target="_blank"' => 'target="_blank" aria-label="Opens in a new tab."');
$new_content = strtr($content, $replace);
return $new_content;
}
add_filter('the_content', 'aria_formatter', 999);

img:not([alt]) {
  outline: 2px solid red;
}

.sr-only {
position:absolute;
left:-10000px;
top:auto;
width:1px;
height:1px;
overflow:hidden;
}

<div class="sr-only">This text is hidden.</div> 

<!-- Instead of… -->
<span aria-label="Vegetarian">
	🌱
</span>

<!-- You could do… -->
<span aria-hidden="true">🌱</span>
<span class="visually-hidden">Vegetarian</span>

<!-- In some cases -->
  <!-- It might be more appropriate to expose these like images… -->
<span role="img" aria-label="Vegetarian">
	🌱
</span>
<span role="img" aria-label="Kaomoji table flip">
	(╯°□°)╯︵ ┻━┻
</span>

/* Proven method to visually hide something but */
/* still make it available to assistive technology */
.visually-hidden {
  position: absolute;
  top: auto;
  overflow: hidden;
  clip: rect(1px 1px 1px 1px); /* IE 6/7 */
  clip: rect(1px, 1px, 1px, 1px);
  width: 1px;
  height: 1px;
  white-space: nowrap;
}