What's the best practice for making image-Alt ADA compliant?

• I have a question about images in regards to Alt Text, Title and Caption.

  When it comes to ADA compliance, whatever text I add to my caption, I also copy and paste that exact same wording into the Alternative Text and Title area.

  So, my question is, am I doing this right? ...what is best practice?

Answer:

In general that's fine, it really comes down to how the image is presented to the user.

In regards to ADA compliance, there are two issues to consider.

1. Alt text is required in most cases where an image is presented.

   The exception is images that are decorative like buttons, icons, backgrounds, etc. In those cases, you should use alt=" " (i.e., an empty space for where the text would otherwise be). This prevents HTML source code checking tools from showing an error for missing alt text. It also helps screen readers skip over reading them.

   Otherwise, alt-text should be included to provide disabled persons with an understanding of what the image represents. It also defends against lawyers who use scanning tools designed to find ADA non-compliance websites to target for lawsuits.

2. Repetitive text that's annoying to site visitors using screen readers.

   This one is lower risk in terms of exposure to lawsuits as tools have a harder time understanding the problem. But actual disabled users with screen readers can get very annoyed when the screen reader reads the caption then the alt-text and then the title and then maybe the link-title when they are all identical. And, some tools will flag this as well.

Another consideration is, depending on where the image is used in WordPress, it may or may not autogenerate the image title text. Typically it won't, but there are some places it will — like on a woocommerce product image.

The caption may be displayed below an image, which for screen readers would mean that it will likely be repeated which can be annoying to the user. In such cases, you can ...