跳到主要內容
:::|

13.10:H313209 若有群組超連結,在群組之前增設一項繞過此區域的超連結

說明: 為增加身心障礙者在使用一些特殊瀏覽器,瀏覽網頁資訊時增加閱讀效率,所以網頁開發者必須針對群組超連結,在群組超連結前設定一個繞過此區域的超連結,讓使用者不必一再閱讀相同的群組超連結,而可以跳過該區域直接進入下面網頁資訊的瀏覽。

範例: 網頁設計者可以使用tabindex屬性,方便使用者快速的跳過導覽列,直接瀏覽網頁內容。可是tabindex屬性是HTML4.0之後才出現的標籤。為了考慮不支援HTML4.0的瀏覽器,則可以利用錨點的功能,讓使用者可以跳過該群組的超連結。下列的不良設計未使用tabindex屬性或是錨點的功能。

不良設計

沒有在連結群組之前設定一個超連結,讓使用者可以跳過導覽列。

不良設計:

< DIV id="Navigation" > < P > [< A href="linkto/ex01.jsp" class="style1" >影音< /A >] [< A href="linkto/ex02.jsp" class="style1" >電影< /A >] [< A href="linkto/ex03.jsp" class="style1" >音樂< /A >] [< A href="linkto/ex04.jsp" class="style1" >卡通< /A >] [< A href="linkto/ex05.jsp" class="style1" >遊戲< /A >] [< A href="linkto/ex06.jsp" class="style1" >星座< /A >] [< A href="linkto/ex07.jsp" class="style1" >算命< /A >] < /P > < /DIV > < P >- - 網頁主要內容 - -< /P >


正確示範

正確範例是使用tabindex屬性及錨點的設計。錨點連結的使用可以提供使用者在瀏覽器不支援tabindex屬性時,仍可以跳過導覽列。

正確範例:

< DIV id="navigation" > < P > [< A href="#content" class="style1" >略過導覽列< /A >] [< A href="linkto/ex01.jsp" class="style1" >影音< /A >] [< A href="linkto/ex02.jsp" class="style1" >電影< /A >] [< A href="linkto/ex03.jsp" class="style1" >音樂< /A >] [< A href="linkto/ex04.jsp" class="style1" >卡通< /A >] [< A href="linkto/ex05.jsp" class="style1" >遊戲< /A >] [< A href="linkto/ex06.jsp"class="style1" >星座< /A >] [< A href="linkto/ex07.jsp" class="style1" >算命< /A >] < /P > < /DIV > < P >- - < A name="content" tabindex="1" >網頁主要內容 < /A > - -

上一頁| 回首頁