アクセシビリティとE2Eテスト

2022/11/19 フロントエンドカンファレンス沖縄での発表。

ユーザーの操作から実際のシステムまでを自動でテストするE2Eテストは、すでに動いているフロントエンドアプリの品質を担保しながら開発する際に欠かせないものと考えています。一方で、HTMLのクラス名でボタンや入力欄を指定したりすると、HTML構造を変更しただけでテストが壊れメンテが大変になります。 (テストから押すボタンにdata-属性をつけて回ることも提案されています)

一方で、HTMLにはアクセシビリティのためのWAI-ARIA規格があり、スクリーンリーダーのために必要なメタデータを記述できます。
ここでスクリーンリーダーとは人間のための機械であり、機械で処理しやすいということは、E2Eテストでも利用しやすいということになります。
これを実践してみての知見を話します。

https://fortee.jp/fec-okinawa-2022/proposal/ac6ea377-1260-4639-9e27-406917b2b001

Transcript

1. アクセシビリティとE2Eテスト ypresto 2022/11/19 フロントエンドカンファレンス沖縄
2. yprestoのプロフィール エンジニア数名のBtoBスタートアップ (スパイスコード) に所属 なんでもやるエンジニア 専任デザイナーいないしFigmaもやったり 少人数スタートアップのエンジニアの視点で今日は話します
3. スクリーンリーダー使ったことありますか？ macOSのVoiceOverは Ctrl+Command+ 電源ボタン3 回 で起動・終了 ようこそダイアログの 詳しい情報 ボタンでチュートリアル開始 (WindowsはNVDAを入れた方が良いらしいです) 動画デモ 参考: ユーザーは音声だけでWebサイトをどう使うのか？ 弁護士ドットコム、アクセシビリティユーザー調査の結果を公開
4. VoiceOverの使い方 ( VO = Ctrl + Option + ) 要素単位で移動する VO + Shift + 右 / VO + Shift + 左 グループやテーブルなどの中に入る・出る VO + Shift + 下 / VO + Shift + 上 グループの中に入らず移動する VO + Shift + 右 / VO + Shift + 左 ローター VO + U (困ったらこれを押すと良さそう) 右 / 左 で ランドマーク / 見出し / リンク / フォームコントロール を選んで 上 / 下 で項目の選択 Esc で閉じる 設定 VO + Command + Shift を押しながら 左右 で選択 / 上下 で変更 一覧: macOS版VoiceOverの初歩的な使い方をまとめてみた (dev.classmethod.jp) VO + Comamnd + → / ← で要素の種類を選らんで、そのまま ↓ / ↑ を押すと順番に移動できる機能も便利そう。
5. WAI-ARIA Webアプリケーションのアクセシビリティを高めるための方法を定義した仕様。 ロール ARIAの仕様で定義されているものから選ぶ ランドマーク ( <nav> , <main> , ...)、見出し ( <h1> , ...) フォーム要素 (含むボタン) グリッド、テーブル 例えば <button> ← 暗黙的ロールが設定されるものは <div role="toolbar"> プロパティ、ステートもある: <button aria-expanded="true"> 注: CSSとは無関係なので、 display: table とかはスクリーンリーダーでは認識されない
6. 忘れてください (E2Eのために) ARIAを使えばアクセシビリティ上がると思っていた 調べれば調べるほど間違った使い方をしていることに気がつく悲しみ WAI-ARIA属性 (roleなど) を活用したE2Eテスト HTMLのセマンティクスを活用したE2Eテスト アクセシビリティはARIA属性の前に、まず標準のタグを正しく使うほうが良い ARIAはMUI、Polaris、Chakraのなどで、部品レベルではサポートされている 注: ARIA属性は、使っていいときと悪いときがあります： WAI-ARIAを学ぶときに整理しておきたいこと by ゆうてん
7. E2Eテスト コードでブラウザを動かして、Webアプリケーショ ンをテストする。 なぜIntegrationテストだけでは足りないか 送ったJSONの一部をAPIが取りこぼし消滅 ログイン後の遷移先URLが404 CSSのバグで課金ボタンが画面外に ユーザーやビジネスの視点でのテスト リスクが実装コスト勝つコワい場所はペイ リリース前の動作確認を一部自動化できる
8. Cypressの例で見るE2E ログインフォームが成功するのをチェックする例 cy.get('.email').type('fake@email.com') // メアドの入力 cy.get('.password').type('fake password') // パスワードの入力 cy.contains(' ログイン').click() // ログインと書かれた要素を探してクリック cy.get('h1', ' マイページ').should('be.visible') // h1 のタイトルを確認 セレクタで要素を取る CSSセレクタ .get('.email') テキストでのセレクタ .contains(' ログイン') セレクタに対する操作をする
9. セレクタをユーザー視点で書きたい Selenium時代、セレクタがすぐ壊れたりしてメンテが頓挫した。(class/idなど) <button class="foobar"> → cy.get('.foobar').click() class名やDOM構造はユーザーから見えない実装詳細。 動作確認と同様に、表示されているテキストをセレクタにする 壊れにくい＆修正も容易なのでは やってみた Cypressでの課題＆解決 ARIA属性書かなくてもわりとできた 実装詳細:　Testing Implementation Details by Kent C. Dodds
10. 課題1 入力欄をラベルで取りたい <div class="MuiTextField-root"> <label for="input-prefecture"> メールアドレス</label> <input id="input-prefecture"> </div> cy.contains('.MuiTextField-root', ' メールアドレス') // 親要素を検索 .find('input') // 中に入ってる入力欄をとってくる .type('fake@example.com') // キーボード操作 ↓ Testing Library を導入し、 <label> に紐付いた要素をなんなく取得できた cy.findByLabelText(' メールアドレス').type('fake@example.com')
11. 課題2 同じラベルの要素が複数ある cy.contains(' テストラベル').should('be.visible') // 常にサイドバーがヒット ↓ HTML標準のランドマークで、本文部分のみをチェックする。 <nav><!-- サイドバー --></nav> <main><!-- メールなど本体の部分 --></main> cy.get('main').contains(' テストラベル').should('be.visible')
12. 課題3 key-valueのペアの表示内容をチェックしたい <div> <div> <div> 製造日</div><div>2022/11/23</div> </div> <div> <div> 賞味期限</div><div>2023/11</div> </div> </div> cy.contains('div', ' 賞味期限') // ラベル要素とってきて .parent() // 親に移動して .should('contain.text', '2023/11') // 該当テキストがあるか ( かなり適当) 「行」に当たる <div> を取るのが難しい
13. 課題3 ARIAの role="group" を乱用してしまった <div> <div role="group" aria-labelledby="..."> <div id="..."> 製造日</div><div>2022/11/23</div> </div> <div role="group" aria-labelledby="expiration"> <div id="expiration"> 賞味期限</div><div>2023/11</div> </div> </div> cy.findByRole('group', { name: ' 賞味期限' }).should('contain.text', '2023/11')` E2Eしなかったら存在しなかった role="group" がいっぱいできてしまった。 本来、複数のinputをまとめたりするのに使う
14. 課題3 標準の説明リストタグを使って解決 <dl> <div> <dt> 製造日</dt><dd>2022/11/23</dd> </div> <div> <dt> 賞味期限</dt><dd>2023/11</dd> </div> </dl> ↓ cy.contains('dt', ' 賞味期限').next('dd').should('have.text', '2023/11') MDN: <dl> : 説明リスト要素 の例 に例として載っていた ただしVoiceOverでは、 定義リスト4 項目 → 製造日 4 の1 → 2022/11/23 4 の2 → ... と読み上げられ、行ごとに扱える感じがなかった
15. ARIAがほしくなる例 アイコンボタン <button aria-label=" 送信"><svg>...</svg></button> cy.findByRole('button', { name: ' 送信' }) cy.findByRole('dialog').within(() => { ... }) <div role="toolbar"> cy.findByRole('toolbar') (Testing Library) <article aria-labelledby="blog1"> <h3 id="blog1"> ブログ1</h3> ... </article>
16. ARIA DevTools かんたんな確認用に。
17. まとめ E2Eはビジネスを止めないために投資する MUI、Polaris、Chakraなど、WAI-ARIAがサポートされてるライブラリを使う フォーム要素、ランドマーク、見出しを含め、標準のタグを有効に活用する アイコンボタンだけは aria-label="..." をつける するとE2E捗る Testing Library便利
18. 参考資料 ユーザーは音声だけでWebサイトをどう使うのか？ 弁護士ドットコム、アクセシビリテ ィユーザー調査の結果を公開 WAI-ARIAを学ぶときに整理しておきたいこと by ゆうてん Webフロントエンドのリプレースを支えるテストの考え方 by berlysia WAI-ARIA Authoring Practices Guide (APG)