/
Markup for Optimal Screen Reader Experience

Documentation for a historical release of Infusion: 1.3
Please view the Infusion Documentation site for the latest documentation.
If you're looking for Fluid Project coordination, design, communication, etc, try the Fluid Project Wiki.

Markup for Optimal Screen Reader Experience

Mar 20, 2008

Markup

  • 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