0

我從版本6-8的IE瀏覽器中遇到了一些問題(仍然未在9測試過,但我希望有一個修復程序可以修復它們)...在IE中的目標錨點之間來回切換

我有一個頁面上有一個小工具,它有一個幫助圖標,點擊後可以進一步瀏覽到一個詞彙表,以描述每個工具的作用。詞彙表區域中的每個段落都有一個「返回頂部」按鈕,鏈接到最初選定的特定幫助圖標。

這是一些代碼。

首先,包含該工具的表格,我已將其刪除,因爲它不是該bug的一部分。本節僅僅是工具頭:

<table class="timeCardTable"> 
<tbody> 
    <tr> 
    <th> 
     <span>Start</span> 
     <a href="#startTime" name="startTimeIcon" id="startTimeIcon" class="helpIcon"> 
      <img src="images/helpIcon.png" width="16" height="16" title="Start tooltip." alt="Start tooltip." /> 
     </a> 
    </th> 

    <th> 
     <span>End</span> 
     <a href="#endTime" name="endTimeIcon" id="endTimeIcon" class="helpIcon"> 
      <img src="images/helpIcon.png" width="16" height="16" title="End tooltip." alt="End tooltip." /> 
     </a> 
    </th> 

    <th> 
     <span>Length</span> 
     <a href="#length" name="lengthIcon" id="lengthIcon" class="helpIcon"> 
      <img src="images/helpIcon.png" width="16" height="16" title="Length tooltip." alt="Length tooltip." /> 
     </a> 
    </th> 

    <th style="display: none;"> 
     <span>Eating Period</span> 
     <a href="#eatingPeriod" name="eatingPeriodIcon" id="eatingPeriodIcon" class="helpIcon"> 
      <img src="images/helpIcon.png" width="16" height="16" title="Eating period tooltip." alt="Eating period tooltip." /> 
     </a> 
    </th> 
    </tr> 
</tbody> 

現在下面的工具被相應的錨,這些a.helpIcon標記都指向:

<div class="glossaryContent"> 

<h2 style="color: rgb(0, 0, 255); ">Glossary</h2> 

<a name="startTime"></a> 
<h3 style="color: rgb(0, 0, 255); ">Start Time </h3> 
<p style="color: rgb(0, 0, 255); ">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis sed quam eu est mattis faucibus. Pellentesque eu sapien purus. Donec tincidunt, nibh id sagittis commodo, mauris ipsum pharetra tellus, ut mattis felis lorem vel mi. Quisque massa lacus, ultrices eu consectetur suscipit, pellentesque et nibh. Phasellus imperdiet consequat neque sit amet ullamcorper. Duis et libero ac massa feugiat venenatis. Integer pulvinar molestie metus sed molestie. Vivamus scelerisque, neque at accumsan sollicitudin, diam tellus venenatis lorem, ac tempor massa velit non massa. 
    <br /> 
    <a href="#startTimeIcon">top</a> 
</p> 

<a name="endTime"></a> 
<h3 style="color: rgb(0, 0, 255); ">End Time </h3> 
<p style="color: rgb(0, 0, 255); ">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis sed quam eu est mattis faucibus. Pellentesque eu sapien purus. Donec tincidunt, nibh id sagittis commodo, mauris ipsum pharetra tellus, ut mattis felis lorem vel mi. Quisque massa lacus, ultrices eu consectetur suscipit, pellentesque et nibh. Phasellus imperdiet consequat neque sit amet ullamcorper. Duis et libero ac massa feugiat venenatis. Integer pulvinar molestie metus sed molestie. Vivamus scelerisque, neque at accumsan sollicitudin, diam tellus venenatis lorem, ac tempor massa velit non massa. 
    <br /> 
    <a href="#endTimeIcon">top</a> 
</p> 

<a name="length"></a> 
<h3 style="color: rgb(0, 0, 255); ">Length </h3> 
<p style="color: rgb(0, 0, 255); ">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis sed quam eu est mattis faucibus. Pellentesque eu sapien purus. Donec tincidunt, nibh id sagittis commodo, mauris ipsum pharetra tellus, ut mattis felis lorem vel mi. Quisque massa lacus, ultrices eu consectetur suscipit, pellentesque et nibh. Phasellus imperdiet consequat neque sit amet ullamcorper. Duis et libero ac massa feugiat venenatis. Integer pulvinar molestie metus sed molestie. Vivamus scelerisque, neque at accumsan sollicitudin, diam tellus venenatis lorem, ac tempor massa velit non massa. 
    <br /> 
    <a href="#lengthIcon">top</a> 
</p> 

現在我似乎遇到的問題是每個瀏覽器都通過不同的方式處理這些事情。在Chrome中,如果您將第一個「幫助圖標」(名稱=「startTimeIcon」中的錨標籤)打開並按回車鍵,則會將您帶入「開始時間」區域,這一點沒有問題。再次點擊選項卡會回到上面的幫助圖標,重點關注Tab鍵順序中的NEXT圖標,該圖標將成爲名稱爲「endTimeIcon」的錨標籤。這是,正好是客戶希望如何工作,因爲這是他們的可訪問性要求之一。然而,在IE中,如果你選擇頂部,startTimeIcon,endTimeIcon或lengthIcon中的任何一個錨點,按回車鍵進入相應的錨點,然後再次點擊標籤,它總是默認回到startTimeIcon,而不是去下一個幫助圖標。即使您選擇了lengthIcon(列表中的最後一個),再次點擊標籤會將您帶回到startTimeIcon。

我不知道如何解決這個問題,儘管我很確定這是IE處理Tab鍵順序的一個錯誤,但這對於客戶端來說是一個巨大的問題,因爲該站點需要100%的屏幕閱讀器友好和通過tabbing導航。

任何幫助將不勝感激。

感謝,

語法

回答

0

最後我得到的東西在這個遠離黑客攻擊的幾個小時後會好一點去。通過向每個helpIcon錨點添加一個與name屬性相同的id,並將「#」的href添加到目標錨點,標籤會以客戶端認爲可接受的方式進行自我糾正。如果我在其中一個幫助圖標上按下回車鍵,則該網站現在導航到相應的目的地,其中另一個標籤頁點擊導航到描述下面相應的「返回頂部」鏈接,然後將該用戶返回到最後選擇的幫助圖標,允許用戶以正確的順序選擇下一個。這也正好是它一直在Firefox中工作的方式。

乾杯