Skip to content

Commit

Permalink
Update index.md
Browse files Browse the repository at this point in the history
文法の修正、置換「認知"症の" -> "機能に障害を持つ"人」
  • Loading branch information
MaruniUmebachi authored Jan 16, 2025
1 parent 48748da commit 5287d78
Showing 1 changed file with 7 additions and 7 deletions.
14 changes: 7 additions & 7 deletions files/ja/web/css/_doublecolon_placeholder/index.md
Original file line number Diff line number Diff line change
Expand Up @@ -30,9 +30,9 @@ l10n:

#### コントラスト比

プレイスホルダー文字列はふつう、どのような入力が正しいかを示すものであり、実際の入力ではないことを示すために、薄い色になっています。
プレイスホルダー文字列はふつう、どのような入力が正しいかという例を示すものであり、実際の入力ではないことを示すために、薄い色になっています。

プレイスホルダー文字列と入力欄の背景色のコントラスト比が、弱視の人が読むことができるために十分であることと同時に、プレイスホルダー文字列と入力テキストの差が違いが十分であり、プレイスホルダーが入力されたデータと誤認しないようになっていることを確認することが重要です
プレイスホルダー文字列と入力欄の背景色のコントラスト比について確認すべき重要なことは、弱視の人が読むことができるために十分であることと同時に、プレイスホルダー文字列と入力テキストの差が違いが十分で、プレイスホルダー文字列が入力された文字列だと誤認されないようになっていることです

色のコントラスト比は、プレイスホルダー文字列と入力欄の背景色の値とを比較することで決定されます。現在の[ウェブコンテンツアクセシビリティガイドライン (WCAG)](https://www.w3.org/WAI/standards-guidelines/wcag) によれば、文字列コンテンツで 4.5:1 以上、見出しのような大きめの文字列で 3:1 以上のコントラスト比が求められています。大きめの文字列とは、太字ならば 18.66px 以上、または 24px 以上と定義されています。

Expand All @@ -42,11 +42,11 @@ l10n:

#### ユーザビリティ

プレイスホルダー文字列のコントラストが十分に高いと、入力された値と誤解される可能性があります。プレイスホルダー文字列は人間が {{htmlelement("input")}} 要素の中にコンテンツを入力すると、消滅するものでもあります。どちらも、特に認知症の人にはフォームの入力を完了させるのに困難を伴う可能性があります
コントラストが十分に高いプレイスホルダー文字列とは、すでに入力された文字列と誤解される可能性があるものです。またプレイスホルダー文字列とは、人間が {{htmlelement("input")}} 要素の中にコンテンツを入力すると、消滅するものでもあります。いずれにしろ、特に認知機能に障害を持つ人にとっては、フォームの入力を完了させるときに、困難を伴う可能性があります

プレイスホルダー情報を提供するには、他にも入力欄の外側で視覚的に近いところに表示し[`aria-describedby`](/ja/docs/Web/Accessibility/ARIA/Attributes/aria-describedby) を使用して {{HTMLElement("input")}} とヒントをプログラム的に関連付ける方法もあります。
プレイスホルダーの情報を提供する他の方法としては、入力欄の外側で視覚的に近いところに表示し[`aria-describedby`](/ja/docs/Web/Accessibility/ARIA/Attributes/aria-describedby) を使用して {{HTMLElement("input")}} とヒントをプログラム的に関連付ける方法もあります。

この実装方法では、上方が入力欄に入力されてもヒントを見ることができ、ページが読み込まれたときに既に入力されているように見えることがありません。多くの読み上げ技術は `aria-describedby` を使用して、入力欄のラベルのテキストを読み上げた後でヒントを読み上げ、読み上げソフトを使用している人は、追加情報が必要なければ読み上げを抑止することができます。
この実装方法では、情報が入力欄に入力されてもヒントを見ることができ、なおかつページが読み込まれたときに既に文字列が入力されているように見えることがありません。多くの読み上げ技術は `aria-describedby` を使用して、入力欄のラベルのテキストを読み上げた後でヒントを読み上げ、読み上げソフトを使用している人は、追加情報が必要なければ読み上げを抑止することができます。

```html
<label for="user-email">Your email address</label>
Expand All @@ -62,11 +62,11 @@ l10n:

### Windows 高コントラストモード

プレイスホルダー文字列は、 [Windows 高コントラストモード](https://www.smashingmagazine.com/2022/06/guide-windows-high-contrast-mode/)では、ユーザーが入力した文字列と同じスタイルで表示されます。これは人によっては、中身が入力されたものか、それとも中身がプレイスホルダー文字列かを見分けることが難しくなります
プレイスホルダー文字列は、[Windows 高コントラストモード](https://www.smashingmagazine.com/2022/06/guide-windows-high-contrast-mode/)では、ユーザーが入力した文字列と同じスタイルで表示されます。人によってはこれにより、中身が入力された文字列なのか、それとも中身がプレイスホルダー文字列なのかを見分けることが困難になります

### ラベル

プレイスホルダーは {{htmlelement("label")}} 要素の置き換えではありません。 [`for`](/ja/docs/Web/HTML/Element/label#for) および [`id`](/ja/docs/Web/HTML/Global_attributes#id) 属性の組み合わせを使用して入力欄とプログラム的に関連付けが行われていないラベルがないと、読み上げソフトのような支援技術が {{htmlelement("input")}} 要素を解釈できなくなります。
プレイスホルダーは {{htmlelement("label")}} 要素の置き換えではありません。 [`for`](/ja/docs/Web/HTML/Element/label#for) および [`id`](/ja/docs/Web/HTML/Global_attributes#id) 属性の組み合わせを使用し、入力欄とプログラム的に関連付けが行われていないラベルでは、読み上げソフトのような支援技術が {{htmlelement("input")}} 要素を解釈できなくなります。

- [Placeholders in Form Fields Are Harmful — Nielsen Norman Group](https://www.nngroup.com/articles/form-design-placeholders/)

Expand Down

0 comments on commit 5287d78

Please sign in to comment.