Archive for the ‘Accessibility’ Category

Accessible Media Player (Works with IE, FF, Safari, and Chrome)

Thursday, September 1st, 2011

Deque Systems has modified the JWPlayer to make it keyboard accessible which works not only in IE, but also FireFox, Chrome and Safari.

This player uses the SWFFocus update from Adobe.
The fix works in Firefox on both Windows and OSX, and in Google Chrome and Safari 5 on OSX only. The Windows versions of Chrome and Safari do not seem to shift focus to and from the plug-in correctly. Also, be aware that Safari 5 appears to contain a bug that disables keyboard input to the Debugger version of the FlashPlayer, so be sure to test with the regular released version of the FlashPlayer.

JWPlayer is free for non-commercial use, but has a small fee for commercial use and support.

    1. Uses tabindex=0 on the player’s
      to make the Flash Player tabbable.

    2. Uses SWFFocus to make the Flash Player receive keyboard focus and not trap it inside.
    3. The Flash keyboard trap is fixed when SWFFocus automatically creates two hidden links before and after the player. One has the id=”beforeswfanchor1″ and the other id=”afterswfanchor1″

Download files

Example 1:


Javascript API into the player:

JW Player Embed Method

Loading the player …


Code


<script type="text/javascript" src="http://www.donaldevans.com/deque/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/deque/jwplayer/jwplayer_deque.swf",
    wmode: 'window',
    file: "http://www.donaldevans.com/deque/jwplayer/corrie.flv",
    allowscriptaccess: "always",
    seamlesstabbing: "true",
    image: "http://www.donaldevans.com/deque/jwplayer/corrie.jpg",
    plugins: { 
      "audiodescription-2": {file: "http://www.donaldevans.com/deque/jwplayer/corrie.mp3", state: "true"},
      "captions": { file: "http://www.donaldevans.com/deque/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)

JW Player Test Bed

Wednesday, August 3rd, 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 interface so the web page and communicate with 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
  • WCAG 2.0 Technique Flash17: Preventing a keyboard trap in Flash content

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:

When Does onClick Work with the Keyboard Enter Key?

Thursday, June 30th, 2011

The following table contains various HTML elements with an onClick applied and a tabIndex=”0″. The purpose is to determine when a person must provide a keyboard handler to an element that is being used as a clickable object.

Best practices for progressive enhancement demands that we use native HTML elements when ever possible. However with ARIA it is possible to use a role attribute to make any container act like a button, link or for that matter almose any type of an element.

Test the following elements for your self. Tab to one of the tests contained inside the table and press the enter key. If you see a popup alert message, the keyboard works with the element.

Example 1:

When Does onClick Work with the Keyboard Enter Key?
Test Element FireFox 5 I E 9 Jaws and FF5 Jaws and IE9
Div uses onClick
DIV No No Yes Yes
Span uses onClick Span No No Yes Yes
clickable image IMG No Yes Yes Yes
A tabbable Cell using onClick TD No No Yes Yes
An A Element with onClick ANCHOR Yes Yes Yes Yes
INPUT No Yes Yes if in Manual Forms Mode.
No if in automatic Forms Mode.
Yes
BUTTON Yes Yes Yes Yes

Example 1:

If you need to build a JavaScript keyboard handler, this code may help. KeyCode 13 is the enter key and 32 is the space bar.

Code


<script>
  function KeyboardHandler(event) {
    if((event.keyCode == 13) || (event.keyCode== 32)){
      MyFunction()
    }
  }
</script>
<input type="text" onClick="KeyBoardHandler(event);" \>

Standards:

  • WCAG 2.0 SC 2.1.1 Keyboard: All functionality of the content is operable through a keyboard interface without requiring specific timings for individual keystrokes, except where the underlying function requires input that depends on the path of the user’s movement and not just the endpoints. (Level A)

ARIA Checkbox

Wednesday, June 29th, 2011

ARIA’s role="checkbox" allows the developer a lot of options when it comes to creating an accessible checkbox. When applied properly, the ARIA role="checkbox" can turn any element into a checkbox, including, p, div, span, img, and others.

In this case we have applied the role="checkbox" to an HTML SPAN element. Since the SPAN element does not have a keyboard equivilent to onClick, we will also create a simple keyboard handler to look for the ENTER key (keyCode=”13″) or the SPACEBAR key (keycode=”32″).

Example 1:

     

Code


<style>
[aria-checked="true"]  { background-image: url(http://www.donaldevans.com/images/CheckBoxChecked.png); 
background-repeat: no-repeat;}
[aria-checked="false"] { background-image: url(http://www.donaldevans.com/images/CheckBoxNotChecked.png); 
background-repeat: no-repeat;
}
</style>

<script>
function ARIA_Checkbox_Key(event) {	
  if((event.keyCode == 13) || (event.keyCode == 32)){
    ARIA_Checkbox()
  }
}  
function ARIA_Checkbox() {
    var getvalue=document.getElementById("ARIA_Checkbox").getAttribute("aria-checked");
    if (getvalue=="false")
      {
        document.getElementById("ARIA_Checkbox").setAttribute("aria-checked", "true");
        document.getElementById('checkbox_alert').innerHTML = "aria-checked has been set to true.";
    } else {
      document.getElementById("ARIA_Checkbox").setAttribute("aria-checked", "false");
      document.getElementById('checkbox_alert').innerHTML = "aria-checked has been set to false.";
  }
}
</script>

<span id="ARIA_Checkbox" 
  role="checkbox" 
  aria-checked="false"
  onClick= "ARIA_Checkbox();" 
  onkeyup="ARIA_Checkbox_Key(event);"
  tabindex="0">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span>
<br />
<p id="checkbox_alert" role="alert"></p>

Works With

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

Standards:

  • WCAG 2.0 SC 1.3.1 Info and Relationships: Information, structure, and relationships conveyed through presentation can be programmatically determined or are available in text. (Level A)
  • 2.1.1 Keyboard: All functionality of the content is operable through a keyboard interface without requiring specific timings for individual keystrokes, except where the underlying function requires input that depends on the path of the user’s movement and not just the endpoints. (Level A)
  • 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)