diff --git a/src/guide/a11y-semantics.md b/src/guide/a11y-semantics.md index 691dead8..d64c68f1 100644 --- a/src/guide/a11y-semantics.md +++ b/src/guide/a11y-semantics.md @@ -21,7 +21,7 @@ ``` - + どのように `autocomplete='on'` をフォーム要素上に含むことができるかに注目してください。そしてそれはフォーム内の全ての入力欄に適用されます。また各入力欄の [autocomplete 属性に対して異なる値](https://developer.mozilla.org/ja/docs/Web/HTML/Attributes/autocomplete)をセットすることもできます。 @@ -34,7 +34,7 @@ ``` - + chrome デベロッパツールでこの要素を検証し、Elements タブ内の Accessibility タブを開くと、どのように入力欄がその名前をラベルから取得するかを確認できます: @@ -68,7 +68,7 @@ chrome デベロッパツールでこの要素を検証し、Elements タブ内 /> ``` - + この要素を Chrome DevTools で自由に検証し、どのようにアクセス可能な名前が変更されたか確認してください: @@ -76,7 +76,7 @@ chrome デベロッパツールでこの要素を検証し、Elements タブ内 #### aria-labelledby -[`aria-labelledby`](https://developer.mozilla.org/ja/docs/Web/Accessibility/ARIA/ARIA_Techniques/Using_the_aria-labelledby_attribute) は `aria-label` に類似しており、ラベルテキストが画面に表示されている場合に使用されることを期待します。これは `id` によって他の要素とペアになっており、複数の `id` を関連付けることができます: +[`aria-labelledby`](https://developer.mozilla.org/ja/docs/Web/Accessibility/ARIA/ARIA_Techniques/Using_the_aria-labelledby_attribute) の使用法は、ラベルテキストが画面に表示されている場合に使用されることを除けば、`aria-label` に似ています。これは `id` によって他の要素とペアになっており、複数の `id` を関連付けることができます: ```html
``` - + ![aria-labelledby からアクセス可能な入力欄の名前を表示する Chrome デベロッパツール](/images/AccessibleARIAlabelledbyDevTools.png) #### aria-describedby -[aria-describedby](https://developer.mozilla.org/ja/docs/Web/Accessibility/ARIA/ARIA_Techniques/Using_the_aria-describedby_attribute) は `aria-labelledby` と同じ方法で使用され、ユーザが必要とする可能性のある追加情報と説明を提供します。これは任意の入力欄の基準を説明するために使用することができます: +[aria-describedby](https://developer.mozilla.org/ja/docs/Web/Accessibility/ARIA/ARIA_Techniques/Using_the_aria-describedby_attribute) は、ユーザが必要とする可能性のある追加情報と説明を提供することを除けば、 `aria-labelledby` と同じ方法で使用されます。これは任意の入力欄の基準を説明するために使用することができます: ```html ``` - + Chrome DevTools で検出することで Description を確認することができます: @@ -144,7 +144,7 @@ Chrome DevTools で検出することで Description を確認することがで プレースホルダによる問題の1つは初期状態で [color contrast criteria](https://www.w3.org/WAI/WCAG21/Understanding/contrast-minimum.html) を満たしていないことです。色のコントラストを修正するとプレースホルダが入力欄に事前入力されたデータのように見えます。以下の例を見ると、color contrast criteria を満たしている Last Name プレースホルダが事前入力されたデータのように見えることが確認できます: - + ユーザがフォームを入力するために必要とするすべての情報を入力欄の外側で提供するのが最善です。 @@ -178,7 +178,7 @@ Chrome DevTools で検出することで Description を確認することがで ``` - + ### コンテンツの非表示 @@ -212,7 +212,7 @@ CSS を使用して要素を視覚的に非表示にすることができます } ``` - + #### aria-hidden="true" @@ -240,7 +240,7 @@ CSS を使用して要素を視覚的に非表示にすることができます ``` - + #### 機能的な画像 @@ -276,4 +276,4 @@ CSS を使用して要素を視覚的に非表示にすることができます ``` - +