あなたがどこに住んでいるか

あなたが知らない場合はfocus-visible CSSセレクタでは、キーボードの相互作用によってフォーカスされているDOM要素をターゲットにすることができますfocus それはすべてのフォーカス要素を対象とします.

なぜ我々は第一にその区別が必要ですか？

それはすべてアクセシビリティ(A 11 Y)で始まる.ユーザーがマウスまたは電話で閲覧しているならば、彼らは彼らがクリックしているものを正確に知っています.彼らはそれについての手がかりを必要としない、それは気晴らしになるかもしれない.
しかし、それはキーボードユーザーのための非常に異なった物語です.ちょっと考えてみよう、赤ちゃんを運ぶ父、手に怪我をした人、マウスを使用するのを無効にする一時的あるいは慢性的な健康状態の人々.たくさんあるthem そこには、ターゲットの観客にそれらを含める必要があります.Steve Krugが言うように、それはまさに正しいことです!言い訳なし.
試していない場合は、タブキーを使用してそこを参照してください.あなたは、一歩一歩を示す視覚的なフィードバックが必要になります.一部の人々は、Twitterのように、これは非常に良いですが、現実には、我々は最初の場所でもキーボードのみのナビゲーションを計画していないことがあります.
だから迅速な要約:私たちの方法を我々のキーボードの人々は、我々のアプリに焦点を当てている要素を伝える必要があります.ここで我々のベストバディfocus-visible セレクタが再生に来た.もモダンなブラウザでサポートされているそれはCSSのプレイグラウンドで新しいです.それで、我々はより互換性のある方法でものをセットするつもりです.

さあ、これを起こしましょう！

あなたはこれを見つけることができますrepo Gitthubで、それをクローンに自由に感じなさい.
また、ライブ版をチェックすることができますhere .
私は使うつもりですNuxt.js and Tailwind これらは私のお気に入りのツールですが、あなたはすべてのプロジェクトにここで学ぶものを適用することができます.ここのシーンの後の本当の英雄はfocus-visible Polyfill .
だから新しいnuxt-app (まだtarwindを選択しない)

npx create-nuxt-app focus-visible-sample

独自にインストールする

cd focus-visible-sample
yarn add -D @nuxtjs/tailwindcss tailwindcss@npm:@tailwindcss/postcss7-compat @tailwindcss/postcss7-compat postcss@^7 autoprefixer@^9

また、ポリフィルとPostcssプラグインをインストールして、より簡単に動作できるようにします.

yarn add focus-visible postcss-focus-visible

必ずあなたのページの実際のポリフィルを束ねてください.
Nuxtはからの静的資産を提供しますstatic あなたのプロジェクトのフォルダをオフにするので、私はそこにポリフィルファイルをクローンしますscripts フォルダ.あなたは彼を見つけることができますnode_modules/focus-visible/dist/focus-visible.min.js . 私もクローン.map ブラウザの開発コンソールで役に立たない警告を避けるためのバージョン.
あなたが何をしなければならないかについて、私はNuxt Configファイルを使用します💚️ そのフレームワーク.

/* nuxt.config.js */

export default {
   head: {
       script: [
               { src: '/scripts/focus-visible.min.js', async: true, defer: true }
       ],
   }
}

私は私のTailwindユーティリティと一緒にそれを使用したいので、私はPostcssプラグインを追加しますが、あなたはちょうどポリフィルのアドバイスを使用して微調整されますREADME .
私はプラグインを追加しますnuxt postcss config :

/*  nuxt.config.js  */
export default {
   // ...
   postcss:{
       plugins:{
           'postcss-focus-visible': {}
       }
   }
}

もちろん、もちろん風を設定する必要があります.

/*  nuxt.config.js  */
buildModules: [
    // https://go.nuxtjs.dev/tailwindcss
    '@nuxtjs/tailwindcss',
  ],

Tailwind設定を設定する時:

npx tailwind init

' Focus Visible 'バリアントはデフォルトでoff 手動で入手してください.
私はターゲットになるでしょうring ユーティリティは、私たちのUIで必要な正確な効果からです

/* tailwind.config.js  v2.x */

module.exports = {
   //...
   variants: {
       extend: {
           ringColor: ['focus-visible'],
       },
 },
}

すべては、いくつかのペアプログラミングを行いましょう！

私のホームページで(pages/index.vue) 私はこのフォームをクラフトしています.

   <form class="mt-10 w-full max-w-sm" @submit.prevent="">
       <fieldset>
         <label for="petName" class="block ml-4">Pet Name</label>
         <input
           id="petName"
           type="text"
           placeholder="type your pet name here"
           class="block mt-2 px-4 py-2 w-full rounded-lg bg-gray-700 shadow-md focus:outline-none  focus:ring-2 focus:ring-indigo-600"
         />
       </fieldset>

       <div class="mt-6 w-full ">
         <button
           type="submit"
           class="py-2 w-full px-4 rounded-lg bg-indigo-700 hover:bg-indigo-800 shadow-lg focus:outline-none focus-visible:ring-2 focus-visible:ring-indigo-400"
         >
           Get your Free Food
         </button>
       </div>
   </form>

よく見る.
入力ではfocus:outline-none ユーティリティは、ブラウザのデフォルトのアウトラインを削除する場合は、それを置き換えるつもりはない、そこに残して、それは何よりも優れています.それから私はfocus:ring ユーティリティは誰にとっても、それがテキスト入力であるので、我々がどこに書くつもりであるかについて示すのに役に立つことができることを示します.
しかし、送信ボタンを使用しているfocus-visible 代わりにユーティリティを使用すると、リングを4つだけ私たちのキーボードユーザー、この場合に実際に必要なものをレンダリングすることができます.自分でチェックしてください.マウス提出のためのリングがありません.しかし、あなたがそれを見るタブを打つならば.デフォルトのセレクタ文字列にマッチしますfocus-visible ポリフィルは期待している.
あなたがアクセシビリティに深いダイビングをしたいならばawesome リソースそれは私があなたに嘘をつく少し余分な仕事です.しかし、私はそれを必要とするユーザーに多大な影響を与える;そして、しばしば皆のための経験を改善します.これらのキャプション準備ビデオのような人々のためのメディアを聞くことができないだけでなく、その言語を理解することができない人のためにメディアを提供します.そして、それについての品質のワークショップをしたい場合は、チェック“Accessibility in JavaScript Applications” マーシーサットンによって.それは私が最初にこのようなものを学び始めた場所でした.A 11 Y世界に私を紹介するために、慈悲をありがとう.
それは私の友人、そこに行くと良いものを工芸.あなたのユーザーはあなたのハードワークに感謝します.あなたが何かを疑うか、何かを言いたいならば、私にツイートを送ってください

便利なリンク

Nuxt docs
Tailwind docs
Focus Visible Repo
WebAim