Archive for the ‘WCAG’ Category

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)

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)

Tabindex and Tab Order.

Wednesday, June 22nd, 2011

The TABINDEX attribute can be used to control the tab order of a page.

By default, only links and form fields are tabable from the keyboard. The tab order of this elements can be controlled by using the TABINDEX attribute.

Elements with a positive TABINDEX (tabindex=”10″) will receive the first tab stops on the page. The lowest positive number will receive the first tab stop, and each number in succession will then receive focus as the user tabs through the page. Once all the positive TABINDEX numbers have been tabbed to, the tab order will continue with all the tabbable elements that have no TABINDEX value.

TABINDEX can also be used to make a non-tabbable element like a DIV able to receive focus using the JavaScript .focus() method.

Example 1:

Using TABINDEX to set Tab Order (Note: By default, the comment text area below has tabindex=4 and the submit comment button has tabindex=5, they should be the first two tab stops on this page.
Field tabindex Tab Order
INPUT tabindex=”10″ tabindex=”10″ 1
INPUT tabindex=”20″ tabindex=”20″ 2
INPUT tabindex=”50″ tabindex=”50″ 5
INPUT tabindex=”40″ tabindex=”40″ 4
INPUT tabindex=”30″ tabindex=”30″ 3

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)

TabIndex to Make Non-Focusable Elements Focusable

Wednesday, June 22nd, 2011

The TABINDEX attribute can not only be used to control the tab order of a page, but can also be used to make non-focusable elements focusable with the JavaScript .focus() method and place non-tabbable items into the tab order.

By default, only links and form fields are tabable from the keyboard.

TABINDEX can also be used to make a non-tabbable element like a DIV able to receive focus using the JavaScript .focus() method.

Example 1:

Focus by Tabbing
Element IE9 FF4
INPUT tabindex=”-1″ No No
INPUT tabindex=”" Yes Yes
INPUT tabindex=”0″
Yes Yes
INPUT no tabindex
Yes Yes
DIV tabindex=”-1″
No No
DIV tabindex=”"
No No
DIV tabindex=”0″
Yes Yes
DIV no tabindex
No No

Example 2:

Moving Focus with the JS focus() Method
Element IE9 FF4 Test
INPUT tabindex=”-1″ Yes Yes
INPUT tabindex=”" Yes Yes
INPUT tabindex=”0″ Yes Yes
INPUT no tabindex Yes Yes
DIV tabindex=”-1″
Yes Yes
DIV tabindex=”"
No Yes
DIV tabindex=”0″
Yes Yes
DIV no tabindex
No No

Standards:

  • None

Javascript Skip Links

Monday, June 20th, 2011

Skip links are a requirement of Section 508. And can be accomplished in several different ways. In this method, we will use the JavaScript to create a link that surfaces when the user tabs into the control. Notice as you tab through this page, the skip navigation link appears just at the top of the AOL logo in a place where it does not obstruct the visual look and feel.

A skip link should be the first thing located at the top of the page, as the first tab stop. And it should forward focus to a location directly above the main content of the page.

Example 1:

Skip Navigation

AOL Logo

This is a heading



This is a line of text

content text

Code


<script type="text/javascript">
function toggle(n)
{
  if (n == 1) 
    {
      document.getElementById("n1").style.zIndex = 1;
    }
    else
    {
      document.getElementById("n1").style.zIndex = -1; 
    }
}
</script>
<a href="#content" 
    id="n1" 
    tabindex="0" 
    accesskey="s" 
    onFocus="toggle(1);"
    onBlur="toggle(0);" 
    style="z-index:-1; 
    font-size:.8em; 
    position:absolute; 
    display:block; 
    left:10;
    color:red;"> 
Skip Navigation </a> 
<div>
<div style="width:100%; left:1; background-color:#58A4D8;">
<img src="aol_logo.gif" alt="AOL Logo">
</div>
<h1> This is a heading </h1>
<input type=text> <br/>
This is a line of text <br/>
<a name="content"> content text </a>
</div>

Works With

JavaScript Skip Link
Browser Screen Reader Results
IE 9 JAWS 12 Yes
FF 4 JAWS 12 Yes

Standards:

CSS Hidden Skip Links

Monday, June 20th, 2011

Skip links are a requirement of Section 508. And can be accomplished in several different ways. In this method, we will use the CSS focusable property to create a link that surfaces when the user tabs into the control.

A skip link should be the first thing located at the top of the page, as the first tab stop. And it should forward focus to a location directly above the main content of the page.

Example 1:

Skip to Main Content

This is a heading



This is a line of text

Content begins here.

Code


<STYLE TYPE="text/css" MEDIA=screen>
.visuallyhidden { 
position: absolute; 
clip: rect(1px 1px 1px 1px);
clip: rect(1px, 1px, 1px, 1px);
margin: -1px;
border: 0; 
padding: 0; 
width: 1px;;
height: 1px; 
overflow: hidden; 
}

.visuallyhidden.focusable:active,
.visuallyhidden.focusable:focus { 
clip: auto; 
height: auto; 
margin: 0; 
overflow: visible;
position: static; 
width: auto;
}
</style>
<a href="#content" class="visuallyhidden focusable" title="Skip to main content.">Skip to Main Content</a>
<h1> This is a heading </h1>
<input type=text> <br/>
This is a line of text <br/>
<a name="content">Content begins here.</a>   

Works With

Using ARIA SELECTED
Browser Screen Reader Results
IE 9 JAWS 12 Yes
FF 4 JAWS 12 Yes

Standards:

ASCII art, emoticons, and leetspeak

Wednesday, June 8th, 2011

The examples below use varius methods to create images using ASCII characters. Included are:

  • ACSII art which uses characters to draw pictures.
  • Emoticons which use printable characters to form facial expressions like a smiley face :-)
  • And the rather archaine leetspeak which uses letters and numbers to present words. this is often used to send email that can avoid being trapped as spam.
  • Example 1:

    Providing text alternatives for leetspeak
    Au5t1N T3x4s

    Code

    
    <abbr title="Austin Texas">Au5t1N T3x4s</abbr>
    
    

    Example 2:

    Providing text alternatives for ASCII Art

    Code

    
    <pre>
    Figure 1: ASCII art picture of a butterfly. 
    <a href="#skipbutterfly2">;Skip ASCII image</a>
    
                                     
                                                                    LLLLLLLLLLL
                                                                __LLLLLLLLLLLLLL
                                                               LLLLLLLLLLLLLLLLL
                                                             _LLLLLLLLLLLLLLLLLL
                                                            LLLLLLLLLLLLLLLLLLLL
                                                          _LLLLLLLLLLLLLLLLLLLLL
                                                          LLLLLLLLLLLLLLLLLLLLLL
                                                  L     _LLLLLLLLLLLLLLLLLLLLLLL
                                                 LL     LLLLLL~~~LLLLLLLLLLLLLL
                                                _L    _LLLLL      LLLLLLLLLLLLL
                                                L~    LLL~        LLLLLLLLLLLLL
                                               LL   _LLL        _LL   LLLLLLLL
                                              LL    LL~         ~~     ~LLLLLL
                                              L   _LLL_LLLL___         _LLLLLL
                                             LL  LLLLLLLLLLLLLL      LLLLLLLL
                                             L  LLLLLLLLLLLLLLL        LLLLLL
                                            LL LLLLLLLLLLLLLLLL        LLLLL~
                      LLLLLLLL_______       L _LLLLLLLLLLLLLLLL     LLLLLLLL
                             ~~~~~~~LLLLLLLLLLLLLLLLLLLLLLLLL~       LLLLLL
                           ______________LLL  LLLLLLLLLLLLLL ______LLLLLLLLL_
                       LLLLLLLLLLLLLLLLLLLL  LLLLLLLL~~LLLLLLL~~~~~~   ~LLLLLL
                 ___LLLLLLLLLL __LLLLLLLLLLLLL LLLLLLLLLLLLL____       _LLLLLL_
              LLLLLLLLLLL~~   LLLLLLLLLLLLLLL   LLLLLLLLLLLLLLLLLL     ~~~LLLLL
          __LLLLLLLLLLL     _LLLLLLLLLLLLLLLLL_  LLLLLLLLLLLLLLLLLL_       LLLLL
         LLLLLLLLLLL~       LLLLLLLLLLLLLLLLLLL   ~L ~~LLLLLLLLLLLLL      LLLLLL
       _LLLLLLLLLLLL       LLLLLLLLLLLLLLLLLLLLL_  LL      LLLLLLLLL   LLLLLLLLL
      LLLLLLLLLLLLL        LLLLLLLLLLLLL~LLLLLL~L   LL       ~~~~~       ~LLLLLL
     LLLLLLLLLLLLLLL__L    LLLLLLLLLLLL_LLLLLLL LL_  LL_            _     LLLLLL
    LLLLLLLLLLLLLLLLL~     ~LLLLLLLL~~LLLLLLLL   ~L  ~LLLL          ~L   LLLLLL~
    LLLLLLLLLLLLLLLL               _LLLLLLLLLL    LL  LLLLLLL___     LLLLLLLLLL
    LLLLLLLLLLLLLLLL              LL~LLLLLLLL~     LL  LLLLLLLLLLLL   LLLLLLL~
    LLLLLLLLLLLLLLLL_  __L       _L  LLLLLLLL      LLL_ LLLLLLLLLLLLLLLLLLLLL
     LLLLLLLLLLLLLLLLLLLL        L~  LLLLLLLL      LLLLLLL~LLLLLLLLLLLLLLLL~
      LLLLLLLLLLLLLLLLLLLL___L_ LL   LLLLLLL       LLLL     LLLLLLLLLLLLLL
       ~~LLLLLLLLLLLLLLLLLLLLLLLL     LLLLL~      LLLLL        ~~~~~~~~~
               LLLLLLLLLLLLLLLLLL_ _   LLL       _LLLLL
                   ~~~~~~LLLLLLLLLL~             LLLLLL
                             LLLLL              _LLLLLL
                             LLLLL    L     L   LLLLLLL
                              LLLLL__LL    _L__LLLLLLLL
                              LLLLLLLLLL  LLLLLLLLLLLL
                               LLLLLLLLLLLLLLLLLLLLLL
                                ~LLLLLLLLLLLLLLLLL~~
                                   LLLLLLLLLLLLL
                                     ~~~~~~~~~
    <a name="skipbutterfly"></a>
    <pre>
    
    

    Example 3:

    Emoticons has an ABBR Tag. :-)

    Code

    
    <abbr title="Smiley Face">:-)</abbr>
    
    

    Example 4:

    Emoticons has text. :-) (Smile Face)

    Code

    
    :-) (Smile Face)
    
    

    Works With

    Text Alternatives for ASCII text Graphics
    Browser Screen Reader Results
    IE 9 JAWS 12 Yes
    FF 4 JAWS 12 Yes

    Standards:

Using NOEMBED with EMBED.

Tuesday, June 7th, 2011

This example shows how to provide a text alternative for an EMBED tag using NOEMBED.

Example 1:

Code


<embed src="../movies/history_of_rome.mov"
  height="60" width="144" autostart="false">
  <noembed>
    <a href="../transcripts/transcript_history_rome.htm">Transcript of "The history of
        Rome"</a>
  </noembed>
</embed>

Example 1:

Code


<embed src="moviename.swf" width="100" height="80"
  pluginspage="http://example.com/shockwave/download/" />
<noembed>
  <img alt="Still from Movie" src="moviename.gif" 
    width="100" height="80" />
</noembed>;

Works With

Alternative Text for EMBED
Browser Screen Reader Results
IE 9 JAWS 12 Yes
FF 4 JAWS 12 Yes

Standards:

Text Alternative for APPLET

Tuesday, June 7th, 2011

This example shows how to provide a text alternative for an applet.

Example 1:

Code


<applet code="tictactoe.class" width="250" height="250" alt="tic-tac-toe game">
   tic-tac-toe game
</applet>  

Works With

Alternative Text for APPLET
Browser Screen Reader Results
IE 9 JAWS 12 Yes
FF 4 JAWS 12 Yes

Standards:

Alternative Text for an OBJECT

Tuesday, June 7th, 2011

This example shows a text alternative for a Java applet using the object element.

Example 1:

Code


As temperature increases, the molecules in the balloon…


<img src="pie_chart.gif" alt="a complex chart" longdesc="pie_chart.html"/>

Works With

Alternative Text for OBJECT
Browser Screen Reader Results
IE 9 JAWS 12 Yes
FF 4 JAWS 12 Yes

Standards: