Markup for Optimal Screen Reader Experience
Markup
- Add
title
attribute to Ligtbox itself:title="Lightbox"
- Add
title
attribute to each thumbdiv
:title="<fruit> thumbnail"
- Modify image alt text to say "<fruit> thumbnail"
- To make the instructions useful:
- Place instruction
div
in the tab order, ahead of the Lightbox itself so the user will hear the instructions before they need to know them - Modify instruction text to describe how to navigate, how to view, and how to move
- "Image Lightbox: Select an image using i, k, m or j. View an image by pressing Enter. Move an image using CTRL + i, k, m or j."
- Duplicate instruction text in the
div
title
attribute- if the instructions are not present in the title, IE7 will read the contents of the
div
, but Firefox will not
- if the instructions are not present in the title, IE7 will read the contents of the
- Place instruction
JAWS
Action |
Firefox 3 (Minefield) |
Firefox 2 |
IE 7 |
---|---|---|---|
tab to Instructions |
(reads instructions from title) |
(reads instructions from title) |
(reads instructions from title) |
tab to Lightbox |
"<fruit> thumbnail, <fruit>, cell" |
"<fruit> thumbnail, <fruit>, cell" |
"<fruit> thumbnail" |
keyboard navigation |
"<key>, <fruit> thumbnail, <fruit>, cell" |
"<key>, <fruit> thumbnail, <fruit>, cell" |
"<key>", "<fruit> thumbnail" |
keyboard DnD |
"control <key>" |
"control <key>" |
"control <key> <fruit>" |
hover over image |
silence |
"menu" as tooltip appears, "leaving menu" as tooltip disappears |
silence |
hover over link |
silence |
"menu" as tooltip appears, "leaving menu" as tooltip disappears |
silence |
hover over whitespace |
silence |
"menu" as tooltip appears, "leaving menu" as tooltip disappears |
silence |
Notes:
- the tooltip text is taken from the
title
on the thumbnaildiv
- the spoken text "<fruit> thumbnail" is taken from the image alt text in Firefox and from the title in IE
Window-Eyes
Action |
Firefox 2 |
IE 7 |
---|---|---|
tab to Instructions |
(reads instructions from title) |
(reads instructions from title) |
tab to Lightbox |
"Lightbox, <fruit>, cell, <fruit> thumbnail" |
"<fruit> thumbnail, grouping object" |
keyboard navigation |
"<key>, Lightbox, <fruit>, cell, <fruit> thumbnail" |
"<key>, <fruit> thumbnail, grouping object" |
keyboard DnD |
silence |
"<fruit> thumbnail, grouping object" |
hover over image |
"context menu, pointer XXX" as tooltip appears, "menu closed" as tooltip disappears |
"<fruit> thumbnail, pointer XXXX" |
hover over link |
"<fruit>, context menu, pointer XXX" as tooltip appears, "menu closed" as tooltip disappears |
"<fruit> thumbnail, pointer XXXX" |
hover over whitespace |
"context menu" as tooltip appears, "menu closed" as tooltip disappears |
"<fruit> thumbnail" |
Notes:
- Firefox 3 (Minefield) cannot be used with Window-Eyes
- the tooltip text is taken from the
title
on the thumbnaildiv
for the link text, and from the alt text for the image - the "<fruit> thumbnail" is taken from the title attribute, not the alt text