Page Operations
Browse SpaceMarkup
- Add title attribute to Ligtbox itself: title="Lightbox"
- Add title attribute to each thumb div: 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
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>" (where <fruit> is the one moved) |
| hover over image | silence tooltip: "<fruit> thumbnail" |
"menu" as tooltip appears, "leaving menu" as tooltip disappears tooltip: "<fruit> thumbnail" |
silence tooltip: "<fruit> thumbnail" |
| hover over link | silence tooltip: "<fruit> thumbnail" |
"menu" as tooltip appears, "leaving menu" as tooltip disappears tooltip: "<fruit> thumbnail" |
silence tooltip: "<fruit> thumbnail" |
| hover over whitespace | silence tooltip: "<fruit> thumbnail" |
"menu" as tooltip appears, "leaving menu" as tooltip disappears tooltip: "<fruit> thumbnail" |
silence tooltip: "<fruit> thumbnail" |
Notes:
- the tooltip text is taken from the title on the thumbnail div
- 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" (where <fruit> is the one moved) |
| hover over image | "context menu, pointer XXX" as tooltip appears, "menu closed" as tooltip disappears tooltip: "<fruit> thumbnail" |
"<fruit> thumbnail, pointer XXXX" tooltip: "<fruit> thumbnail" |
| hover over link | "<fruit>, context menu, pointer XXX" as tooltip appears, "menu closed" as tooltip disappears tooltip: "<fruit> thumbnail" |
"<fruit> thumbnail, pointer XXXX" tooltip: "<fruit> thumbnail" |
| hover over whitespace | "context menu" as tooltip appears, "menu closed" as tooltip disappears tooltip: "<fruit> thumbnail" |
"<fruit> thumbnail" tooltip: "<fruit> thumbnail" |
Notes:
- Firefox 3 (Minefield) cannot be used with Window-Eyes
- the tooltip text is taken from the title on the thumbnail div 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