From b61f408ffa8341628954e8748b31582c4086b51d Mon Sep 17 00:00:00 2001 From: Naoki Endoh Date: Thu, 29 Apr 2021 20:23:32 +0900 Subject: [PATCH 1/2] docs: migrate a11y-semantics.md CodePens to the Vue account https://github.com/vuejs/docs-next/commit/a8385eaa9643dcdd521d9e926b9b9b6b9166f7fa#diff-4afbccbc62cfa9b1d4d1c0723f2ef22f44e491f7dd61232374103e8f7e822347 --- src/guide/a11y-semantics.md | 20 ++++++++++---------- 1 file changed, 10 insertions(+), 10 deletions(-) diff --git a/src/guide/a11y-semantics.md b/src/guide/a11y-semantics.md index 691dead8..52de330d 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 で自由に検証し、どのようにアクセス可能な名前が変更されたか確認してください: @@ -100,7 +100,7 @@ chrome デベロッパツールでこの要素を検証し、Elements タブ内 ``` - + ![aria-labelledby からアクセス可能な入力欄の名前を表示する Chrome デベロッパツール](/images/AccessibleARIAlabelledbyDevTools.png) @@ -132,7 +132,7 @@ chrome デベロッパツールでこの要素を検証し、Elements タブ内 ``` - + Chrome DevTools で検出することで Description を確認することができます: @@ -144,7 +144,7 @@ Chrome DevTools で検出することで Description を確認することがで プレースホルダによる問題の１つは初期状態で [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 を使用して要素を視覚的に非表示にすることができます ``` - + From 771eea093f0999a69d948a8e3bb09c37a7148707 Mon Sep 17 00:00:00 2001 From: Naoki Endoh Date: Thu, 29 Apr 2021 20:33:56 +0900 Subject: [PATCH 2/2] Update a11y-semantics.md https://github.com/vuejs/docs-next/commit/d622347a867dda58fa4adcf08ca7212483a71f52#diff-4afbccbc62cfa9b1d4d1c0723f2ef22f44e491f7dd61232374103e8f7e822347 --- src/guide/a11y-semantics.md | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/src/guide/a11y-semantics.md b/src/guide/a11y-semantics.md index 52de330d..d64c68f1 100644 --- a/src/guide/a11y-semantics.md +++ b/src/guide/a11y-semantics.md @@ -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