無障礙網路空間服務網無障礙網路空間服務網

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

不良設計

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

不良設計:

  <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> - -</P>
          
網頁內容結束分隔線