素晴らしい開発者の皆さん、こんにちは！この投稿では、セマンティック HTML と、 :focus-withinを選択します。 :focus-within このクラスを使用すると、フォーカスを適切に制御でき、ユーザーにエクスペリエンスのまさにここが現在の場所であることを知らせることができます。本題に入る前に、Web アクセシビリティとは何かという核心を理解しましょう。
フォームのアクセシビリティ?
おそらく、「アクセシビリティ」という用語や数字の a11y という言葉をあちこちで聞いたことがあるでしょう。それはどういう意味ですか？それはたくさんの答えがある素晴らしい質問です。物理的な世界に目を向けると、アクセシビリティとは、会社のバスルームに鋭利物容器を設置すること、車椅子を使用する人のためのスロープを確実に設置すること、必要な人のために大きな印刷キーボードなどの周辺機器を手元に用意することなどを意味します。
アクセシビリティの範囲はそれだけではありません。外部ユーザーだけでなく、社内の同僚に対しても認識する必要があるデジタル アクセシビリティがあります。 色のコントラストは簡単に実現できます 芽を摘むことができるはずです。私たちの職場では、従業員がスクリーン リーダーなどの支援技術を必要とする場合には、それを設置して利用できるようにしています。考慮しなければならないことがたくさんあります。この記事では、Web アクセシビリティに焦点を当てて、 WCAG (Web コンテンツ アクセシビリティ ガイドライン) 心である。
:focus-withinCSS 疑似クラスは、要素またはその子孫がフォーカスされている場合に要素と一致します。言い換えれば、それ自体が :focus 疑似クラスと一致する要素、または :focus と一致する子孫を持つ要素を表します。 (これにはシャドウ ツリーの子孫も含まれます。)
この疑似クラスは、ユーザーが実際に要素と対話していることを強調したい場合に非常に役立ちます。たとえば、フォーム全体の背景色を変更できます。または、フォーカスが入力に移動した場合、その入力にフォーカスが移動したときに入力要素のラベルを太字にして大きくすることができます。以下のコード スニペットと例で起こっていることは、フォームをアクセシブルにしていることです。 :focus-within これは、CSS を有利に使用できる 1 つの方法にすぎません。
集中する方法
アクセシビリティと Web エクスペリエンスに関して言えば、フォーカスは、ページ上、UI 内、またはコンポーネント内で何かが操作されていることを示す視覚的なインジケーターです。 CSS は、インタラクティブな要素がいつフォーカスされているかを知ることができます。
「
:focusCSS 疑似クラスは、フォーカスを受け取った要素 (フォーム入力など) を表します。通常、ユーザーが要素をクリックまたはタップするか、キーボードの Tab キーで要素を選択するとトリガーされます。」
フォーカス インジケーターまたはフォーカス可能な要素の周囲のリングが、エクスペリエンスを通じて適切な色のコントラストを維持していることを常に確認してください。
フォーカスは次のように書かれており、スタイルを選択した場合は、ブランドに合わせてスタイルを設定できます。
:focus {
* / INSERT STYLES HERE /*
}何をするにしても、アウトラインを次のように設定しないでください。 0 or none。そうすると、エクスペリエンス全体を通じて全員に表示されるフォーカス インジケーターが削除されます。フォーカスを削除する必要がある場合は削除できますが、後で必ず追加し直してください。 CSS からフォーカスを削除するか、アウトラインを 0 or none、すべてのユーザーのフォーカス リングが削除されます。これは、CSS リセットを使用するときによく見られます。 CSS をリセットすると、スタイルが空白のキャンバスにリセットされます。このようにして、空のキャンバスを操作して、希望どおりにスタイルを設定することができます。 CSS リセットを使用したい場合は、チェックアウトしてください ジョシュ・コモーのリセット.
※以下のことは絶対に行わないでください。
:focus {
outline: 0;
}
:focus {
outline: none;
}
内を見てください！
CSS を使用してフォーカスのスタイルを設定する最もクールな方法の 1 つが、この記事の内容です。チェックアウトしていない場合は、 :focus-within 疑似クラス、ぜひ見てください。セマンティック マークアップと CSS の使用に関しては、隠れた宝石がたくさんあります。これはそのうちの 1 つです。見落とされているものの多くはデフォルトでアクセス可能です。たとえば、セマンティック マークアップはデフォルトでアクセス可能であり、常に div 上で使用する必要があります。
<header>
<h1>Semantic Markup</h1>
<nav>
<ul>
<li><a href="/ja/">Home</a></li>
<li><a href="/ja/about">About</a></li>
</ul>
</nav>
</header>
<section><!-- Code goes here --></section>
<section><!-- Code goes here --></section>
<aside><!-- Code goes here --></aside>
<footer><!-- Code goes here --></footer> header, nav, main, section, aside, footer はすべて意味要素です。の h1 & ul セマンティックでありアクセス可能でもあります。
作成する必要があるカスタム コンポーネントがない限り、 div と組み合わせて使用しても問題ありません ARIA (アクセス可能なリッチ インターネット アプリケーション)。 ARIA については、後の投稿で詳しく説明します。ここでは、この CSS 疑似クラスに焦点を当ててみましょう...私がそこで何をしたかを見てみましょう。
:focus-within 疑似クラスを使用すると、それに含まれる子孫要素にフォーカスがあるときに要素を選択できます。
:focus-within 活動中！
HTML
<form>
<div>
<label for="firstName">First Name</label><input id="firstName" type="text">
</div>
<div>
<label for="lastName">Last Name</label><input id="lastName" type="text">
</div>
<div>
<label for="phone">Phone Number</label><input id="phone" type="text">
</div>
<div>
<label for="message">Message</label><textarea id="message"></textarea>
</div>
</form>CSS
form:focus-within {
background: #ff7300;
color: black;
padding: 10px;
}上記のコード例では、背景色にオレンジを追加し、パディングを追加して、ラベルの色を黒に変更します。
最終的な製品は以下のような感じです。もちろん、スタイルを変更する可能性は無限にありますが、これにより、Web を誰にとってもアクセスしやすくするための良い軌道に乗ることができるはずです。
使用する別のユースケース :focus-within 弱視のユーザーのためにラベルを太字にしたり、別の色にしたり、拡大したりすることになります。そのサンプルコードは以下のようになります。
HTML
<form>
<h1>:focus-within part 2!</h1>
<label for="firstName">First Name: <input name="firstName" type="text" /></label>
<label for="lastName">Last Name: <input name="lastName" type="text" /></label>
<label for="phone">Phone number: <input type="tel" id="phone" /></label>
<label for="message">Message: <textarea name="message" id="message"/></textarea></label>
</form>
CSS
label {
display: block;
margin-right: 10px;
padding-bottom: 15px;
}
label:focus-within {
font-weight: bold;
color: red;
font-size: 1.6em;
}
:focus-within によると、ブラウザ全体のサポートも優れています 使ってもいいですか.
まとめ
ソフトウェアを外部だけでなく内部に出荷する場合も、驚くほどアクセスしやすいユーザー エクスペリエンスを作成することが常に最優先事項である必要があります。私たち開発者は、上級リーダーに至るまで、他の人が直面している課題と、Web プラットフォームをより良い場所にするために Web プラットフォームの大使になれる方法を認識する必要があります。
セマンティック マークアップや CSS などのテクノロジーを使用して包括的なスペースを作成することは、Web をより良い場所にするために重要な部分です。前進を続け、生活を変えていきましょう。
ここの CSS-Tricks に関する別の優れたリソースをチェックしてください。 :focus-within を使用する.
- SEO を活用したコンテンツと PR 配信。 今日増幅されます。
- PlatoData.Network 垂直生成 Ai。 自分自身に力を与えましょう。 こちらからアクセスしてください。
- プラトアイストリーム。 Web3 インテリジェンス。 知識増幅。 こちらからアクセスしてください。
- プラトンESG。 カーボン、 クリーンテック、 エネルギー、 環境、 太陽、 廃棄物管理。 こちらからアクセスしてください。
- プラトンヘルス。 バイオテクノロジーと臨床試験のインテリジェンス。 こちらからアクセスしてください。
- 情報源： https://css-tricks.com/accessible-forms-with-pseudo-classes/
