本文探討如何構建既美觀又易訪問的樣式化下拉選擇元素。我們將巧妙地結合原生<select></select>元素和自定義樣式，實現(xiàn)最佳用戶體驗。

名稱的重要性：下拉列表、菜單、導航

在研究過程中，我們發(fā)現(xiàn)“下拉列表”、“菜單”、“導航”等術語經(jīng)?；煊?，導致歧義。本文將明確定義“下拉列表”：

下拉列表:一種交互式組件，包含一個按鈕，用於顯示和隱藏項目列表，通常通過鼠標懸停、點擊或輕觸觸發(fā)。列表默認隱藏，交互後顯示。列表通常以塊狀內容（即選項）的形式覆蓋其他內容。

許多界面元素看起來像下拉列表，但簡單地將其稱為“下拉列表”如同用“魚”來描述動物一樣籠統(tǒng)。我們需要區(qū)分菜單、導航和選擇元素這三種不同類型的下拉列表：

• 菜單:頁面內容中用戶可執(zhí)行的命令或操作列表。
• 導航:用於網(wǎng)站導航的鏈接列表。
• 選擇:表單控件（<select></select> ），用於在表單中顯示供用戶選擇的選項列表。

不同用戶對界面的感知和交互方式不同，因此對UI元素的命名和設計模式的定義存在主觀性。

<menu></menu>元素已棄用，不推薦使用。關於包含式菜單和菜單按鈕的詳細說明，以及為什麼不應將ARIA 菜單角色用於站點導航，請參考相關資源。

我們將專注於作為<select></select>元素的下拉列表類型。

<select></select>元素的樣式化挑戰(zhàn)

根據(jù)MDN 的說法，樣式化表單控件存在“好、壞、醜”三種情況。<select></select>元素無疑屬於“醜”的範疇，其樣式化支持不足，導致開發(fā)者常常尋求替代方案。

理想情況下，如果可以避免使用<select></select>，就應該避免。然而，在某些情況下，<select></select>仍然是最佳選擇，例如選項數(shù)量眾多、佈局空間有限或時間/預算不足等。

自定義<select></select>的需求

創(chuàng)建自定義<select></select>時，通常需要滿足以下需求：

• 按鈕顯示當前選定的選項。
• 點擊按鈕切換選項列表的可見性。
• 點擊選項列表中的選項會更新所選值，按鈕文本隨之更改，選項列表關閉。
• 點擊組件外部會關閉選項列表。
• 觸發(fā)器包含一個指向下方的三角形圖標，指示存在選項。

然而，這僅僅滿足了部分需求。原生<select></select>元素還提供以下功能：

• 無論用戶的視覺能力如何，選定的選項都清晰可見。
• 組件能夠以可預測的方式與鍵盤交互（例如，使用箭頭鍵導航，Enter 鍵選擇，Esc 鍵取消等）。
• 輔助技術（例如屏幕閱讀器）能夠清晰地向用戶宣布元素，包括其角色、名稱和狀態(tài)。
• 選項列表位置調整（即不會被屏幕裁剪）。
• 元素遵守用戶的操作系統(tǒng)偏好設置（例如高對比度、配色方案、動畫等）。

許多自定義<select></select>組件都無法完全滿足這些需求。

構建“混合”選擇器

構建簡單的自定義<select></select>會犧牲功能性以換取美觀性。更好的方法是默認提供原生<select></select>，並在可能的情況下將其替換為更美觀的自定義版本。這就是“混合”選擇器的理念。它包含兩個選擇器：

• 原生<select></select>，默認可見且可訪問。
• 自定義<select></select>，默認隱藏，僅在使用鼠標時顯示。

以下是HTML 結構示例：

 <label for="selectNative">Main job role</label>
<div>
  <select id="selectNative" class="selectNative">
    <option value="1">Option 1</option>
    <option value="2">Option 2</option>
  </select>
  <div class="selectCustom">
    <!-- Custom select content -->
  </div>
</div>

CSS 代碼用於控制兩個選擇器的顯示和位置：

 .selectNative,
.selectCustom {
  position: relative;
  width: 22rem;
  height: 4rem;
}

.selectCustom {
  position: absolute;
  top: 0;
  left: 0;
  display: none;
}

@media (hover: hover) {
  .selectCustom {
    display: block;
  }
  .selectNative:focus .selectCustom {
    display: none;
  }
}

JavaScript 代碼用於處理點擊事件、同步兩個選擇器的值以及鍵盤導航。

可用性測試

我們進行了一次小型可用性測試，測試對象包括殘疾人士，使用不同的設備和輔助技術進行測試。測試結果表明該方法有效，但仍需進行更廣泛的測試。

該方法的優(yōu)點在於：

• 移動設備和平板電腦用戶獲得原生<select></select>，提供更好的用戶體驗和性能。
• 鍵盤用戶能夠以預期的方式與原生<select></select>交互。
• 輔助技術能夠像正常一樣與原生<select></select>交互。
• 鼠標用戶能夠與增強的自定義<select></select>交互。

該方法為所有用戶提供必要的原生功能，無需額外的工作量來實現(xiàn)所有原生特性。

然而，這種方法並非萬能的，它適用於簡單的選擇器，對於復雜的交互可能無效。

關於類似菜單的選擇器

如果選擇器始終具有選定選項（例如排序內容），則可以使用原生<select></select>或自定義菜單。需要注意WCAG 3.2.2 輸入準則：

除非在用戶使用組件之前已告知其行為，否則更改任何用戶界面組件的設置不應自動導致上下文更改。

為了滿足此準則，需要在用戶交互之前警告用戶操作，或在選擇器後添加說明。

結語

構建真正易訪問的選擇器組件比看起來更難。 “混合”選擇器是嘗試在保持美觀的同時獲得盡可能多的原生功能的一種方法。如果資源允許，請確保在發(fā)布組件之前進行充分的測試。

記住在創(chuàng)建“下拉列表”組件時使用正確的名稱。 ?

以上是在本機和自定義選擇元素之間達到平衡的詳細內容。更多資訊請關注PHP中文網(wǎng)其他相關文章！