getByRoleの参照と、アクセシブルネームの確認方法 #React

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