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

Open
dadayama wants to merge 7 commits into
base: main
Choose a base branch
from
Open

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

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
7 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
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. **アクセシブルネームに不要な情報がないかの確認**:
Comment on lines +34 to +40
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/)（単体で意味を持つ場合）
- グラフ
- 文字画像

Copy link
Contributor

@maiha2 maiha2 Feb 10, 2026 •
edited
Loading

Choose a reason for hiding this comment

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

アクセシビリティ関係なく、日本語的な気になりです。

19行目に「以下も含まれます」と書いてあるが、「〜も」という助詞は

◯◯（主に対象となる物事）があって、△△（追加で対象としたい物事）もある
という、あとに来るものを追加する役割を持つ助詞だと思います。

例： コーヒーを売っています。お菓子もあります。
（主に対象となる物事＝コーヒー、追加の対象＝お菓子）

今回の19行目は

◯◯が対象です。以下も含まれます。

↑省略せずに書くとこういう意味を持つ文章ということでしょうか？主な対象になる要素が省略されているということでしょうか？

あるいは、特に「も」に、追加の助詞としての意味はなく「以下が対象です」と書き換えられる文でしょうか？

Copy link
Contributor Author

@dadayama dadayama Feb 10, 2026

Choose a reason for hiding this comment

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

例として挙げているIconやグラフや文字画像以外にも、意味のある画像であった場合にはコントラスト比の対象になると考えたので、あえて「も」を使用しました。
この項目では「主に対象となる物事」がIcon・グラフ・文字画像になるので、修正します。

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