Skip to content

簡易チェックリストにテストの対象とテスト方法を追加 #1840

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
dadayama merged 9 commits into from
Feb 13, 2026
+11 −1
Merged

簡易チェックリストにテストの対象とテスト方法を追加 #1840

Show file tree
Hide file tree
Changes from 7 commits
Commits
Show all changes
9 commits
Select commit Hold shift + click to select a range
fc75207
chore: 簡易チェックリストにテスト対象やテスト方法を追加
Feb 6, 2026
9b08332
chore: 文言変更
Feb 6, 2026
1e047b6
アクセシブルネームのテスト方法を変更、コントラスト比に文言追加
Feb 6, 2026
566ce35
アクセシブルネームの参照元確認をテスト方法1に統合
Feb 10, 2026
785efb8
アクセシブルネームのテスト方法からの独立項目を削除
Feb 10, 2026
576a4d9
アクセシブルネームのテスト方法に項目を追加
Feb 10, 2026
44da30d
文言修正
Feb 10, 2026
80aedc1
文言修正
Feb 13, 2026
5d15041
テスト方法の数字を修正
Feb 13, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
8 changes: 6 additions & 2 deletions src/content/articles/accessibility/check-list/accessible-name.mdx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -31,12 +31,16 @@ import { Chip, Cluster } from 'smarthr-ui'
- 可視ラベルがある場合は、その内容がアクセシブルネームにも含まれるようにします。これにより、見えるラベルと支援技術によるラベルが一致し、混乱を避けられます。

## テスト方法
1. **アクセシブルネームの確認**:
1. **アクセシブルネームの有無の確認**:
- 開発者ツールやアクセシビリティチェックツールを使用して、フォームの各要素にアクセシブルネームが設定されているかを確認します。[ユーザー補助機能のリファレンス | Chrome DevTools | Chrome for Developers](https://developer.chrome.com/docs/devtools/accessibility/reference?hl=ja#pane)

2. **アクセシブルネームと可視ラベルの一致**:
2. **アクセシブルネームと可視ラベルの一致の確認**:
- 可視のラベルがある場合、アクセシブルネームの中に可視のラベルのテキストが含まれているかを確認します。

2. **アクセシブルネームに不要な情報がないかの確認**:
Copy link
Contributor

@maiha2 maiha2 Feb 10, 2026

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

「の確認」続くので省略しても良さそう

Suggested change
1. **アクセシブルネームの有無の確認**:
- 開発者ツールやアクセシビリティチェックツールを使用して、フォームの各要素にアクセシブルネームが設定されているかを確認します。[ユーザー補助機能のリファレンス | Chrome DevTools | Chrome for Developers](https://developer.chrome.com/docs/devtools/accessibility/reference?hl=ja#pane)
2. **アクセシブルネームと可視ラベルの一致**:
2. **アクセシブルネームと可視ラベルの一致の確認**:
- 可視のラベルがある場合、アクセシブルネームの中に可視のラベルのテキストが含まれているかを確認します。
2. **アクセシブルネームに不要な情報がないかの確認**:
1. **アクセシブルネームの有無**:
- 開発者ツールやアクセシビリティチェックツールを使用して、フォームの各要素にアクセシブルネームが設定されているかを確認します。[ユーザー補助機能のリファレンス | Chrome DevTools | Chrome for Developers](https://developer.chrome.com/docs/devtools/accessibility/reference?hl=ja#pane)
2. **アクセシブルネームと可視ラベルの一致**:
- 可視のラベルがある場合、アクセシブルネームの中に可視のラベルのテキストが含まれているかを確認します。
2. **アクセシブルネームに不要な情報がないか**:

- アクセシブルネームに設定すべきでないテキスト（説明文など）が含まれていないかを確認します。



## 関連するWCAG2.1達成基準
- [達成基準 4.1.2: 名前 (name)・役割 (role)・値 (value) を理解する](https://waic.jp/translations/WCAG21/Understanding/name-role-value.html)
Expand Down
6 changes: 6 additions & 0 deletions src/content/articles/accessibility/check-list/contrast.mdx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -15,6 +15,12 @@ import { Chip, Cluster } from 'smarthr-ui'

29px以上（太字なら24px以上）の大きな文字の場合は、3:1以上のコントラスト比が必要です。

### 画像（装飾目的の画像を除く）の例
コントラスト比の確認対象となる画像には、以下が含まれます。
- [Icon](https://smarthr.design/products/components/icon/)（単体で意味を持つ場合）
- グラフ
- 文字画像

## メリット
1. 色覚特性・多様性のあるユーザー: 色の差がはっきりしているため、情報を正確に認識しやすくなります。
2. 高齢者や視力の低下しているユーザー: テキストが背景から際立つため、読みやすさが向上します。
Expand Down