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

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.

Skip to end of metadata
Go to start of metadata

You are viewing an old version of this page. View the current version.

Compare with Current View Page History

« Previous Version 8 Next »

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:

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.

Unknown macro: {table}
Unknown macro: {tbody}
Unknown macro: {tr}
Unknown macro: {th}

Browser

Unknown macro: {th}

Action

Unknown macro: {th}

No Title Attribute

Unknown macro: {th}

Title Attribute

Unknown macro: {tr}
Unknown macro: {td}

FF3 (Minefield)

Unknown macro: {td}

tab to lightbox

Unknown macro: {td}

"Fruit, cell"

Unknown macro: {td}

"Lightbox, Fruit, cell, Thumbnail of Fruit"

Unknown macro: {tr}
Unknown macro: {td}

keyboard navigation

Unknown macro: {td}

"Fruit, cell"

Unknown macro: {td}

"Lightbox, Fruit, cell, Thumbnail of Fruit"

Unknown macro: {tr}
Unknown macro: {td}

keyboard DnD

Unknown macro: {td}

Silence

Unknown macro: {td}

Silence

Unknown macro: {tr}
Unknown macro: {td}

hover over image

Unknown macro: {td}

"Pointer 32649, undefined"

Unknown macro: {td}

"Pointer 32649, undefined";
Visually, "Thumbnail of Fruit" shows as a tool tip.

Unknown macro: {tr}
Unknown macro: {td}

hover over whitespace

Unknown macro: {td}

"Arrow", if mouse cursor changes to arrow; silence otherwise.

Unknown macro: {td}

"Arrow", if mouse cursor changes to arrow; silence otherwise;
Visually, "Thumbnail of Fruit" shows as a tool tip.

Unknown macro: {tr}
Unknown macro: {td}

hover over link

Unknown macro: {td}

"Fruit, Pointer 32649, undefined"

Unknown macro: {td}

"Fruit, Pointer 32649, undefined";
Visually, "Thumbnail of Fruit" shows as a tool tip.

Unknown macro: {tr}
Unknown macro: {td}

 

Unknown macro: {td}

 

Unknown macro: {td}

 

Unknown macro: {td}

 

Unknown macro: {tr}
Unknown macro: {td}

FF2

Unknown macro: {td}

tab to lightbox

Unknown macro: {td}

"Fruit, cell"

Unknown macro: {td}

"Lightbox, Fruit, cell, Thumbnail of Fruit"

Unknown macro: {tr}
Unknown macro: {td}

keyboard navigation

Unknown macro: {td}

"Fruit, cell"

Unknown macro: {td}

"Lightbox, Fruit, cell, Thumbnail of Fruit"

Unknown macro: {tr}
Unknown macro: {td}

keyboard DnD

Unknown macro: {td}

Silence

Unknown macro: {td}

Silence

Unknown macro: {tr}
Unknown macro: {td}

hover over image

Unknown macro: {td}

"Pointer 32649, undefined"

Unknown macro: {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.

Unknown macro: {tr}
Unknown macro: {td}

hover over whitespace

Unknown macro: {td}

"Arrow", if mouse cursor changes to arrow; silence otherwise.

Unknown macro: {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.

Unknown macro: {tr}
Unknown macro: {td}

hover over link

Unknown macro: {td}

"Fruit, Pointer 32649, undefined"

Unknown macro: {td}

"Fruit, 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.

Unknown macro: {tr}
Unknown macro: {td}

 

Unknown macro: {td}

 

Unknown macro: {td}

 

Unknown macro: {td}

 

Unknown macro: {tr}
Unknown macro: {td}

IE7

Unknown macro: {td}

tab to lightbox

Unknown macro: {td}

"Fruit, grouping object"

Unknown macro: {td}

"Thumbnail of Fruit, grouping object"

Unknown macro: {tr}
Unknown macro: {td}

keyboard navigation

Unknown macro: {td}

"Fruit, grouping object"

Unknown macro: {td}

"Thumbnail of Fruit, grouping object"

Unknown macro: {tr}
Unknown macro: {td}

keyboard DnD

Unknown macro: {td}

"Fruit, grouping object", where Fruit, is the name of the thumbnail being moved.

Unknown macro: {td}

"Thumbnail of Fruit, grouping object", where Fruit, is the name of the thumbnail being moved.

Unknown macro: {tr}
Unknown macro: {td}

hover over image

Unknown macro: {td}

"Fruit, Pointer 32649, undefined"
Note:  only "Fruit" if mouse cursor does not change;
Visually, "Fruit" shows as a tool tip.

Unknown macro: {td}

"Fruit, Pointer 32649, undefined";
Visually, "Fruit shows as a tool tip.

Unknown macro: {tr}
Unknown macro: {td}

hover over whitespace

Unknown macro: {td}

"Arrow", if mouse cursor changes to arrow; silence otherwise.

Unknown macro: {td}

"Thumbnail of Fruit, Arrow", if mouse cursor changes to arrow; "Thumbnail of Fruit", otherwise;
Visually, "Thumbnail of Fruit shows as a tool tip.

Unknown macro: {tr}
Unknown macro: {td}

hover over link

Unknown macro: {td}

"Fruit, Pointer 32649, undefined"

Unknown macro: {td}

"Fruit, 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.

Unknown macro: {table}
Unknown macro: {tbody}
Unknown macro: {tr}
Unknown macro: {th}

Browser

Unknown macro: {th}

Action

Unknown macro: {th}

No Title Attribute

Unknown macro: {th}

Title Attribute

Unknown macro: {tr}
Unknown macro: {td}

FF3 (Minefield)

Unknown macro: {td}

tab to lightbox

Unknown macro: {td}

"Tab, Table, Fruit alt text, Fruit link text"

Unknown macro: {td}

"Tab, Table, Fruit alt text, Fruit link text"

Unknown macro: {tr}
Unknown macro: {td}

keyboard navigation

Unknown macro: {td}

"Fruit alt text, Fruit link text"

Unknown macro: {td}

"Fruit alt text, Fruit link text"

Unknown macro: {tr}
Unknown macro: {td}

keyboard DnD

Unknown macro: {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, ..."

Unknown macro: {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, ..."

Unknown macro: {tr}
Unknown macro: {td}

hover over image

Unknown macro: {td}

Silence

Unknown macro: {td}

Silence;
Visually, "Thumbnail of Fruit" shows as tooltip.

Unknown macro: {tr}
Unknown macro: {td}

hover over whitespace

Unknown macro: {td}

Silence

Unknown macro: {td}

Silence;
Visually, "Thumbnail of Fruit" shows as tooltip.

Unknown macro: {tr}
Unknown macro: {td}

hover over link

Unknown macro: {td}

Silence

Unknown macro: {td}

Silence;
Visually, "Thumbnail of Fruit" shows as tooltip.

Unknown macro: {tr}
Unknown macro: {td}

 

Unknown macro: {td}

 

Unknown macro: {td}

 

Unknown macro: {td}

 

Unknown macro: {tr}
Unknown macro: {td}

FF2

Unknown macro: {td}

tab to lightbox

Unknown macro: {td}

"Tab, Table, Fruit alt text, Fruit link text"

Unknown macro: {td}

"Tab, Table, Fruit alt text, Fruit link text"

Unknown macro: {tr}
Unknown macro: {td}

keyboard navigation

Unknown macro: {td}

"Fruit alt text, Fruit link text"

Unknown macro: {td}

"Fruit alt text, Fruit link text"

Unknown macro: {tr}
Unknown macro: {td}

keyboard DnD

Unknown macro: {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, ..."

Unknown macro: {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, ..."

Unknown macro: {tr}
Unknown macro: {td}

hover over image

Unknown macro: {td}

Silence

Unknown macro: {td}

"Menu, ...leaving menus";
Visually, "Thumbnail of Fruit" shows as tooltip.
Note: JAWS interprets the tooltip popup as a menu.

Unknown macro: {tr}
Unknown macro: {td}

hover over whitespace

Unknown macro: {td}

Silence

Unknown macro: {td}

"Menu, ...leaving menus";
Visually, "Thumbnail of Fruit" shows as tooltip.
Note: JAWS interprets the tooltip popup as a menu.

Unknown macro: {tr}
Unknown macro: {td}

hover over link

Unknown macro: {td}

Silence

Unknown macro: {td}

"Menu, ...leaving menus";
Visually, "Thumbnail of Fruit" shows as tooltip.
Note: JAWS interprets the tooltip popup as a menu.

Unknown macro: {tr}
Unknown macro: {td}

 

Unknown macro: {td}

 

Unknown macro: {td}

 

Unknown macro: {td}

 

Unknown macro: {tr}
Unknown macro: {td}

IE7

Unknown macro: {td}

tab to lightbox

Unknown macro: {td}

"Tab, Fruit,"
Note: once, it reads the entire list of thumbnails.

Unknown macro: {td}

"Tab, Thumbnail of Fruit"

Unknown macro: {tr}
Unknown macro: {td}

keyboard navigation

Unknown macro: {td}

"Fruit"
Note: this is the link text, not the image alt text

Unknown macro: {td}

"Thumbnail of Fruit"

Unknown macro: {tr}
Unknown macro: {td}

keyboard DnD

Unknown macro: {td}

"View, Fruit that is moving, Fruit just moved past"
Note:  upon releasing the cntl key, "Fruit" that was moved.

Unknown macro: {td}

"View, Fruit that is moving, Fruit just moved past"
Note:  upon releasing the cntl key, "Fruit" that was moved.

Unknown macro: {tr}
Unknown macro: {td}

hover over image

Unknown macro: {td}

Silence;
Visually, "Fruit" is shown as a toolitp.

Unknown macro: {td}

Silence;
Visually, "Fruit" shows as a tool tip.

Unknown macro: {tr}
Unknown macro: {td}

hover over whitespace

Unknown macro: {td}

Silence.

Unknown macro: {td}

Silence;
Visually, "Thumbnail of Fruit" shows as a tool tip.

Unknown macro: {tr}
Unknown macro: {td}

hover over link

Unknown macro: {td}

Silence.

Unknown macro: {td}

Silence;
Visually, "Thumbnail of Fruit" shows as a tool tip.

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

  • No labels