Child pages
  • title Attribute in ARIA and non-ARIA Environments, with Screen Readers

Versions Compared

Key

  • This line was added.
  • This line was removed.
  • Formatting was changed.
Comment: Migrated to Confluence 5.3

...

Context

  • tested the "standalone lightbox",

...

  • that

...

  • is:

...

  •  ".../src/webapp/fluid-components/html/Lightbox.html"

...

  • (revision

...

  • 4739).

...

  • tested

...

  • two

...

  • title

...

  • based

...

  • configurations:

...

    • Lightbox.html

...

    • as

...

    • is,

...

    • i.e.

...

    • no

...

    • title

...

    • attributes.
    • Changed the alt text for each <img> within a thumbnail to "Fruit alt text".
    • For the image caption text, changed the text between the <a> tags to "Fruit link text".
    • Added "title" attribute to:
      • the lightbox container <div> (id="gallery:::gallery-thumbs:::")

...

      • -

...

      • -

...

      • value

...

      • =

...

      • "Lightbox",

...

      • each

...

      • thumbnail

...

      • <div>

...

      • (id="gallery:::gallery-thumbs:::lightbox-cell:

...

      • n

...

      • :")

...

      • -

...

      • -

...

      • value

...

      • =

...

      • "Thumbnail

...

      • of

...

      • Fruit

...

      • "

...

  • tested

...

  • three

...

  • browsers:

...

    • FF3

...

    • (Minefield

...

    • 3.0b5pre

...

    • 2008031405)

...

    • FF2
    • IE7
  • tested two screen readers (in non-browse

...

  • mode/virtual

...

  • pc

...

  • cursor

...

  • off

...

  • mode):

...

    • WindowEyes
    • JAWS
  • tested four actions:
    • tab to the lightbox.
    • move from thumbnail to thumbnail using arrow keys (keyboard navigation)
    • keyboard based "drag-and-drop"

...

    • mouse

...

    • hover

...

    • over:

...

      • thumbnail

...

      • image

...

      • thumbnail

...

      • whitespace

...

      • thumbnail

...

      • link

...

  • Temporarily

...

  • serving

...

  • from:

...

    • No

...

    • title

...

    • attributes:

...

...

    • title

...

    • attributes:

...

...

One

...

variable

...

that

...

was

...

not

...

tested was running Windows accessible Inspector application in parallel with the browsers.  When that is done, IE7 and/or the screen reader acquires more information about what has focus, etc., and tends to give a better experience. It is unlikely that the average screen reader user will run Inspector in tandem with their screen reader; however, our doing so may provide clues as to how to render thumbnails in the lightbox for these types of users.

WindowEyes

Note: when the mouse cursor changes, WindowEyes speaks to indicate the new cursor. For example, when it changes to an I-beam, WindowEyes says, "I-beam".

...

The

...

mouse

...

cursor

...

changes

...

to

...

a

...

pointing

...

hand

...

when

...

over

...

a

...

link;

...

in

...

this

...

case

...

WindowEyes

...

says,

...

"Pointer

...

32649,

...

undefined".

...

This

...

speech

...

is

...

repeated

...

a

...

lot

...

in

...

the

...

following

...

table.

...

| border=1| align=center} {tbody} {tr} {th}Browser{th}{th}Action{th}{th}No Title Attribute{th}{th}Title Attribute{th} {tr} {tr} {td:rowspan=6}*FF3 (Minefield)*{td} {td}tab to lightbox{td} {td}"_Fruit_, cell"{td} {td}"Lightbox, _Fruit_, cell, Thumbnail of _Fruit_"{td} {tr} {tr} {td}keyboard navigation{td} {td}"_Fruit_, cell"{td} {td}"Lightbox, _Fruit_, cell, Thumbnail of _Fruit_"{td} {tr} {tr} {td}keyboard DnD{td} {td}Silence{td} {td}Silence{td} {tr} {tr} {td}hover over image{td} {td}"Pointer 32649, undefined"{td} {td}"Pointer 32649, undefined"; Visually, "Thumbnail of _Fruit_" shows as a tool tip.{td} {tr} {tr} {td}hover over whitespace{td} {td}"Arrow", if mouse cursor changes to arrow; silence otherwise.{td} {td}"Arrow", if mouse cursor changes to arrow; silence otherwise; Visually,&nbsp;"Thumbnail of _Fruit_" shows as a tool tip.{td} {tr} {tr} {td}hover over&nbsp;link{td} {td}"_Fruit_, Pointer 32649, undefined"{td} {td}"_Fruit_, Pointer 32649, undefined"; Visually, "Thumbnail of _Fruit_" shows as a tool tip.{td} {tr} {tr} {td}&nbsp;{td} {td}&nbsp;{td} {td}&nbsp;{td} {td}&nbsp;{td} {tr} {tr} {td:rowspan=6}*FF2*{td} {td}tab to lightbox{td} {td}"_Fruit_, cell"{td} {td}"Lightbox, _Fruit_, cell, Thumbnail of _Fruit_"{td} {tr} {tr} {td}keyboard navigation{td} {td}"_Fruit_, cell"{td} {td}"Lightbox, _Fruit_, cell, Thumbnail of _Fruit_"{td} {tr} {tr} {td}keyboard DnD{td} {td}Silence{td} {td}Silence{td} {tr} {tr} {td}hover over image{td} {td}"Pointer 32649, undefined"{td} {td}"Context menu, Pointer 32649, undefined...menu closed"; Visually, "Thumbnail of _Fruit_ shows as a tool tip. Note that WindowEyes interprets a tooltip popup as a menu.{td} {tr} {tr} {td}hover over whitespace{td} {td}"Arrow", if mouse cursor changes to arrow; silence otherwise.{td} {td}"Context menu, Arrow, ...menu closed", if mouse cursor changes to arrow; "Context menu, ...menu closed" otherwise; Visually,&nbsp;"Thumbnail of _Fruit" shows as a tool tip. Note that WindowEyes&nbsp;interprets a tooltip popup as a menu.{td} {tr} {tr} {td}hover over&nbsp;link{td} {td}"_Fruit_, Pointer 32649, undefined"{td} {td}"_Fruit_, context menu, Pointer 32649, undefined, ...menu closed"; Visually, "Thumbnail of _Fruit_ shows as a tool tip. Note that WindowEyes&nbsp;interprets a tooltip popup as a menu.{td} {tr} {tr} {td}&nbsp;{td} {td}&nbsp;{td} {td}&nbsp;{td} {td}&nbsp;{td} {tr} {tr} {td:rowspan=6}*IE7*{td} {td}tab to lightbox{td} {td}"_Fruit_, grouping object"{td} {td}"Thumbnail of&nbsp;_Fruit_, grouping object"{td} {tr} {tr} {td}keyboard navigation{td} {td}"_Fruit_,&nbsp;grouping object"{td} {td}"Thumbnail of _Fruit_, grouping object"{td} {tr} {tr} {td}keyboard DnD{td} {td}"_Fruit_,&nbsp;grouping object", where&nbsp;_Fruit_, is the name of the thumbnail being moved.{td} {td}"Thumbnail of _Fruit_,&nbsp;grouping object", where&nbsp;_Fruit_, is the name of the thumbnail being moved.{td} {tr} {tr} {td}hover over image{td} {td}"_Fruit_, Pointer 32649, undefined" Note: &nbsp;only "_Fruit_" if mouse cursor does not change; Visually, "_Fruit_" shows as a tool tip.{td} {td}"_Fruit_, Pointer 32649, undefined"; Visually, "_Fruit_ shows as a tool tip.{td} {tr} {tr} {td}hover over whitespace{td} {td}"Arrow", if mouse cursor changes to arrow; silence otherwise.{td} {td}"Thumbnail of _Fruit_, Arrow", if mouse cursor changes to arrow; "Thumbnail of _Fruit_", otherwise; Visually,&nbsp;"Thumbnail of _Fruit_ shows as a tool tip.{td} {tr} {tr} {td}hover over&nbsp;link{td} {td}"_Fruit_, Pointer 32649, undefined"{td} {td}"_Fruit_, Thumbnail of _Fruit_, Pointer 32649, undefined"; Visually, "Thumbnail of _Fruit_ shows as a tool tip.{td} {tr} {tbody} {table} h2. JAWS In terms of moving thumbnails using the keyboard, only cntl-left and cntl-right arrows worked reliably. Cntl-up and cntl-down was intercepted by JAWS, and resulted in the opening of the link (inside a thumbnail) in a new tab, in all three browsers. {table:border=1| align=center| title="JAWS Results"} {tbody} {tr} {th}Browser{th} {th}Action{th} {th}No Title Attribute{th} {th}Title Attribute{th} {tr} {tr} {td:rowspan=6}*FF3 (Minefield)*{td} {td}tab to lightbox{td} {td}"Tab, Table, _Fruit_"{td} {td}"Tab, Table, _Fruit_"{td} {tr} {tr} {td}keyboard navigation{td} {td}"_Fruit_"{td} {td}"_Fruit_"{td} {tr} {tr} {td}keyboard DnD{td} {td}"Blank" on the first move, thereafter "_Fruit_, repeatedly", where _Fruit_ is the name of the fruit immediately to the left or right (depending on direction of movement) of the moving item after the first move. &nbsp;Example: &nbsp;"Blank, Kiwi, Kiwi, ..."{td} {td}"Blank" on the first move, thereafter "_Fruit_, repeatedly", where _Fruit_ is the name of the fruit immediately to the left or right (depending on direction of movement) of the moving item after the first move. &nbsp;Example: &nbsp;"Blank, Kiwi, Kiwi, ..."{td} {tr} {tr} {td}hover over image{td} {td}Silence{td} {td}Silence; Visually, "Thumbnail of _Fruit_" shows as tooltip. {td} {tr} {tr} {td}hover over whitespace{td} {td}Silence{td} {td}Silence; Visually, "Thumbnail of _Fruit_" shows as tooltip.{td} {tr} {tr} {td}hover over&nbsp;link{td} {td}Silence {td} {td}Silence; Visually, "Thumbnail of _Fruit_" shows as tooltip.{td} {tr} {tr} {td}&nbsp;{td} {td}&nbsp;{td} {td}&nbsp;{td} {td}&nbsp;{td} {tr} {tr} {td:rowspan=6}*FF2*{td} {td}tab to lightbox{td} {td}"Tab, Table, _Fruit_"{td} {td}"Tab, Table, _Fruit_"{td} {tr} {tr} {td}keyboard navigation{td} {td}"_Fruit_,"{td} {td}_Fruit_, _Fruit_"{td} {tr} {tr} {td}keyboard DnD{td} {td}"Blank" on the first move, thereafter "_Fruit_, repeatedly", where _Fruit_ is the name of the fruit immediately to the left or right (depending on direction of movement) of the moving item after the first move. &nbsp;Example: &nbsp;"Blank, Kiwi, Kiwi, ..."{td} {td}"Blank" on the first move, thereafter "_Fruit_, repeatedly", where _Fruit_ is the name of the fruit immediately to the left or right (depending on direction of movement) of the moving item after the first move. &nbsp;Example: &nbsp;"Blank, Kiwi, Kiwi, ..."{td} {tr} {tr} {td}hover over image{td} {td}Silence {td} {td}"Menu, ...leaving menus"; Visually, "Thumbnail of _Fruit_" shows as tooltip. Note: JAWS interprets the tooltip popup as a menu. {td} {tr} {tr} {td}hover over whitespace{td} {td}Silence{td} {td}"Menu, ...leaving menus"; Visually, "Thumbnail of _Fruit_" shows as tooltip. Note: JAWS&nbsp;interprets the tooltip popup as a menu.{td} {tr} {tr} {td}hover over&nbsp;link{td} {td}Silence{td} {td}"Menu, ...leaving menus"; Visually, "Thumbnail of _Fruit_" shows as tooltip. Note: JAWS&nbsp;interprets the tooltip popup as a menu.{td} {tr} {tr} {td}&nbsp;{td} {td}&nbsp;{td} {td}&nbsp;{td} {td}&nbsp;{td} {tr} {tr} {td:rowspan=6}*IE7*{td} {td}tab to lightbox{td} {td}"Tab, _Fruit_," Note: once, it reads the entire list of thumbnails.{td} {td}"Tab, Thumbnail of&nbsp;_Fruit_"{td} {tr} {tr} {td}keyboard navigation{td} {td}"_Fruit_"{td} {td}"Thumbnail of _Fruit_"{td} {tr} {tr} {td}keyboard DnD{td} {td}"View, _Fruit_&nbsp;that is moving, _Fruit_ just moved past" Note: &nbsp;upon releasing the cntl key, "_Fruit_" that was moved. {td} {td}"View, _Fruit_&nbsp;that is moving, _Fruit_ just moved past" Note: &nbsp;upon releasing the cntl key, "_Fruit_" that was moved.{td} {tr} {tr} {td}hover over image{td} {td}Silence; Visually, "_Fruit_" is shown as a toolitp. {td} {td}Silence; Visually, "_Fruit_" shows as a tool tip.{td} {tr} {tr} {td}hover over whitespace{td} {td}Silence. {td} {td}Silence; Visually,&nbsp;"Thumbnail of _Fruit_" shows as a tool tip.{td} {tr} {tr} {td}hover over&nbsp;link{td} {td}Silence. {td} {td}Silence; Visually, "Thumbnail of _Fruit_" shows as a tool tip.{td} {tr} {tbody} {table} h2. What should a screen reader say? It's not clear what the advantage of having a title attribute is. But, more importantly, it's not clear what the user experience _should be_ for the lightbox. A lightbox is a device for displaying and reorganizing thumbnail images. Screen reader users should be able to navigate among the thumbnails and move them about. The keyboard support in the lightbox/reorderer already allows for this, but what should be the audio feedback? Here are some brain storming ideas: * As the user navigates about the thumbnails, announce the name of the thumbnail they are currently on (i.e., the one that has focus). * Inform users of the existence of the hyperlink in the thumbnails. * Given the reordering functionality of the lightbox, allow querying of the thumbnails immediately surrounding the currently foucused one: What is immediately to the left, right, above, below, and at the four corners? * Users should be allowed to ask for the current order of the images. If the list is long, they should be allowed to interrupt the speech once they have heard enough to know what they were seeking. ** it might be useful to allow for a list of what follows from the currently focussed thumbnail -- immediately to the right, going forward. ** in a similar vein, allow for a listing of what precedes the currently foucssed thumbnail -- immediately to the left, proceeding backwards. * as users move an image, some verbal feedback of the new ordering; for example: ** if moving left, "Kiwi moved left, now left of Mangosteen". ** if moving right, "Lemon moved right, now right of Banana". ** if at beginning, "Kiwano moved left, now at beginning, left of Kumquat". ** if at end, "Dragonfruit moved left, now at end, right of Strawberry".
HTML Table
border1
title"WindowEyes
Result"
aligncenter
Table Body (tbody)
Table Row (tr)
Table Head (th)
Browser
Table Head (th)
Action
Table Head (th)
No Title Attribute
Table Head (th)
Title Attribute
Table Row (tr)
Table Cell (td)
rowspan6
FF3 (Minefield)
Table Cell (td)
tab to lightbox
Table Cell (td)
"Fruit link text, cell"
Table Cell (td)
"Lightbox, Fruit link text, cell, Thumbnail of Fruit"
Table Row (tr)
Table Cell (td)
keyboard navigation
Table Cell (td)
"Fruit link text, cell"
Table Cell (td)
"Lightbox, Fruit link text, cell, Thumbnail of Fruit"
Table Row (tr)
Table Cell (td)
keyboard DnD
Table Cell (td)
Silence
Table Cell (td)
Silence
Table Row (tr)
Table Cell (td)
hover over image
Table Cell (td)
"Pointer 32649, undefined"
Table Cell (td)
"Pointer 32649, undefined";
Visually, "Thumbnail of Fruit" shows as a tool tip.
Table Row (tr)
Table Cell (td)
hover over whitespace
Table Cell (td)
"Arrow", if mouse cursor changes to arrow; silence otherwise.
Table Cell (td)
"Arrow", if mouse cursor changes to arrow; silence otherwise;
Visually, "Thumbnail of Fruit" shows as a tool tip.
Table Row (tr)
Table Cell (td)
hover over link
Table Cell (td)
"Fruit link text, Pointer 32649, undefined"
Table Cell (td)
"Fruit link text, Pointer 32649, undefined";
Visually, "Thumbnail of Fruit" shows as a tool tip.
Table Row (tr)
Table Cell (td)
 
Table Cell (td)
 
Table Cell (td)
 
Table Cell (td)
 
Table Row (tr)
Table Cell (td)
rowspan6
FF2
Table Cell (td)
tab to lightbox
Table Cell (td)
"Fruit link text, cell"
Table Cell (td)
"Lightbox, Fruit link text, cell, Thumbnail of Fruit"
Table Row (tr)
Table Cell (td)
keyboard navigation
Table Cell (td)
"Fruit link text, cell"
Table Cell (td)
"Lightbox, Fruit link text, cell, Thumbnail of Fruit"
Table Row (tr)
Table Cell (td)
keyboard DnD
Table Cell (td)
Silence
Table Cell (td)
Silence
Table Row (tr)
Table Cell (td)
hover over image
Table Cell (td)
"Pointer 32649, undefined"
Table Cell (td)
"Context menu, Pointer 32649, undefined...menu closed";
Visually, "Thumbnail of Fruit shows as a tool tip.
Note that WindowEyes interprets a tooltip popup as a menu.
Table Row (tr)
Table Cell (td)
hover over whitespace
Table Cell (td)
"Arrow", if mouse cursor changes to arrow; silence otherwise.
Table Cell (td)
"Context menu, Arrow, ...menu closed", if mouse cursor changes to arrow; "Context menu, ...menu closed" otherwise;
Visually, "Thumbnail of _Fruit" shows as a tool tip.
Note that WindowEyes interprets a tooltip popup as a menu.
Table Row (tr)
Table Cell (td)
hover over link
Table Cell (td)
"Fruit link text, Pointer 32649, undefined"
Table Cell (td)
"Fruit link text, context menu, Pointer 32649, undefined, ...menu closed";
Visually, "Thumbnail of Fruit shows as a tool tip.
Note that WindowEyes interprets a tooltip popup as a menu.
Table Row (tr)
Table Cell (td)
 
Table Cell (td)
 
Table Cell (td)
 
Table Cell (td)
 
Table Row (tr)
Table Cell (td)
rowspan6
IE7
Table Cell (td)
tab to lightbox
Table Cell (td)
"Fruit link text, grouping object"
Table Cell (td)
"Thumbnail of Fruit, grouping object"
Table Row (tr)
Table Cell (td)
keyboard navigation
Table Cell (td)
"Fruit link text, grouping object"
Table Cell (td)
"Thumbnail of Fruit, grouping object"
Table Row (tr)
Table Cell (td)
keyboard DnD
Table Cell (td)
"Fruit link text, grouping object", where Fruit, is the name of the thumbnail being moved.
Table Cell (td)
"Thumbnail of Fruit, grouping object", where Fruit, is the name of the thumbnail being moved.
Table Row (tr)
Table Cell (td)
hover over image
Table Cell (td)
"Fruit alt text, Pointer 32649, undefined"
Note: only "Fruit alt text" if mouse cursor does not change;
Visually, "Fruit alt text" shows as a tool tip.
Table Cell (td)
"Fruit alt text, Pointer 32649, undefined";
Visually, "Fruit alt text" shows as a tool tip.
Table Row (tr)
Table Cell (td)
hover over whitespace
Table Cell (td)
"Arrow", if mouse cursor changes to arrow; silence otherwise.
Table Cell (td)
"Thumbnail of Fruit, Arrow", if mouse cursor changes to arrow; "Thumbnail of Fruit", otherwise;
Visually, "Thumbnail of Fruit shows as a tool tip.
Table Row (tr)
Table Cell (td)
hover over link
Table Cell (td)
"Fruit link text, Pointer 32649, undefined"
Table Cell (td)
"Fruit link text, Thumbnail of Fruit, Pointer 32649, undefined";
Visually, "Thumbnail of Fruit" shows as a tool tip.

JAWS

In terms of moving thumbnails using the keyboard, only cntl-left and cntl-right arrows worked reliably. Cntl-up and cntl-down was intercepted by JAWS, and resulted in the opening of the link (inside a thumbnail) in a new tab, in all three browsers.

HTML Table
border1
title"JAWS Results"
aligncenter
Table Body (tbody)
Table Row (tr)
Table Head (th)
Browser
Table Head (th)
Action
Table Head (th)
No Title Attribute
Table Head (th)
Title Attribute
Table Row (tr)
Table Cell (td)
rowspan6
FF3 (Minefield)
Table Cell (td)
tab to lightbox
Table Cell (td)
"Tab, Table, Fruit alt text, Fruit link text"
Table Cell (td)
"Tab, Table, Fruit alt text, Fruit link text"
Table Row (tr)
Table Cell (td)
keyboard navigation
Table Cell (td)
"Fruit alt text, Fruit link text"
Table Cell (td)
"Fruit alt text, Fruit link text"
Table Row (tr)
Table Cell (td)
keyboard DnD
Table Cell (td)
"Blank" on the first move, thereafter "Fruit, repeatedly", where Fruit is the name of the fruit immediately to the left or right (depending on direction of movement) of the moving item after the first move. Example: "Blank, Kiwi, Kiwi, ..."
Table Cell (td)
"Blank" on the first move, thereafter "Fruit, repeatedly", where Fruit is the name of the fruit immediately to the left or right (depending on direction of movement) of the moving item after the first move. Example: "Blank, Kiwi, Kiwi, ..."
Table Row (tr)
Table Cell (td)
hover over image
Table Cell (td)
Silence
Table Cell (td)
Silence;
Visually, "Thumbnail of Fruit" shows as tooltip.
Table Row (tr)
Table Cell (td)
hover over whitespace
Table Cell (td)
Silence
Table Cell (td)
Silence;
Visually, "Thumbnail of Fruit" shows as tooltip.
Table Row (tr)
Table Cell (td)
hover over link
Table Cell (td)
Silence
Table Cell (td)
Silence;
Visually, "Thumbnail of Fruit" shows as tooltip.
Table Row (tr)
Table Cell (td)
 
Table Cell (td)
 
Table Cell (td)
 
Table Cell (td)
 
Table Row (tr)
Table Cell (td)
rowspan6
FF2
Table Cell (td)
tab to lightbox
Table Cell (td)
"Tab, Table, Fruit alt text, Fruit link text"
Table Cell (td)
"Tab, Table, Fruit alt text, Fruit link text"
Table Row (tr)
Table Cell (td)
keyboard navigation
Table Cell (td)
"Fruit alt text, Fruit link text"
Table Cell (td)
"Fruit alt text, Fruit link text"
Table Row (tr)
Table Cell (td)
keyboard DnD
Table Cell (td)
"Blank" on the first move, thereafter "Fruit" repeatedly, where Fruit is the name of the fruit immediately to the left or right (depending on direction of movement) of the moving item after the first move. Example: "Blank, Kiwi, Kiwi, ..."
Table Cell (td)
"Blank" on the first move, thereafter "Fruit" repeatedly, where Fruit is the name of the fruit immediately to the left or right (depending on direction of movement) of the moving item after the first move. Example: "Blank, Kiwi, Kiwi, ..."
Table Row (tr)
Table Cell (td)
hover over image
Table Cell (td)
Silence
Table Cell (td)
"Menu, ...leaving menus";
Visually, "Thumbnail of Fruit" shows as tooltip.
Note: JAWS interprets the tooltip popup as a menu.
Table Row (tr)
Table Cell (td)
hover over whitespace
Table Cell (td)
Silence
Table Cell (td)
"Menu, ...leaving menus";
Visually, "Thumbnail of Fruit" shows as tooltip.
Note: JAWS interprets the tooltip popup as a menu.
Table Row (tr)
Table Cell (td)
hover over link
Table Cell (td)
Silence
Table Cell (td)
"Menu, ...leaving menus";
Visually, "Thumbnail of Fruit" shows as tooltip.
Note: JAWS interprets the tooltip popup as a menu.
Table Row (tr)
Table Cell (td)
 
Table Cell (td)
 
Table Cell (td)
 
Table Cell (td)
 
Table Row (tr)
Table Cell (td)
rowspan6
IE7
Table Cell (td)
tab to lightbox
Table Cell (td)
"Tab, Fruit link text"
Note: once, it read the entire list of thumbnails.
Table Cell (td)
"Tab, Thumbnail of Fruit"
Table Row (tr)
Table Cell (td)
keyboard navigation
Table Cell (td)
"Fruit link text"
Table Cell (td)
"Thumbnail of Fruit"
Table Row (tr)
Table Cell (td)
keyboard DnD
Table Cell (td)
"View, Fruit link text [fluid:of the thumbnail that is moving], Fruit link text [fluid:of  the thumbnail just moved past]"
Note:  upon releasing the cntl key, "Fruit link text [fluid:of the thumbnail that was moved].
Table Cell (td)
"View, Thumbnail of Fruit [fluid:that is moving], Fruit link text [fluid:just moved past]"
Note:  upon releasing the cntl key, "Fruit link text" [fluid:that was moved].
Table Row (tr)
Table Cell (td)
hover over image
Table Cell (td)
Silence;
Visually, "Fruit alt text" is shown as a toolitp.
Table Cell (td)
Silence;
Visually, "Fruit alt text" shows as a tool tip.
Table Row (tr)
Table Cell (td)
hover over whitespace
Table Cell (td)
Silence.
Table Cell (td)
Silence;
Visually, "Thumbnail of Fruit" shows as a tool tip.
Table Row (tr)
Table Cell (td)
hover over link
Table Cell (td)
Silence.
Table Cell (td)
Silence;
Visually, "Thumbnail of Fruit" shows as a tool tip.

Summary

The addition of a title attribute had an effect mostly with respect to WindowEyes. Furthermore, it had an effect for all three browsers when using this particular screen reader. The presentation of the title, in the case of JAWS, was only effective in IE7.

It may be that where the title attribute was added defines whether it is appears in a screen reader context. It was added the the thumbnail <div> element. It could also be added to the <a> element for the image and/or the <a> element for the link text, or both.

What should a screen reader say?

It's not yet clear what the advantage of having a title attribute is. But, more importantly, it's not clear what the screen reader user experience should be for the lightbox.

A lightbox is a device for displaying and reorganizing thumbnail images. Screen reader users should be able to navigate among the thumbnails and move them about. The keyboard support in the lightbox/reorderer already allows for this, but what should be the audio feedback? Here are some brain storming ideas:

Behaviour

Comment

As the user navigates about the thumbnails, announce the name of the thumbnail they are currently on (i.e., the one that has focus).

This is currently happening

Inform users of the existence of the hyperlink in the thumbnails.

The title text could be changed to include the phrase "contains link" or some such thing?

Given the reordering functionality of the lightbox, allow querying of the thumbnails immediately surrounding the currently foucused one: What is immediately to the left, right, above, below, and at the four corners?

Not available, but the user can navigate up, down, etc. to discover neighbors

Users should be allowed to ask for the current order of the images. If the list is long, they should be allowed to interrupt the speech once they have heard enough to know what they were seeking.

  • it might be useful to allow for a list of what follows from the currently focussed thumbnail - immediately to the right, going forward.
  • in a similar vein, allow for a listing of what precedes the currently focussed thumbnail - immediately to the left, proceeding backwards.

 

as users move an image, some verbal feedback of the new ordering; for example:

  • if moving left, "Kiwi moved left, now left of Mangosteen".
  • if moving right, "Lemon moved right, now right of Banana".
  • if at beginning, "Kiwano moved left, now at beginning, left of Kumquat".
  • if at end, "Dragonfruit moved left, now at end, right of Strawberry".

This does sound like a definite necessity, but not sure how to implement

A comment on the proposed text of the title:

Once the user is familiar with the Lightbox, they will know that they are navigating amongst thumbnails, and the main thing they're going to want to know is which thumbnail. I would suggest putting the actual name of the image first in the title string (i.e. "Kiwano thumbnail") so that users can cut the screen reader off sooner.