タブ：IT＆＃039; s Clumplicted™

ジュニアフロントエンドの開発者がJavaScriptを学習するとき、スイッチングクラス名をマスターすることは高速で効果的なテクニックです。

 const button = document.queryselector（ "。my-button"）;
const element = document.queryselector（ "。content"）;

button.addeventlistener（ "click"、function（）{
  element.classlist.toggle（ "Sparkles"）;
}）;

このトリックを使用して、タブを作成できます。

簡単な実装

クラス名を切り替えるスキルを習得した場合、タブインターフェイスを構築する必要があります。コードを追加してクリックイベントを処理して、次のような単純なタブを実装します。

これらのタブは完全に利用可能です。アンカーリンクを使用して、リンクとタブ領域の間にジャンプリンクを作成しますが、これは意味的に合理的です。タブにはキーボードからアクセスでき、フォーカススタイルがあり、リターンキーを使用してアクティブ化できます。

しかし、これで十分ですか？完璧なタブ？

簡単ではありません

問題は、キーボード処理のために特別な治療を行わないことであり、タブインターフェイスにはキーボード処理が必要になる場合があります。ヘイドンピカリングはこれを説明しています：

同じページへのリンクとは異なり、タブはユーザーを関連するコンテンツ領域/パネルに移動しません。コンテンツを視覚的に表示するだけです。これは、毎回ページの上部に戻ることなく異なる領域を切り替えたいユーザー（スクリーンリーダーを使用する人を含む）に有益です。

これにより、不幸な副作用がもたらされます。ユーザーがキーボードを介してエリアに移動し、内部コンテンツと対話したい場合、焦点を合わせて配置された現在のタブの右側にすべてのタブを順次通過する必要があります。

タブインターフェイスで考慮すべき他の多くの動作的な側面があることがわかります。 Heydonの説明では、 TABキーは、タブ自体からそのタブに関連するものにジャンプする方法として実際に使用でき、焦点を移動できます。シフトタブはフォーカスを戻します。次に、矢印キーを使用してタブを変更します。これらすべてには、より多くのJavaScript、さらにはFocus Stateを許可するためにHTMLが必要です。

最終結果は次のとおりです。

質問は次のとおりです。クラス名をWebに有害に切り替えるスキルは、これらの側面を考慮していないためですか？基本的なツールを使用すると、Webのアクセシビリティが損なわれますか？わからない。この問題は私には大きすぎます。ただし、これは考える価値のある質問です。

筋肉の記憶

誰も私たちをそうすることで私たちを批判していない限り、最初に最初のデモのようなタブを書くことを学ぶ場合、何度も何度も使用します。何度もやったので、デモを約3分で書きました。これらのタブを作成することは、間違いなく私の筋肉の記憶の一部です。

多くの人々は、JavaScriptフレームワークがウェブ上の惨劇だと考えています。なぜなら、彼らは最悪のアクセシビリティの時代をリードしているように見えるからです。しかし、タブを構築する筋肉の記憶が事前に構築されたタブUIを使用する場合、それはすべての適切な機能をもたらし、主にスタイルを残しますか？

これは、Reach UIタブです（React ...を使用すると仮定します...）。

無料のタブを取得するためにプロジェクトを切り替えるように求めているわけではありませんが、Reactはすでに巨大です。このような良いモードが事実上の選択になる場合、その効果はアクセシビリティに対する純利益になる可能性があります。少なくとも私にとっては可能です。 359回目の間、タブインターフェイスを手動で書くことができなくなる可能性があります。

以上がタブ：IT＆＃039; s Clumplicted™の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。