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” |