この記事では、美しくてアクセスしやすいスタイルのドロップダウン選択要素を構(gòu)築する方法について説明します。ネイティブを巧みに組み合わせます<select></select>最高のユーザーエクスペリエンスのための要素とカスタムスタイル。

名前の重要性：ドロップダウンリスト、メニュー、ナビゲーション

調(diào)査プロセス中に、「ドロップダウンリスト」、「メニュー」、「ナビゲーション」などの用語がしばしば混合され、曖昧さが生じることがわかりました。この記事では、「ドロップダウンリスト」を明確に定義します。

ドロップダウンリスト：ボタンを含むインタラクティブなコンポーネントで、通常はマウスオーバー、クリック、またはタッピングによってトリガーされるアイテムのリストを表示および非表示にします。リストはデフォルトで隠され、インタラクション後に表示されます。リストは通常??、ブロック狀のコンテンツ（つまりオプション）の形で他のコンテンツを上書きします。

多くのインターフェイス要素はドロップダウンリストのように見えますが、単にそれらを「ドロップダウンリスト」と呼ぶことは、「魚」のある動物を説明するのと同じくらい一般的です。メニュー、ナビゲーション、および選択要素の3つの異なるタイプのドロップダウンリストを區(qū)別する必要があります。

• メニュー：ユーザーがページコンテンツで実行できるコマンドまたはアクションのリスト。
• ナビゲーション： Webサイトナビゲーションに使用されるリンクのリスト。
• 選択：フォームコントロール（<select></select> ）、フォームのユーザー選択のオプションのリストを表示するために使用されます。

ユーザーごとにインターフェイスを認識して対話する方法は異なるため、UI要素の命名とデザインパターンの定義に主観性があります。

<menu></menu>要素は非推奨であり、推奨されません。付屬のメニューおよびメニューボタンの詳細な手順、およびARIAメニューの役割をサイトナビゲーションに使用しない理由については、関連するリソースを參照してください。

私たちは焦點を合わせます<select></select>要素のドロップダウンリストタイプ。

<select></select>要素のスタイルの課題

MDNによると、3つの狀況があります：「良い、悪い、醜い」。<select></select>要素は間違いなく「ugい」のカテゴリーに分類され、そのスタイリングサポートは不十分であり、開発者はしばしば代替を求めます。

理想的には、避けることができれば<select></select>、避けるべきです。ただし、場合によっては<select></select>多くのオプション、限られたレイアウトスペース、または不十分な時間/予算など、最良の選択肢がまだあります。

カスタマイズ<select></select>需要

カスタムを作成します<select></select>次の要件を満たしている場合：

• ボタンには、現(xiàn)在選択されているオプションが表示されます。
• ボタンをクリックして、オプションリストの可視性を切り替えます。
• オプションリストをクリックすると、選択した値が更新され、ボタンテキストがそれに応じて変更され、オプションリストが閉じます。
• コンポーネントの外側(cè)をクリックすると、オプションのリストが閉じられます。
• トリガーには、オプションが存在することを示す下向きの三角形のアイコンが含まれています。

ただし、これはいくつかのニーズを満たしています。ネイティブ<select></select>要素は、次の機能も提供します。

• ユーザーの視覚能力に関係なく、選択したオプションがはっきりと表示されます。
• コンポーネントは、予測可能な方法でキーボードと対話することができます（たとえば、矢印キーを使用してナビゲートし、キーを選択して選択し、キーをエスコンするなど）。
• 支援技術(shù)（スクリーンリーダーなど）は、役割、名前、ステータスなど、ユーザーに要素を明確に発表することができます。
• オプションリストの位置を調(diào)整します（つまり、畫面でクリップされません）。
• 要素は、ユーザーのオペレーティングシステムの好み（高いコントラスト、配色、アニメーションなど）に準拠しています。

多くのカスタマイズ<select></select>これらのニーズを完全に満たすことができないコンポーネントはありません。

「ハイブリッド」セレクターを構(gòu)築します

簡単なカスタマイズを作成します<select></select>美學と引き換えに機能を犠牲にします。より良い方法は、デフォルトでネイティブを提供することです<select></select>、可能な場合は、より美しいカスタムバージョンに置き換えます。これは、「ハイブリッド」セレクターの哲學です。 2つのセレクターが含まれています。

• ネイティブ<select></select>、表示可能でデフォルトでアクセス可能です。
• カスタマイズ<select></select>、デフォルトで隠され、マウスを使用するときにのみ表示されます。

HTML構(gòu)造の例は次のとおりです。

<label for="selectNative">主な仕事の役割</label>
<div>
  <select id="selectNative" class="selectNative">
    <option value="1">オプション1</option>
    <option value="2">オプション2</option>
  </select>
  <div class="selectCustom">
    
  </div>
</div>

CSSコードは、2つのセレクターの表示と位置を制御するために使用されます。

 .Selectnative、
.SelectCustom {
  位置：相対;
  幅：22レム;
  高さ：4rem;
}

.SelectCustom {
  位置：絶対;
  上：0;
  左：0;
  表示：なし;
}

@media（Hover：Hover）{
  .SelectCustom {
    表示：ブロック;
  }
  .Selectnative：Focus .SelectCustom {
    表示：なし;
  }
}

JavaScriptコードは、クリックイベントを処理し、2つのセレクターの値を同期し、キーボードナビゲーションに同期するために使用されます。

ユーザビリティテスト

障害のある人を含む小さな使いやすさテストを?qū)g施し、異なる機器と支援技術(shù)を使用してテストしました。テスト結(jié)果は、この方法が機能することを示していますが、より広範なテストがまだ必要です。

この方法の利點は次のとおりです。

• モバイルおよびタブレットユーザーはネイティブになります<select></select>、より良いユーザーエクスペリエンスとパフォーマンスを提供します。
• キーボードユーザーは、予想される方法でネイティブになることができます<select></select>交流。
• 支援技術(shù)は、通常のようにネイティブにすることができます<select></select>交流。
• マウスユーザーは、でカスタマイズを強化することができます<select></select>交流。

この方法は、すべてのネイティブ機能を?qū)g裝するための追加作業(yè)を必要とせずに、すべてのユーザーに必要なネイティブ機能を提供します。

ただし、このアプローチは全能ではなく、単純なセレクターで動作し、複雑な相互作用には機能しない場合があります。

同様のメニューのセレクターについて

セレクターに常に選択されたオプション（コンテンツのソートなど）がある場合、ネイティブを使用できます<select></select>または、メニューをカスタマイズします。 WCAG 3.2.2の入力基準に注意してください：

ユーザーインターフェイスコンポーネントの設(shè)定を変更すると、コンポーネントを使用する前にユーザーがその動作を通知されない限り、コンテキストの変更を自動的に引き起こすべきではありません。

この基準を満たすには、ユーザーインタラクションの前にユーザーに警告するか、セレクターの後に手順を追加する必要があります。

結(jié)論

本當にアクセス可能なセレクターコンポーネントを構(gòu)築することは、見た目よりも難しいです。 「ハイブリッド」セレクターは、その美學を維持しながら、可能な限り多くのネイティブ機能を取得しようとする1つの方法です。リソースが許可されている場合は、コンポーネントをリリースする前に適切なテストを?qū)g行してください。

「ドロップダウンリスト」コンポーネントを作成するときは、正しい名前を使用することを忘れないでください。 ？

以上がネイティブとカスタム選択要素のバランスをとるの詳細內(nèi)容です。詳細については、PHP 中國語 Web サイトの他の関連記事を參照してください。