How to make images accessible.

accessible_images.html

// image with a descriptive alternative text, helps users to understand what is on the picture
<img src='cat.jpg' alt="a cat playful laying on its back" />

// image for decorative purpose which adds unnecessary information
// Screenreaders will read this as "image, Dashboard Logo, My Dashboard"
<div>
  <img src="dashboard_black_24dp.svg" alt="Dashboard Logo" />My Dashboard
</div>

// just removing the alt-tag is not helpful either
// Screenreaders will read this as "Image without title, dashboard black 24p, My Dashbaord"
<div>
  <img src="dashboard_black_24dp.svg" />My Dashboard
</div>

// Hide non-descriptive images via inline pasting or aria-attribute
<div>
  <svg>...</svg> My Dashboard
</div>
<div>
 <img src="dashboard_black_24dp.svg" aria-hidden="true" /> My Dashboard
</div>