From 7a6e018a716eb6df820d7b99e440bcc618666d3b Mon Sep 17 00:00:00 2001 From: TetsuhiroSato Date: Wed, 18 Dec 2024 18:44:27 +0900 Subject: [PATCH 1/7] =?UTF-8?q?=E5=AE=9F=E8=A3=85=E4=BE=8B=E8=BF=BD?= =?UTF-8?q?=E5=8A=A0?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../products/components/visually-hidden-text.mdx | 10 ++++++++++ 1 file changed, 10 insertions(+) diff --git a/src/content/articles/products/components/visually-hidden-text.mdx b/src/content/articles/products/components/visually-hidden-text.mdx index 8ccedc0ce..0d2a26295 100644 --- a/src/content/articles/products/components/visually-hidden-text.mdx +++ b/src/content/articles/products/components/visually-hidden-text.mdx @@ -7,6 +7,16 @@ import ComponentPropsTable from '@/components/article/ComponentPropsTable.astro' VisuallyHiddenTextコンポーネントは、テキストを視覚的に隠しつつ、マシンリーダブルにしたい場合に使用します。見出しやラベルが自明な場合などに使います。 +## 実装例 +視覚情報では`〜`ですが、スクリーンリーダーでは`から`と読み上げるように指定しています。 + +```tsx editable +<> + 2024/12/20〜2025/01/30 + 2024/12/20から2025/01/30 + +``` + ## Props From a721491291738936fade0f502699ab0729e2be27 Mon Sep 17 00:00:00 2001 From: TetsuhiroSato Date: Mon, 23 Dec 2024 11:38:18 +0900 Subject: [PATCH 2/7] =?UTF-8?q?=E8=A6=8B=E5=87=BA=E3=81=97=E8=BF=BD?= =?UTF-8?q?=E5=8A=A0?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../articles/products/components/visually-hidden-text.mdx | 2 ++ 1 file changed, 2 insertions(+) diff --git a/src/content/articles/products/components/visually-hidden-text.mdx b/src/content/articles/products/components/visually-hidden-text.mdx index 0d2a26295..10033448d 100644 --- a/src/content/articles/products/components/visually-hidden-text.mdx +++ b/src/content/articles/products/components/visually-hidden-text.mdx @@ -8,6 +8,8 @@ import ComponentPropsTable from '@/components/article/ComponentPropsTable.astro' VisuallyHiddenTextコンポーネントは、テキストを視覚的に隠しつつ、マシンリーダブルにしたい場合に使用します。見出しやラベルが自明な場合などに使います。 ## 実装例 + +### 期間表現 視覚情報では`〜`ですが、スクリーンリーダーでは`から`と読み上げるように指定しています。 ```tsx editable From 7203837ddf36c3815165cde69128a6ea61480ef5 Mon Sep 17 00:00:00 2001 From: TetsuhiroSato Date: Mon, 23 Dec 2024 18:10:30 +0900 Subject: [PATCH 3/7] =?UTF-8?q?=E5=AE=9F=E8=A3=85=E4=BE=8B=E3=81=A8?= =?UTF-8?q?=E4=BD=BF=E7=94=A8=E4=B8=8A=E3=81=AE=E6=B3=A8=E6=84=8F=E3=82=92?= =?UTF-8?q?=E8=BF=BD=E5=8A=A0?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../components/visually-hidden-text.mdx | 19 ++++++++++++++++++- 1 file changed, 18 insertions(+), 1 deletion(-) diff --git a/src/content/articles/products/components/visually-hidden-text.mdx b/src/content/articles/products/components/visually-hidden-text.mdx index 10033448d..0cb5bda69 100644 --- a/src/content/articles/products/components/visually-hidden-text.mdx +++ b/src/content/articles/products/components/visually-hidden-text.mdx @@ -5,7 +5,7 @@ description: 'スクリーンリーダーによる音声読み上げを可能に import ComponentPropsTable from '@/components/article/ComponentPropsTable.astro' -VisuallyHiddenTextコンポーネントは、テキストを視覚的に隠しつつ、マシンリーダブルにしたい場合に使用します。見出しやラベルが自明な場合などに使います。 +VisuallyHiddenTextコンポーネントは、テキストを視覚的に隠しつつ、スクリーンリーダーで読み上げるテキストを提供する場合に使用します。見出しやラベルが自明で、表示すると視覚的に冗長になる場合などに使います。 ## 実装例 @@ -19,6 +19,23 @@ VisuallyHiddenTextコンポーネントは、テキストを視覚的に隠し ``` +### Badgeにアクセスブルな名前をつける +ドット表示の場合には視覚情報しか持たないため、何らかの形で必ずアクセシブルな名前を与えてください。（参考：[Badge](/products/components/badge/)） + +```tsx editable +<> + + 通知があります + +``` + +## 使用上の注意 + +`VisuallyHiddenText`を必要以上に使いすぎないでください。情報が過剰になり、アクセシビリティが逆に損なわれる場合があります。 + +文脈をしっかり考慮し、スクリーンリーダーユーザーにとって価値のある情報を提供することが重要です。 + + ## Props From df68b57f3581305659d8861268f56f40c2d7cb36 Mon Sep 17 00:00:00 2001 From: TetsuhiroSato Date: Wed, 25 Dec 2024 14:50:50 +0900 Subject: [PATCH 4/7] =?UTF-8?q?=E5=86=97=E9=95=B7=E3=81=AA=E3=82=B1?= =?UTF-8?q?=E3=83=BC=E3=82=B9=E3=82=92=E8=BF=BD=E5=8A=A0?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../components/visually-hidden-text.mdx | 24 +++++++++++++++---- 1 file changed, 20 insertions(+), 4 deletions(-) diff --git a/src/content/articles/products/components/visually-hidden-text.mdx b/src/content/articles/products/components/visually-hidden-text.mdx index 0cb5bda69..61fec8056 100644 --- a/src/content/articles/products/components/visually-hidden-text.mdx +++ b/src/content/articles/products/components/visually-hidden-text.mdx @@ -9,13 +9,29 @@ VisuallyHiddenTextコンポーネントは、テキストを視覚的に隠し ## 実装例 -### 期間表現 -視覚情報では`〜`ですが、スクリーンリーダーでは`から`と読み上げるように指定しています。 +### 日付入力の開始日と終了日 +「入社年月日」の見出しと`DatePicker`コンポーネントだけで開始日と終了日であることが自明で冗長になるので`VisuallyHiddenText`を使用している。 ```tsx editable <> - 2024/12/20〜2025/01/30 - 2024/12/20から2025/01/30 + + + 開始日 + + + + + 終了日 + + + ``` From 3025959f4db602046c2ddc033c7cde0f05c3cc56 Mon Sep 17 00:00:00 2001 From: TetsuhiroSato Date: Thu, 26 Dec 2024 14:13:11 +0900 Subject: [PATCH 5/7] =?UTF-8?q?=E9=A0=86=E5=BA=8F=E3=82=92=E5=A4=89?= =?UTF-8?q?=E6=9B=B4?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../products/components/visually-hidden-text.mdx | 13 ++++++------- 1 file changed, 6 insertions(+), 7 deletions(-) diff --git a/src/content/articles/products/components/visually-hidden-text.mdx b/src/content/articles/products/components/visually-hidden-text.mdx index 61fec8056..df73b8b1d 100644 --- a/src/content/articles/products/components/visually-hidden-text.mdx +++ b/src/content/articles/products/components/visually-hidden-text.mdx @@ -7,6 +7,12 @@ import ComponentPropsTable from '@/components/article/ComponentPropsTable.astro' VisuallyHiddenTextコンポーネントは、テキストを視覚的に隠しつつ、スクリーンリーダーで読み上げるテキストを提供する場合に使用します。見出しやラベルが自明で、表示すると視覚的に冗長になる場合などに使います。 +## 使用上の注意 + +`VisuallyHiddenText`を必要以上に使いすぎないでください。情報が過剰になり、アクセシビリティが逆に損なわれる場合があります。 + +文脈をしっかり考慮し、スクリーンリーダーユーザーにとって価値のある情報を提供することが重要です。 + ## 実装例 ### 日付入力の開始日と終了日 @@ -45,13 +51,6 @@ VisuallyHiddenTextコンポーネントは、テキストを視覚的に隠し ``` -## 使用上の注意 - -`VisuallyHiddenText`を必要以上に使いすぎないでください。情報が過剰になり、アクセシビリティが逆に損なわれる場合があります。 - -文脈をしっかり考慮し、スクリーンリーダーユーザーにとって価値のある情報を提供することが重要です。 - - ## Props From b8db367faeb26334ca1444cb7088eb9819cf70f9 Mon Sep 17 00:00:00 2001 From: TetsuhiroSato Date: Thu, 26 Dec 2024 15:51:31 +0900 Subject: [PATCH 6/7] =?UTF-8?q?VisuallyHiddenText=E3=82=92=E4=BD=BF?= =?UTF-8?q?=E7=94=A8=E3=81=97=E3=81=9F=E3=82=B3=E3=83=B3=E3=83=9D=E3=83=BC?= =?UTF-8?q?=E3=83=8D=E3=83=B3=E3=83=88=E3=81=AB=E5=A4=89=E6=9B=B4=E3=81=97?= =?UTF-8?q?=E3=81=9F?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../components/visually-hidden-text.mdx | 53 +++++++++---------- 1 file changed, 24 insertions(+), 29 deletions(-) diff --git a/src/content/articles/products/components/visually-hidden-text.mdx b/src/content/articles/products/components/visually-hidden-text.mdx index df73b8b1d..f2ebd3a3a 100644 --- a/src/content/articles/products/components/visually-hidden-text.mdx +++ b/src/content/articles/products/components/visually-hidden-text.mdx @@ -13,44 +13,39 @@ VisuallyHiddenTextコンポーネントは、テキストを視覚的に隠し 文脈をしっかり考慮し、スクリーンリーダーユーザーにとって価値のある情報を提供することが重要です。 -## 実装例 +## VisuallyHiddenTextを使用したコンポーネント -### 日付入力の開始日と終了日 -「入社年月日」の見出しと`DatePicker`コンポーネントだけで開始日と終了日であることが自明で冗長になるので`VisuallyHiddenText`を使用している。 +### RangeSeparator +期間や範囲を表す`〜`や`-`を`から`などの意味のわかる文字に置き換えてくれます。（参考：[RangeSeparator](/products/components/range-separator/)） ```tsx editable -<> - - - 開始日 - - - - - 終了日 - - - - +

+ 兼務先（部署2 + + 10）も所属部署として扱う +

``` -### Badgeにアクセスブルな名前をつける -ドット表示の場合には視覚情報しか持たないため、何らかの形で必ずアクセシブルな名前を与えてください。（参考：[Badge](/products/components/badge/)） +### FormControl[dangerouslyTitleHidden] +「入社年月日」の見出しと`DatePicker`コンポーネントだけで開始日と終了日であることが自明で冗長になるので`FormControl`の`dangerouslyTitleHidden`propsを使用している。 ```tsx editable -<> - - 通知があります - +
+ + + + + + + + + + + +
``` + ## Props From 7822965bcf7d43591eca0ba84ba1c9b193f575f6 Mon Sep 17 00:00:00 2001 From: TetsuhiroSato Date: Thu, 26 Dec 2024 17:08:44 +0900 Subject: [PATCH 7/7] =?UTF-8?q?props=E3=82=92=E8=BF=BD=E5=8A=A0?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../articles/products/components/visually-hidden-text.mdx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/content/articles/products/components/visually-hidden-text.mdx b/src/content/articles/products/components/visually-hidden-text.mdx index f2ebd3a3a..ea3d3d04d 100644 --- a/src/content/articles/products/components/visually-hidden-text.mdx +++ b/src/content/articles/products/components/visually-hidden-text.mdx @@ -26,7 +26,7 @@ VisuallyHiddenTextコンポーネントは、テキストを視覚的に隠し

``` -### FormControl[dangerouslyTitleHidden] +### FormControlの[dangerouslyTitleHidden]props 「入社年月日」の見出しと`DatePicker`コンポーネントだけで開始日と終了日であることが自明で冗長になるので`FormControl`の`dangerouslyTitleHidden`propsを使用している。 ```tsx editable