Properly Adding Images

When adding images to your website make sure to add an alt tag. This helps those who are unable to see; it also helps non-disabled users if your image is unavailable the alt text will be displayed. Do not have text in an image, if you need to add text it has to be added with HTML and CSS. Also, make sure that there is a proper contrast ratio so it is easily read by all. Below is an example of what a screen reader sounds like when reading image alt text.

Transcript of audio file.

An Image without a Text Overlay

This is an image without text. It contains an alt tag for those who cannot see are able to tell what the image is of.

            <img src="img/nameofimage.jpg" alt="Alternative Text" />
         

An Image with a Text Overlay

If you need to add text over an image you need to make sure there is a proper contrast ratio.

Text on an image.

            <img src="img/nameofimage.jpg" alt="Alternative Text" />
            <p>Text on an image.</p>