このページのセクション508とwcag 2.0に準拠させる方法

Question

こんにちは、コンプライアンス担当者！

私は、Webアプリケーションをセクション508とwcag 2.0のguidlinesに準拠させることを任されています。ほとんどの場合、これはやりにくくはありませんが、私はちょっとしたブロックを打ちました。

私はアプリで多くのqtipを使用していますが、これは主に準拠b/cである傾向があり、wai-ariaの役割と記述された属性を使用します。しかし、私は私のツールチップを追加する方法は、彼らは最初のマウスオーバーまでのテキストを置くことはありません。これは明らかにキーボードのナビゲーションでは起こりませんが、スクリーンリーダーがそれをどのように処理するかわかりません！

私はここでフィーバーを作った：http://jsfiddle.net/patriciavandermeer/xkhy6/2/ 私が話していることを実証している。ツールチップは、エンドユーザーが他の場所で設定できるhtmlであり、アイテムの一覧にはツールヒントがある場合とない場合があります。

私はツールチップを適用して上に表示することを考えていましたが、フォーカス（およびフォーカスの喪失を隠す）が、スパンにtabindexを与える必要があります。すべてのメインブラウザがその問題を処理できますか？

か、私はちょうど弾丸を噛んで、ツールチップを準備してドキュメントに載せる必要がありますか？私はそれが私のように設定していたときに私の混雑したページのいくつかで重大なパフォーマンスの問題を抱えていました。

EDIT：ここでは、使用するhtmlのサンプルと、ツールチップをスパンに添付するために使用するjquery/javascriptを示します。

サンプルHTML：

$('span.InteractiveToolTipMe').live("mouseover", function() { 

     var $this = $(this); 
     if (!$this.data("toolTipAttached")) { 
      var content = $(this).parent().find('.InteractiveToolTip').html(); 

      $this.qtip({ 
       content: { 
        text: content 
       }, 
       position: { 
        target: 'mouse', 
        adjust: { 
         mouse: false 
        }, 
        viewport: $(window) 
       }, 
       hide: { 
        fixed: true, 
        delay:350, 
        when: 'mouseout' 
       }, 
       show: { 

        solo: true, 
        delay: 350, 
        ready: true 
       }, 
       style: { 
        widget: true, 
        tip:false, 
        classes: "LegendTip" 

       } 
      }); 

      $this.data("toolTipAttached", true); 
      //$this.trigger("mouseover"); 
     } 

    }); 

Answer 1

WOW：

<li > 
     <span class="InteractiveToolTipMe">Administration</span> 
     <div class="InteractiveToolTip NoDisplay"><p>This is a description</p> 
      <p>&nbsp;</p> 
      <p>For administration.....</p></div> 

    </li> 

    <li > 
     Board and Committees 
    </li> 

    <li > 
     Community Outreach 
    </li> 
    <li > 
     <span class="InteractiveToolTipMe">Fundraising</span> 
     <div class="InteractiveToolTip NoDisplay"><p><strong>test</strong></p> 
      <p>&nbsp;</p> 
      <ul> 
       <li><strong>test</strong></li> 
       <li>test</li> 
       <li>test</li> 
      </ul> 
     </div> 
    </li> 
    <li style="padding:2px;"> 
     Physics 
    </li> 

    <li style="padding:2px;"> 
     Public Speaking 
    </li> 
    <li style="padding:2px;"> 
     Special Events 
    </li> 
</ul> 

Javascriptのツールチップを取り付けるための！まず、あなたのコードは私のブラウザを凍らせました。私はこれがJSFiddleかあなたのコードの欠陥かどうかは分かりません。あなたのコードが入ったライブページを私に見せたら、そこでチェックすることができます。

アクセシビリティに関する限り、:focusのアプローチを選択します。ここでは、ページが読み込まれた後にすべてのツールチップがページに存在します。これにより、スクリーンリーダーによるツールチップデータへのアクセスが非常に簡単になります。また：

• あなたはあなたが勝った
• リクエストをたくさん作っている場合は、待ち時間を減らす可能性がある、（私はそれはあなたがやっているものだと仮定）AJAXを経由して任意のデータをロードする必要はありません新しいヒントのコンテンツが読み込まれていることをスクリーンリーダーに警告する方法を考え出す必要があります（盲目の読者はおそらくそれを期待しません）。

ツールチップがアンカーに関連付けられているようです。あなたがツールチップのdivをマークアップした場合/クラスaToolTipにまたがる関連するアンカーがフォーカスされていないとき、あなたは「非表示」彼らすることができます

a + .aToolTip { 
    position: absolute; 
    left:-999em; 
} 

次に、あなたに「ショー」あなたのツールチップそれに先行するアンカーが集中したり推移しているとき：ツールチップの表示はアンカーに依存している場合

a:hover + .aToolTip, 
a:focus + .aToolTip { 
    position: static; 
    left:0; 
} 

は、あなたがtabIndexを気にする必要はありません。+演算子がCSS3 onlyであることに注意してください。 JavaScriptを使用すると、より多くのブラウザで動作するようなものを思いつくことができます。

ブラインドユーザーにツールチップ情報を伝える最後のアイデア：アンカーのtitle属性に埋め込むと、スクリーンリーダーはアンカーテキストとともにそれを読み取ります。それを簡単に保つようにしてください！ :)

多少役に立ったと思います。