Image Alt Tests

Image alternative tests

I created this page to see how different user-agent, OS, and assistive technology combinations dealt with different ways people use to provide text alternatives for foreground images (that is, presented using the IMG element). User-agents and assistive technologies should present alternatives in accorance with text alternative computation

View the source for each image to check the markup used for each.

Just the Image

No Alt

 

UA-OS Combination Result
JAWS says “blank” because that’s how it behaves when skipping to the next line. In other words, JAWS ignores the image
OSX, Voiceover “karlgroves.gif image”
win7, FF, NVDA skipped altogether
win7, FF, JAWS “blank”
win7, IE, NVDA “graphic karlgroves”
win7, IE, JAWS skipped altogether

Alt

 

UA-OS Combination Result
OSX, Voiceover “Karl Groves image”
win7, FF, NVDA “graphic Karl Groves”
win7, FF, JAWS “graphic Karl Groves”
win7, IE, NVDA “graphic Karl Groves”
win7, IE, JAWS “graphic Karl Groves”

No Alt, Title Attribute

 

UA-OS Combination Result
In other words, title is OK for text alternative only if no other method is supplied
OSX, Voiceover “karlgroves.gif image”
win7, FF, NVDA “graphic Karl Groves”
win7, FF, JAWS “graphic Karl Groves”
win7, IE, NVDA “graphic Karl Groves”
win7, IE, JAWS ” graphic Karl Groves “

Alt & Title the Same

 

UA-OS Combination Result
OSX, Voiceover “Karl Groves image”
win7, FF, NVDA “graphic Karl Groves”
win7, FF, JAWS “graphic Karl Groves”
win7, IE, NVDA “graphic Karl Groves”
win7, IE, JAWS ” graphic Karl Groves “

Alt & Title Different

 

UA-OS Combination Result
Because the alt takes precedence, don’t put anything in there that you actually want humans to know about because chances are, they won’t
OSX, Voiceover “headshot image”
win7, FF, NVDA “graphic headshot”
win7, FF, JAWS “graphic headshot”
win7, IE, NVDA “graphic headshot”
win7, IE, JAWS “graphic headshot”

No Alt. Aria-label

 

UA-OS Combination Result
This method works great for aria-supporting assistive technologies
OSX, Voiceover “Karl Groves image”
win7, FF, NVDA “graphic Karl Groves”
win7, FF, JAWS “graphic Karl Groves”
win7, IE, NVDA “graphic Karl Groves”
win7, IE, JAWS ” graphic Karl Groves “

Empty Alt. Aria-label

 

UA-OS Combination Result
Due to the alt attribute’s priority over aria-label, a blank alt with an aria-label is a poor choice
OSX, Voiceover skipped entirely by VO
win7, FF, NVDA “blank”
win7, FF, JAWS “graphic Karl Groves”
win7, IE, NVDA skipped entirely by NVDA
win7, IE, JAWS “blank”

Alt & Aria-label the same

 

UA-OS Combination Result
Basically, this redundancy is unnecessary
OSX, Voiceover “Karl Groves image”
win7, FF, NVDA “graphic Karl Groves”
win7, FF, JAWS “graphic Karl Groves”
win7, IE, NVDA “graphic Karl Groves”
win7, IE, JAWS ” graphic Karl Groves “

Alt & Aria-label different

 

UA-OS Combination Result
This is where things get weird and inconsistent, so supplying both is to be avoided
OSX, Voiceover “Karl Groves image”
win7, FF, NVDA “graphic Karl Groves”
win7, FF, JAWS “graphic Karl Groves”
win7, IE, NVDA “graphic headshot”
win7, IE, JAWS ” graphic Karl Groves “

Linked Image

No Alt

 

UA-OS Combination Result
OSX, Voiceover “link image karlgroves.gif”
win7, FF, NVDA “link graphic w w w dot karlgroves dot com”
win7, FF, JAWS “images slash karl groves link graphic”
win7, IE, NVDA “link graphic w w w dot karlgroves dot com”
win7, IE, JAWS “images slash karl groves link graphic”

Alt

 

UA-OS Combination Result
OSX, Voiceover “link image Karl Groves”
win7, FF, NVDA “link graphic Karl Groves”
win7, FF, JAWS “Karl Groves link graphic”
win7, IE, NVDA “link graphic Karl Groves”
win7, IE, JAWS “Karl Groves link graphic”

No Alt, Title Attribute

 

UA-OS Combination Result
OSX, Voiceover “link image karlgroves.gif”
win7, FF, NVDA “link graphic Karl Groves”
win7, FF, JAWS “Karl Groves link graphic”
win7, IE, NVDA “link graphic Karl Groves”
win7, IE, JAWS “Karl Groves link graphic”

Alt & Title the Same

 

UA-OS Combination Result
OSX, Voiceover “link image Karl Groves”
win7, FF, NVDA “link graphic Karl Groves”
win7, FF, JAWS “Karl Groves link graphic”
win7, IE, NVDA “link graphic Karl Groves”
win7, IE, JAWS “Karl Groves link graphic”

Alt & Title Different

 

UA-OS Combination Result
OSX, Voiceover “Link image headshot”
win7, FF, NVDA “link graphic headshot”
win7, FF, JAWS “headshot link graphic”
win7, IE, NVDA “link graphic headshot”
win7, IE, JAWS “headshot link graphic”

No Alt. Aria-label

 

UA-OS Combination Result
OSX, Voiceover “link image Karl Groves”
win7, FF, NVDA “link graphic Karl Groves”
win7, FF, JAWS “Karl Groves link graphic”
win7, IE, NVDA “link graphic w w w dot karlgroves dot com”
win7, IE, JAWS “Karl Groves link graphic”

Empty Alt. Aria-label

 

UA-OS Combination Result
OSX, Voiceover “link slash” (VO caption shows ‘link /’)
win7, FF, NVDA “link graphic Karl Groves”
win7, FF, JAWS “w w w dot karl groves link”
win7, IE, NVDA “link graphic w w w dot karlgroves dot com”
win7, IE, JAWS “Karl Groves link graphic”

Alt & Aria-label

 

UA-OS Combination Result
OSX, Voiceover “Karl Groves”
win7, FF, NVDA “link graphic Karl Groves”
win7, FF, JAWS “Karl Groves link graphic”
win7, IE, NVDA “link graphic Karl Groves”
win7, IE, JAWS “Karl Groves link graphic”

Alt & Aria-label different

 

UA-OS Combination Result
OSX, Voiceover “link image Karl Groves”
win7, FF, NVDA “link graphic Karl Groves”
win7, FF, JAWS “Karl Groves link graphic”
win7, IE, NVDA “link graphic headshot”
win7, IE, JAWS “Karl Groves link graphic”