實施範例17

17.透過連結、表單控件、物件來建立邏輯性的標籤順序

當預設的標籤順序不足夠時,便應使用此技巧以提供邏輯性的標籤順序。但通常根據互動元素的次序和關係來放置內容時,這個技巧是沒有必要的,而且明確地設定標籤順序,也會容易引起可用性的錯誤。

在某些情況下,如果互動元素的順序是根據內容的關係來排列,而非根據它們在程式碼中的次序時,便應在互動元素中設定tabindex屬性。它是一個介乎0至32767的數值。

當使用TAB鍵在互動元素上導航時,焦點會根據元素的tabindex屬性從1開始依次序導覽。而没有設定該屬性,或屬性的值是0的互動元素則會排在最後。

範例:

這個例子是一個用來尋找婚姻紀錄的表單,它有數個作為搜尋新郎和新娘的輸入欄位。該表單使用了數據表格的欄位作為標記,新郎在第一欄,而新娘則在第二欄。原來的表單是按列作為順序,但以欄的導航形式將會較有邏輯。這樣一來,用戶可以先把新郎的搜索條件填妥,然後再填寫新娘的搜索條件。因此輸入欄位的tabindex屬性可以被用來指定作為欄的導航順序。

範例代碼:

<form action="#" method="post">
<table summary="the first column contains the search criteria
of the groom, the second column the search criteria of
of the bride">
<caption>Search for marriage records</caption>
<tr>
<th>Search criteria</th>
<th>Groom</th>
<th>Bride</th>
</tr>
<tr>
<th>First name</th>
<td><input type="text" size="30" value="" name="groomfirst"
title="First name of the groom" tabindex="1"></td>
<td><input type="text" size="30" value="" name="bridefirst"
title="First name of the bride" tabindex="4"></td>
</tr>
<tr>
<th>Last name</th>
<td><input type="text" size="30" value="" name="groomlast"
title="Last name of the groom" tabindex="2"></td>
<td><input type="text" size="30" value="" name="bridelast"
title="Last name of the bride" tabindex="5"></td>
</tr>
<tr>
<th>Place of birth</th>
<td><input type="text" size="30" value="" name="groombirth"
title="Place of birth of the groom" tabindex="3"></td>
<td><input type="text" size="30" value="" name="bridebirth"
title="Place of birth of the bride" tabindex="6"></td>
</tr>
</table>
</form>