Archive for June, 2011

« Older Entries
Newer Entries »

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:

Posted in Accessibility, Best Practices, Section 508, WCAG | Comments Off

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:

Posted in Accessibility, Best Practices, Section 508, WCAG | Comments Off

Using a TABLE to Create ALT text for a Complex Graph

Friday, June 17th, 2011

Sometimes, alternative descriptions for complex images like a chart are best done with data tables. These can be either on screen directly under the image or even as a popup page that is linked to the image.

Example 1:


A Pie Chart Representing the percentage of death attributed to various catastrophes
Catastrophes %
Volcano 0.1%
Epidemic 19.8%
Famine 9.2%
Storm 3.2%
Earthquake 1.0%
War 66.8%

Code


<img src="http://www.donaldevans.com/images/PieChart.png" alt="" title=""/><br/>
<table>
<caption>A Pie Chart Representing the percentage of death attributed to various catastrophes</caption>
<tr><th scope="col">Catastrophes</th><th scope="col"><abbr title="percent">%</abbr></th>
<tr><td>Volcano</td><td>0.1%</td></tr>
<tr><td>Epidemic</td><td>19.8%</td></tr>
<tr><td>Famine</td><td>9.2%</td></tr>
<tr><td>Storm</td><td>3.2%</td></tr>
<tr><td>Earthquake</td><td>1.0%</td></tr>
<tr><td>War</td><td>66.8%</td></tr>
</table>

Works With

Using a Data Table as Alternative Text
Browser Screen Reader Results
IE 9 JAWS 12 Yes
FF 4 JAWS 12 Yes

Standards:

Posted in Accessibility | Comments Off

CSS Background Images

Wednesday, June 8th, 2011

CSS Background images do not have an ALT attribute like the HTML IMG element. For this reason, they can not convey their meaining to assistive technology like the JAWS screen reader.

Generally speaking, it is recommended to only use CSS Background Images for decorative images that convey no meaning. Something like a corner gif or perhaps an icon graphic that is associated with HTML LINK text and does not convey any meaning that is not already conveyed in the text.

I have seen some novel uses where HTML text is styled with a background image overlaying the text. This allows the screen reader to read the text, while the sighted user only sees the image and not the underlying text. Although it would be better from several points of view to use an HTML IMG and the ALT attribute in this case. HTML images will be cashed when downloaded. CSS images are not. So there is a performance benefit. Also consider the SEO implications. CSS images are not indexed by the search engines.

Example 1:

Uses a background image to create an image that conveys no meaning.

 
 
 
 

Code


<style>
.myCornerGif
{
background-image:url('/images/corner.jpg');
background-repeat:no-repeat;
background-attachment:scroll;
background-position:left; 
position:relative;
padding-top:100px;
padding-bottom:100px;
padding-right:50px;
padding-left:50px;
}
</style>
<div class="myCornerGif">&nbsp;<div>

Example 2:

Uses a background image to create an image which has an alternate description as LINK text on the screen.

Help

Code


<style>
.myHelpIcon
{
background-image:url('/images/help.jpg');
background-repeat:no-repeat;
background-attachment:scroll;
background-position:inline; 
position:relative;
padding-top:100px;
padding-bottom:100px;
padding-right:50px;
padding-left:50px;
}
</style>
<div class="myHelpIcon"><a href="#">Help</a></div>

Works With

Using CSS Background Images
Browser Screen Reader Results
IE 9 JAWS 12 Yes
FF 4 JAWS 12 Yes

Posted in Accessibility | Comments Off

HTML5 Canvas

Wednesday, June 8th, 2011

At the time of this writing, the HTML5 specification is still in draft form. And the CANVAS element is not showing any promise of being accessible. This could change, but for now it is up to the developer to provide alternative text for CANVAS.

Example 1 below shows the use of “Fallback Text”. HTML5 does provide this in case the browser does not support CANVAS. However, at this time, it it not readable by the JAWS screen reader so I doubt it will be helpful.

Example 2 below shows the best way to provide alternative text at this point in time. Using Alternative Text that is part of the HTML and not the CANVAS tag.

Example 1:

Using CANVAS’s fallback text.

Alternative text: a Red and Blue solid box about 1 inch square.


Code


function draw(id) {
      var canvas = document.getElementById(id);
      if (canvas.getContext) {
        var ctx = canvas.getContext("2d");

        ctx.fillStyle = "rgb(200,0,0)";
        ctx.fillRect (10, 10, 55, 50);

        ctx.fillStyle = "rgba(0, 0, 200, 0.5)";
        ctx.fillRect (30, 30, 55, 50);
      }
    }
<canvas id="canvas1" width="150" height="150">
     <p>Alternative text:  a Red and Blue solid box about 1 inch square.</p>
</canvas>
<button onClick="draw('canvas1')">See Canvas Example</button>

Works With

Using CANVAS’s fallback is NOT RECOMMENDED to create Alternative Text
Browser Screen Reader Results
IE 9 JAWS 12 No
FF 4 JAWS 12 No

Example 2:

Using the HTML to create Alternative Text

Alternative text: a Red and Blue solid box about 1 inch square.

Code


function draw(id) {
      var canvas = document.getElementById(id);
      if (canvas.getContext) {
        var ctx = canvas.getContext("2d");

        ctx.fillStyle = "rgb(200,0,0)";
        ctx.fillRect (10, 10, 55, 50);

        ctx.fillStyle = "rgba(0, 0, 200, 0.5)";
        ctx.fillRect (30, 30, 55, 50);
      }
    }
<canvas id="canvas2" width="150" height="150">
</canvas>
<p>Alternative text:  a Red and Blue solid box about 1 inch square.</p>
<button onClick="draw('canvas2')">See Canvas Example</button>

Works With

Using the HTML to create Alternative Text
Browser Screen Reader Results
IE 9 JAWS 12 Yes
FF 4 JAWS 12 Yes

Standards:

Posted in Accessibility, Best Practices, HTML5 | Comments Off

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:

Posted in Accessibility, Best Practices, WCAG | Comments Off

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:

Posted in Accessibility, Best Practices, WCAG | Comments Off

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:

Posted in Accessibility, Best Practices, WCAG | Comments Off

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:

Posted in Accessibility, Best Practices, WCAG | Comments Off

Using LONGDESC

Tuesday, June 7th, 2011

The LONGDESC attribute of the HTML IMG tag is used to link the image to a full description of the image itself. If the ALT attribute gets over 150 characters it is usually a good idea to create a long description of the image and place it into an HTML file. The LONGDESC attribute then points to that HTML file.

LONGDESC is used to provide access by some assistive technology like the JAWS screen reader to a simple HTML file that describes the image. It does not create link to the HTML file on the image. In the example of JAWS, the screen reader announces, “Press Enter for Long Description”.

Example 1:

Notice the use of the ALT attribute and the LONGDESC in the following IMG tags.


Code


<img src="/images/PieChart.png" alt="a complex chart" longdesc="PieChart.html"/>

PieChart.html:
<body>
 A Pie Chart Representing the percentage of death attributed to various catastrophes:
 <ul>
 <li>Volcano 0.1%</li>
 <li>Epidemic 19.8%</li>
 <li>Famine 9.2%</li>
 <li>Storm 3.2%</li>
 <li>Earthquake 1.0%</li>
 <li>War 66.8%</li>
 </body>

Works With

Using Long Description
Browser Screen Reader Results
IE 9 JAWS 12 Yes
FF 4 JAWS 12 Yes

Standards:

Posted in Accessibility, Best Practices, WCAG | Comments Off

« Older Entries
Newer Entries »