getByRoleはHTMLのロールと同じ
Testing Library
の getByRole
は、 HTML要素のロール
を参照します。
必要に応じて公式を参照しましょう。
例
button は暗黙的に button というロールを持っています
// わざわざroleを指定しなくてよい
<button role="button">ボタン</button>
// divにも反映できる(理由があれば)
<div role="button">~~~</div>
注意
input のロールは、type 属性名称がロール名称に一致するとは限らない。
<input tyle="text"> // role="textbox"
<input tyle="checkbox"> // role="checkbox"
<input tyle="radio"> // role="radio"
<input tyle="number"> // role="spinbutton"
h 属性の絞り込み方法
h 属性は headigロール
を持っています。
h1~h6 まで、すべで heading で同じとなっています。
なので、 h 属性が複数存在する
ページの場合、screen.getByRole("heading")
とすると失敗してしまいます。(screen.getByAllRole("heading)は成功する)
// 両方ともheading
<h1>見出し1</h1> // role="heading"
<h2>見出し2</h2> // role="heading"
これを見分けるためには、level
を使用する
screen.getByRole("heading" , {level:1}) // h1が取れる
screen.getByRole("heading" , {level:2}) // h2が取れる
// 何かしらの理由でh属性を使えない場合、このように指定する
<div role="heading" aria-level="1">見出し</div>
アクセシブルネーム
Accessible Name は HTML の name属性とは関係ありません
。
スクリーンリーダーで読み上げられるテキストを示します。
// アクセシブルネームは 送信
<button>送信</button>
// アクセシブルネームは送信
<button><img alt="送信" src="画像.png"></button>
// アクセシブルネームがない!必ず指定しよう
<button><img src="画像.png"></button>
アクセシブルネームは様々な要因が絡んで決定されるので、下記を読んでまずは確認しましょう。
(算出の仕様はこちら : Accessible Name and Description Computation 1.2)
ロール名、アクセシブルネーム名を確認する
慣れないうちは、なにがアクセシブルネームになるのかわかりません。。
ただ、確認する方法が主に2つの方法があります。
- ブラウザの拡張機能を使用する
- テストコード上で確認する
ブラウザの開発者ツールを使用する
Chromeの拡張機能を使用すれば、簡単に確認できます。

テストコード上で確認する
// 実装
export const Form = ({ title, handleOnSubmit }) => {
return (
<form onSubmit={(event) => {~処理~}}>
<h2>タイトル</h2>
<p>{title}</p>
<button>決定</button>
</form>
);
};
// test
test('logRoles: アクセシブルネームを確認する', () => {
const { container } = render(<Form title='リスト' />);
logRoles(container);
});
logRoles
を使い、アクセシブルネームを確認しつつテストコードへ反映させていくのがよさそう。
参照
AccessibleRichInternetApplications(WAIARIA)
https://www.w3.org/TR/waiaria1.2/
WAIARIAロール
https://developer.mozilla.org/ja/docs/Web/Accessibility/ARIA/Roles
a11yとテストを同時に改善する話
https://zenn.dev/takepepe/articles/improve-a11y-and-testing