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

9.6:H309105 對於表單元件考慮提供鍵盤快速鍵的操作

不良設計

網頁開發者如未提供表單元件的便捷鍵,將會造成瀏覽網頁上的不便。

不良設計:

  <FORM action="submit" method="post">
  <LABEL for="user">使用者名稱:</LABEL>
  <INPUT type="text"id="user" value="輸入您的姓名">
  <FIELDSET>
  <LEGEND>性別:</LEGEND>
  <INPUT name="sex" type="radio" id="male" checked>
  <LABEL for="male">男性</LABEL>
  <INPUT type="radio" name="sex" id="female">
  <LABEL for="female">女性</LABEL>
  </FIELDSET>
  <LABEL for="com">建議事項:</LABEL>
  <INPUT name="comment" type="text" id="com" value="輸入您的建議事項">
  </FORM>
          

正確示範

使用便捷鍵的設計,可以讓身心障礙者利用便捷鍵迅速瀏覽網頁。

正確範例:

  <FORM action="submit" method="post">
  <LABEL for="user" accesskey="U">使用者名稱(U):</LABEL>
  <INPUT type="text" id="user" value="輸入您的姓名">
  <FIELDSET accesskey="S">
  <LEGEND>性別(S):</LEGEND>
  <INPUT name="sex" type="radio" id="male" checked>
  <LABEL for="male">男性</LABEL>
  <INPUT type="radio" name="sex" id="female">
  <LABEL for="female">女性</LABEL>
  </FIELDSET>
  <LABEL for="com" accesskey="X">建議事項(X):</LABEL>
  <INPUT name="comment" type="text" id="com" value="輸入您的建議事項">
  </FORM>
          
網頁內容結束分隔線