Hello, I am wondering how to add Alt text, or image descriptions to pictures on a website. For clarity, this is not my own website, but a website for an organization that I will be volunteering at. The website is fully accessible with VoiceOver. The only issue is that the website has a lot of photos, and it does not have image descriptions. I would greatly appreciate it if someone could walk me through the steps on how to add Alt text to images on websites that are not personally owned.
Comments
Back End Interface
Hi there,
This will depend on the back end interface the site uses. If it's something like WordPress or another content management system, you may have a library of media images that have a section for alt text. Simply enter each image and tag as appropriate.
If you're looking at the raw HTML, you will need to enter the alt attribute manually like this:
<IMG SRC="https://website.com/IMG_123" alt="2 women looking at a laptop"> </IMG>
IMG SRC or the image source followed by an equal sign and the location of the file in quotation marks. Sometimes this will be absolute, other times it will be relative. If the image is decorate such as wavy line or other non-critical decoration, you'd write alt="" with two quotation marks after the equals sign which then lets the screen reader ignore the image.
ALT="description": The word ALT followed by an equals sign and the image description in quotation marks. Avoid the words image, picture or photo in the image description as this is redundant information. Simply write out what the image is.
Good:
ALT="Cartoon of a dog on a mobile phone"
ALT="A red sports car on a winding road"
Poor:
ALT="Photo"
ALT="Photo of some people"
Hope this is helpful.