如何使我的網頁部分508和wcag 2.0兼容

Question

你好遵守利弊！

我的任務是使我們的網絡應用程序符合第508條和wcag 2.0指導。對於大多數情況來說，這並不是太棘手，但我已經打了一些路障。

我在應用程序中使用qtip很多，這往往是大多數兼容b/c它使用wai-aria角色和描述的屬性。但是，我添加我的工具提示的方式使它不會在第一次鼠標懸停前放到文本上。這顯然不會發生在鍵盤導航，我不知道屏幕閱讀器將如何處理，或者！

我在這裏做了一個小提琴：http://jsfiddle.net/patriciavandermeer/xkhy6/2/ 這證明了我在說什麼。工具提示是最終用戶可以在別處設置的HTML，並且它們列出的項目可能有也可能沒有工具提示。

我正在考慮使工具提示被應用和顯示：焦點（並掩藏在失去焦點），但然後我需要給跨度tabindex，我不知道有多好的支持是的，所有的主要瀏覽器都可以處理嗎？

還是我應該咬一口子，讓工具提示在文檔中準備好了？我在一些繁忙的網頁上遇到了一些嚴重的性能問題，當我把它設置成這樣的時候。

編輯：這裏是一個將使用的html的樣本，以及jquery/javascript我用來將工具提示附加到跨度。

樣本HTML：

<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用於連接提示：

$('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！首先，你的代碼凍結了我的瀏覽器。我不確定這是JSFiddle還是你的代碼的錯。如果你向我展示一個帶有你的代碼的實時頁面，我可以在那裏查看它。

就可用性而言，我會選擇:focus的方法，其中所有的工具提示在頁面加載後都存在於頁面上。這使得通過屏幕閱讀器訪問您的工具提示數據非常簡單。另外：

• 您將不再需要通過AJAX加載任何數據（我假設這是你在做什麼），如果你正在做大量的請求
• 你贏的可能削減延遲不必提出一種方法來提醒屏幕閱讀器新的工具提示內容已被加載（盲人讀者可能不會期待它）

它看起來像你的工具提示與錨相關聯。與aToolTip類如果你標記你提示的div /跨度，您可以「隱藏」他們在相關的錨不集中：

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

然後你就可以「秀」的提示時，錨它前面集中或徘徊：

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

如果提示的顯示取決於錨，你不會有tabIndex打擾。請記住+運營商是CSS3 only。使用JavaScript，你可以想出類似的東西，可以在更多瀏覽器中使用。

向盲人用戶提供工具提示信息的最後一個想法：如果您將其填入錨的title屬性中，屏幕閱讀器將與錨文本一起讀取它。儘量保持簡單！ :)

希望有所幫助。