Archive for July, 2011

Accessible Flash Media Player

Tuesday, July 19th, 2011

This is a pretty good media player. It supports both closed captions and audio description, is keyboard accessible, has the Flash buttons labeled with meaningful words for the screen reader user, and provides a JavaScipt API so the web page can control the Flash Player.

It’s free for non-commercial use, but has a fee for commercial use.

Example 1:


Javascript API into the player:

JW Player Embed Method

Loading the player …


Code


<script type="text/javascript" src="http://www.donaldevans.com/jwplayer/jwplayer.js"></script>
<div id="media_container" tabindex="0">Loading the player ...</div>
<script type="text/javascript">
  jwplayer("media_container").setup({
  flashplayer: "http://www.donaldevans.com/jwplayer/player.swf",
    wmode: 'window',
    file: "http://www.donaldevans.com/jwplayer/corrie.flv",
    allowscriptaccess: "always",
    seamlesstabbing: "true",
    image: "http://www.donaldevans.com/jwplayer/corrie.jpg",
    allowscriptaccess: "always",
    plugins: { 
      "audiodescription-2": {file: "http://www.donaldevans.com/jwplayer/corrie.mp3", state: "true"},
      "captions": { file: "http://www.donaldevans.com/jwplayer/corrie.xml", state: "true" }
    },
    height: "270",
    width: "480"
    });
</script>

Works With

Accessible Media Player
Browser Screen Reader Results
IE 9 JAWS 12 Yes
FF 5 JAWS 12 Yes

Standards:

  • 1.2 Time-based Media: The purpose of this guideline is to provide access to time-based and synchronized media. (Level A) This includes media that is:
    • audio-only
    • video-only
    • audio-video
    • audio and/or video combined with interaction
  • 2.1.1 Keyboard: All functionality of the content is operable through a keyboard interface… (Level A)

ARIA Marquee

Friday, July 15th, 2011

ARIA’s role=marquee is a live region that can be used to mark up an area like a stock ticker, or a game score ticker. It has a default aria-live property of “polite”.

At the time of writting, this role is not supported by AT.

Example 1:

Scrolling text

Code


function ARIA_Marquee() {
  var txt = document.createTextNode(" " + Math.random() + 
    " Text has been added to the marquee.");
  document.getElementById('myMarquee').appendChild(txt); 
}
<marquee id="myMarquee" role="marquee">Scrolling text</marquee>
<button onClick="ARIA_Marquee();">Add text to Marquee</button>

Works With

role=marque
Browser Screen Reader Results
IE 9 JAWS 12 No
FF 5 JAWS 12 No

Standards:

  • 1.3.1 Info and Relationships: Information, structure, and relationships conveyed through presentation can be programmatically determined or are available in text. (Level A)

ARIA Log

Tuesday, July 12th, 2011

ARIA’s role=log is a live region that can expect to be updated with new lines of information added to the end of the other content. In addition, the older content may disappear.

Areas with role=log always have the aria-live value of polite.

In Example 1 below, JAWS will read each new text node as it is added, but does not read the entire log file.

In Example 2 below, Jaws reads the new line because it is the only thing in the log. In this case the old log entry is overwritten with the new log line.

Example 1:

Adding a log line to the end of the area.

Code


Adding a log line to the end of the area.
<div id="livelog1" role="log" aria-atomic="false"></div>
<button onClick="ARIA_Append_Log();">Add a log entry</button>
function ARIA_Append_Log() {
  var txt = document.createTextNode(Math.random() + " A line has been appended.");
  document.getElementById('livelog1').appendChild(txt); 
}

Example 2:

Updating a log by deleting the old line and adding one new line.

This is the start of a log

Code


function ARIA_Overwrite_Log() {
  document.getElementById('livelog2').innerHTML = Math.random( ) + 
  ": another new line has been written over writing the current line.";
}
Updating a log by deleting the old line and adding one new line.
<div id="livelog2" role="log">This is the start of a log</div>
<button onClick="ARIA_Overwrite_Log('livelog2','','');">Overwrite a log entry</button>

Works With

role=log
Browser Screen Reader Results
IE 9 JAWS 12 No
FF 5 JAWS 12 Yes.

Standards:

  • 1.3.1 Info and Relationships: Information, structure, and relationships conveyed through presentation can be programmatically determined or are available in text. (Level A)

ARIA Link

Tuesday, July 12th, 2011

ARIA’s role=link can be used to create a link from almost any HTML element.

The developer is responsible to create a keyboard and mouse interface. And also style the element to look like a link. TabIndex=0 will put the new link into the tab order, but a keyboard handler needs to be created that will accomplish the following:

  • Tab moves focus to the Link. A second tab moves focus to the next focusable item.
  • Space or Enter executes the link.
  • Shift+F10 is used to bring up an associated Popup Menu.

JAWS announces this as a link

Example 1:

tabindex="0"
style="text-decoration: underline"
onkeyup = "ARIA_Role_Key(event,'http://www.websiteaccessibility.com');"
onclick="alert('URL = http://www.websiteaccessibility.com');"
>
This is a div using the ARIA role=link attribute.

Code


function ARIA_Role_Key(event,URL) {
  if((event.keyCode == 13) || (event.keyCode == 32)){
    alert("URL = " + URL);
  }
}
<div role="link" 
tabindex="0" 
style="text-decoration: underline" 
onkeyup =  "ARIA_Role_Key(event,'http://www.websiteaccessibility.com');"
onclick="alert('URL = http://www.websiteaccessibility.com');" 
>
This is a div using the ARIA <code>role=link</code> attribute.
</div>

Works With

role=link
Browser Screen Reader Results
IE 9 JAWS 12 Yes, JAWS announces “Link”.
FF 5 JAWS 12 Yes, JAWS announces “Link”.

Standards:

  • WCAG 2.0 SC 4.1.2 Name, Role, Value: For all user interface components (including but not limited to: form elements, links and components generated by scripts), the name and role can be programmatically determined; states, properties, and values that can be set by the user can be programmatically set; and notification of changes to these items is available to user agents, including assistive technologies. (Level A)

ARIA Flowto

Tuesday, July 12th, 2011

ARIA’s aria-flowto=id allows the developer to change the current reading order. The ID identifies the next element or elements to be read by assistive technology.

When aria-flowto has a single IDREF, it allows assistive technologies to, at the user’s request, forego normal document reading order and go to the targeted object. However, when aria-flowto is provided with multiple IDREFS, assistive technologies SHOULD present the referenced elements as path choices.

At the time of this writting, I’m not sure how well aria-flowto is supported. Using FireFox 5 and JAWS 12, the screen reader does announce “Has Flow To” and Has Flow From”. But that seems to be the extent of the implementation.

Example 1:

This is content 1 div. Reading order should jump to content 3.
This is content 2 div.
This is content 3 div.

Code


<div id="content1" aria-flowto="content3">
This is content 1 div.  Reading order should jump to content 3.
</div>
<div id="content2">
This is content 2 div.
</div>
<div id="content3">
This is content 3 div.
</div>

Example 2:

This is content 1 div. Focus should flow to content 3 and then content 5.
This is content 2 div.
This is content 3 div.
This is content 4 div.
This is content 5 div.

Code


<div id="content1" aria-flowto("content3 content5">
This is content 1 div.  Focus should flow to content 3 and then content 5.
</div>
<div id="content2">
This is content 2 div. </div>
<div id="content3">
This is content 3 div.
</div>
<div id="content4">
This is content 4 div.
</div>
<div id="content5">
This is content 5 div.
</div>

Works With

aria-flowto
Browser Screen Reader Results
IE 9 JAWS 12 No
FF 5 JAWS 12 JAWS announces “Has flow to” and “Has flow from”.

Standards:

  • WCAG 2.0 SC 2.4.3 Focus Order: If a Web page can be navigated sequentially and the navigation sequences affect meaning or operation, focusable components receive focus in an order that preserves meaning and operability. (Level A)

ARIA Grid

Friday, July 1st, 2011

role="grid"

Example 1:

Title ISBN-Number Author Price
A Question of Love 978-3-453-40540-0 Nora Roberts $ 9.99
Piece of Peace 978-3-453-477740-0 Gunther Poison $ 13.95
International Law 029-11-131978-07-0 Daniela Hunter $ 11.95
My Name is Benny 007-01-206603-00 Benjamin Schutz $ 12.50
The Charming Butler 007-02-206983-77 Naomi Jackson $ 14.50
Lofts 010-12-656922-70 Bud Atkinson $ 22.99
DOM Objects 234-12-081733-67 Nurdogan Ghant $ 29.10
One Man Show 282-02-1839812-72 Rose Wood $9.30
Sugar Fly 081-01-123093-02 Naomi Jackson $ 20.50

Code



Works With

role=grid
Browser Screen Reader Results
IE 9 JAWS 12 Yes
FF 4 JAWS 12 Yes

Standards: