本記事では、eslint-plugin-jsx-a11yの紹介をしていきます。
React や Vue など、jsx を使用する開発でアクセシビリティの担保をする 1 つの手段として参考にしていただければ幸いです。
具体的なコード例とユーザーへの効果とともに解説します。
これから記載するもの以外にも様々なルールが存在します。
詳しくは公式リポジトリを参照ください。
1. 代替テキストの有無の検知
問題点
画像に alt 属性がないと、スクリーンリーダーを使っている人には「この画像が何を伝えたいのか」がわからない。
不適切な例
<img src='example.jpg' />
適切な例
<img src='example.jpg' alt='山の風景' />
効果
- 視覚障害者が画像の内容を理解可能。
- 装飾用画像は
alt=""で無視され、不要な情報が省略される。 - 万が一画像が読み込まれない時にも内容をある程度把握できる。
W3C 参照
eslint-plugin-jsx-a11y 参照
2. リンクテキストを明確にする
問題点
スクリーンリーダーを使っている人の場合、「こちら」などの曖昧なリンクテキストは、リンク先が何かを伝えられない。
不適切な例
<a href='/about'>こちら</a>
適切な例
<a href='/about'>会社概要を見る</a>
効果
- スクリーンリーダーを使用するユーザーがリンク先を明確に把握可能。
- 全体的なユーザー体験向上。
W3C 参照
eslint-plugin-jsx-a11y 参照
3. 空のリンクを避ける
問題点
リンクタグに内容がないと、何も情報がないリンクとして認識され、スクリーンリーダーやキーボード操作で混乱を引き起こす。
不適切な例
<a href='/about'></a>
適切な例
<a href='/about'>会社概要</a>
効果
- キーボード専用のユーザーが不要なフォーカスを避けられる。
- スクリーンリーダーがリンク内容を正しく伝えられる。
W3C 参照
eslint-plugin-jsx-a11y 参照
4. キーボード操作可能なフォーカス管理
問題点
キーボードでリストを選ぶような機能を作りたいときに、tabIndex がないと、フォーカス移動ができなくなり、キーボード専用ユーザーが操作不可能に。
不適切な例
<div role='combobox' aria-activedescendant='option1'>
<div id='option1'>Option 1</div>
</div>
適切な例
<div role='combobox' aria-activedescendant='option1' tabIndex='0'>
<div id='option1'>Option 1</div>
</div>
効果
- キーボード専用のユーザーが正しくフォーカスを移動できる。
- スクリーンリーダーユーザーが現在のアクティブ項目を把握できる。
W3C 参照
eslint-plugin-jsx-a11y 参照
5. ARIA 属性の正しい使用
問題点
ARIA 属性は、間違った使い方をするとスクリーンリーダーなどの支援技術が誤動作を起こす。
例えば、属性名のタイポや、存在しない属性の使用が原因になることがある。
a) 不正な ARIA 属性を防ぐ (aria-props)
概要
不正な ARIA 属性（例: 存在しない属性やタイポ）を検出します。
不適切な例
<div aria-labelledbyby='heading1'></div> // Typo
適切な例
<div aria-labelledby='heading1'></div>
b) 属性値の型を守る (aria-proptypes)
概要
ARIA 属性に正しいデータ型が設定されているかチェック
不適切な例
<div aria-hidden='yes'></div>
適切な例
<div aria-hidden='true'></div>
c) 適切なロールを使用する (aria-role)
概要
不正または非推奨の ARIA ロール（例: 不存在ロール）を検出
不適切な例
<div role='button-link'></div>
適切な例
<div role='button'></div>
d) サポートされていない要素での使用を防ぐ (aria-unsupported-elements)
概要
ARIA 属性がサポートされていない要素に適用されている場合に警告
不適切な例
<img role='textbox' aria-label='Enter text' />
適切な例
<img alt='Sample Image' />
効果
- 誤った ARIA 属性設定を防ぎ、支援技術が正しく動作。
- 非推奨の構文やロールを除外し、アクセシビリティ標準を遵守。
- 不適切な要素への使用を避け、混乱を防ぐ。
W3C 参照
eslint-plugin-jsx-a11y 参照
まとめ
アクセシビリティの要件は多岐に渡り、全てを意識、対応することはなかなか難しいと思います。
ですが、プラグインの範囲であればそこまで複雑なものはないのではないかなと感じます。
まずはできる範囲で小さく始めてみてください。
Discussion