:user-valid、:user-invalid 擬似クラスでユーザーの操作の後に検証を行う
:user-valid、:user-invalid 擬似クラスでユーザーの操作の後に検証を行う 2023.10.13 ユーザーの操作の後にフォームの検証に基づき有効か無効かを示すために使用できる :user-valid、:user-invalid 擬似クラスを紹介します。従来の :valid、:invalid 擬似クラスと異なり、ユーザーがフォームに入力するまではスタイルを適用されません。 :user-valid、:user-invalid 擬似クラスは、ユーザーの操作の後フォームの検証に基づき有効か無効かを示すために使用できます。フォームの検証として、以下のような例があげられます。 required 属性を指定した要素に値が入力されているか pattern 属性を指定した要素に指定した正規表現にマッチしているか min や max 属性を指定した要素に指定した範囲内の値が入力されているか
aria-label を使いすぎない
aria-label を使いすぎない 2023.06.25 aria-label 属性はコンテンツに対してアクセシブルな名前を与えるために使用します。aria-label 属性を使用する代表例として、中身がアイコンのボタンがあげられます。aria-label 属性は手軽に使えますが、できる限り一般的な形式でテキストを提供することが望ましいです。 aria-label 属性はコンテンツに対してアクセシブルな名前を与えるために使用します。aria-label 属性を使用する代表例として、中身がアイコンのボタンがあげられます。<button> 要素はデフォルトではコンテンツの中身がアクセシブルな名前として使われます。しかし、アイコン要素は通常テキストを持たないため、アクセシブルな名前を持たないことになります。アクセシブルな名前を持たない要素は、単にボタンであることしかスクリーンリーダーを利用する
今すぐできる Web アクセシビリティ改善
適切なロールを持った要素を適切な箇所で使うことが大切です。 button ロールを持つ要素は大抵のスクリーンリーダーで「${ボタン内のテキスト} ボタン」のように読み上げられます。その後現在ボタン上にいて、ボタンをクリックできるということが読み上げられます。 以上のことより、onClick がついていてクリック可能な要素には大抵 <button> を使っておけばいいことがわかります。 <button> に変更するときの注意 <div> や <span> タグをそのまま <button> に変更すると、思わぬ変化が起きてしまう可能性があるので注意が必要です。まず <button> に変更するとブラウザのデフォルトのスタイルが適用されるので、見た目が大きく崩れてしまいます。以下のようにデフォルトのスタイルを打ち消す CSS を適用させて置くといいでしょう。 .style-reset-butto
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
