クリスのコーナー：リスト – Codepen

時々良いol ‘ リスト 私たちが必要とするものです。私は知っています、私は知っています、 これ 永遠に真実です。しかし、私の友人として デイブ 言いたくない： ニュアンスを排除します。あなたがあなたの入力にマッチすることによってあなたの入力にラベルを付けるべきなら、世界はニュアンスを必要としません for のラベルの属性 id 入力の。あなたはそれをするべきです。 いつも。

Rauno Freibergには、ニュアンスをスワイプする素晴らしいリストがあります。 Webインターフェイスガイドライン （また githubで）。ここにいくつかあります：

トグルはすぐに有効になり、確認は必要ありません

垂直または水平リストのインタラクティブな要素は、各要素間に死んだ領域を持たないはずです。 padding

グラデーションテキストは勾配を設定する必要があります ::selection 州

400未満のフォントウェイトは使用しないでください

私がリストを読んでいるとき、私の 実際に 指は飛ぶ準備ができています。しかし、いや、私はそれをホルスターします。結局のところ、リストには言います ガイドライン ない ルール そして、たとえ彼らがルールとみなされたとしても、世界はおそらく盲目的に順守するためにそれのために良いでしょう。あなたが何をしているのかを知ったら、それらを壊してください。

よく述べたように、アクセシビリティはチェックリストではありません。 butttt チェックリスト 物事をキックスタートし、針を正しい方向に動かすのに役立ちます。

フォームは、UXとセキュリティのトリッキーな場所は言うまでもなく、正しいアクセスの重要な側面です。デイブといえば、彼はかなり良いリストです 良い形 それらの1つです。ほんの一握りの数十を取ります：

優れたフォームにはフォーカス状態があります

優れたフォーム要素が活用されます inputmode 属性

良いフォームは、クライアントとサーバーで検証します

優れたフォームは、飛行前のチェックを行う必要があります navigator.onLine 提出する前に

良い形は赤ん坊のイエスを笑顔にします

最近では、デイブのリスト Webコンポーネントが輝く場所 リストのもう1つの完璧な使用です。

通常のASS HTMLを徐々に強化するため – これはとても上手です。

コンポーネントがさまざまなハイテクスタックに存在する必要がある場合 – 会社が独自の技術スタックを選択させたり、会社が他の企業を買収したり、プロジェクト間でUIの一貫性を少し必要としている場合、Webコンポーネントは最適です。

ビルドツールなしでサイトを作成したい場合 – 通常、ツールのビルドは出発点ではありません ほとんどのWebコンポーネントプロジェクトの場合。

その最後のものは、WebコンポーネントをかなりCodepenフレンドリーにします。

Webコンポーネントはいつ良くないのですか？多くの理由もあります。私は何度もスタイリングストーリーを踊りました。しかし、もう1つあります。1つのWebアプリを構築している場合、コンポーネントを配布する必要はなく、すでにJavaScriptフレームワークを使用しています。

実際に4つあることをご存知ですか 正式 アクセシビリティの原則？私はしませんでした ジェレミー・キースはそれらをレイアウトしました 最近彼のテイクで。

深呼吸をして集中することをお勧めします アクセシビリティの4つの原則。一緒に、彼らはかわいい頭字語を注ぐものを綴ります：

1. 知覚可能
2. 操作可能
3. 理解できる
4. 屈強

私は自分自身を助けることはできませんが、CSSの1つに忍び込んでください： ReactコードをCSSに置き換える：セレクターを持っています ナディア・マクレビッチから。それには 待って、何？ ReactとCSSはテクノロジーのビットがまったく異なるため、タイトルに感じますが、ナディアはいくつかの良い点を作ります。ほとんどの場合、状態の論理が進むことができる場所です。私はの大ファンです :has() そして、CSSはほぼ間違いなくよりパフォーマンスの高い選択になります。それでも、関連するHTMLからデカップされた複雑なCSSセレクターよりも、少し基本的なJSXロジックが少しきれいに読み取ることができることを認めなければなりません。

私たちはリストについて話しているので、基本的にこれをハロウィーンで書いているので、このHTMLは完全に有効で有効であることを思い出してください：

  
List Item
  
List Item
  
List Item