axe-core で楽々アクセシビリティチェック #GAADjp

楽々 axe-core で アクセシビリティチェック ⿊帯(アクセシビリティ) 中野 信 ©Yahoo Japan

⾃⼰紹介 • 中野 信(なかの まこと) • UIガイドラインの策定・運⽤と アクセシビリティの向上に関わっています • ⿊帯(アクセシビリティ) • デジタル庁(⺠間登⽤ ⾮常勤) • ウェブアクセシビリティ基盤委員会 作業部会1(理解と普及) ©Yahoo JAPAN 2

サマリ • JIS の網羅的なチェックを axe-core で少し楽をしよう • ⽬視で⾒落としがちな箇所を機械的にチェックしよう • チェック量が多いとくじける箇所を機械に委ねよう ©Yahoo JAPAN 3

axe-core とは? ©Yahoo Japan 4

axe-core とは? axe-core とは? アクセシビリティのルールライブラリー • • https://github.com/dequelabs/axe-core • Deque Systems, inc. が開発・公開している • オープンソースで公開されている • ⽇本語のロケールが⽤意されてる ©Yahoo JAPAN 5

• https://github.com/dequelabs/axe-core

axe-core とは? どう使うか? • ヘッドレスブラウザを介して使う https://accessible-usable.net/2021/02/entry_210223.html https://www.anothersky.jp/2021/02/improvement-axe-runner.html ©Yahoo JAPAN 6

• https://www.anothersky.jp/2021/02/improvement-axe-runner.html
• https://accessible-usable.net/2021/02/entry_210223.html

axe-core とは? 何をチェックしてくれるか? HTML の記述から判断できる内容 • • WCAG2.0 • WCAG2.1 • ベストプラクティス • 実験的なルール https://github.com/dequelabs/axe-core/blob/develop/doc/rule-descriptions.md ©Yahoo JAPAN 7

• https://github.com/dequelabs/axe-core/blob/develop/doc/rule-descriptions.md

axe-core とは? 具体的にどのようなチェック結果になるか? 画像には代替テキストがなければなりません • • ルールID: image-alt • ルールセット: axe-core 4.4 • ユーザーへの影響: 緊急 • WCAG(の達成基準): 1.1.1 https://dequeuniversity.com/rules/axe/4.4/image-alt?application=RuleDescription ©Yahoo JAPAN 8

• https://dequeuniversity.com/rules/axe/4.4/image-alt?application=RuleDescription

どう JIS のチェックと組み合わせるか? ©Yahoo Japan 9

どう JIS のチェックと組み合わせるか? JIS X 8341-3:2016 のチェック(試験) • エクセルシートの実装チェックリストから⽬視でチェック • 240項⽬近い達成⽅法のリストの中から適合・⾮適合を選択する • つらい ©Yahoo JAPAN 10

どう JIS のチェックと組み合わせるか? 楽をしよう! axe-core の結果を実装チェックリストにマッピングする • • どの達成⽅法のどの程度チェックされているかが分かる • 内容の確認は必要だが、抜けもれを減らせる ©Yahoo JAPAN 11

どう JIS のチェックと組み合わせるか? どう組み合わせるか? • axe-core のチェック結果を csv で出⼒する • 実装チェックリストにチェック結果を貼る • 実装チェックリストの達成⽅法の⾏に、ルール ID を数える関数を追加する miChecker の同梱ファイル 「ワークシート.xlsx」と同じ仕組み ©Yahoo JAPAN 12

どう JIS のチェックと組み合わせるか? どう組み合わせるか? axe-coreのチェック結果のシート ルール ID 実装チェックリストシート 達成⽅法 ©Yahoo JAPAN ルール ID カウント数 13

やって分かったこと ©Yahoo Japan 14

やって分かったこと よかったこと ページの⽬視で抜けやすいチェックが楽になった • • ⾔語設定 • 属性値の間違い • 抜けている要素・項⽬のチェック( iframe のタイトルなど) 同じページを何回かチェックするのが楽になった • • 何回チェックしても疲れない! ©Yahoo JAPAN 15

やって分かったこと ⼤変だったこと 達成⽅法とルール ID のマッピング • • 数が多い • axe-core の更新頻度が⾼いため、都度確認が必要 ©Yahoo JAPAN 16

やって分かったこと 実感出来たこと • ツールでチェックできる箇所は限定的 • 体感的に JIS 規格全体の2~3割 https://weba11y.jp/basics/faq/automate-testing/ ©Yahoo JAPAN 17

• https://weba11y.jp/basics/faq/automate-testing/

みんなも axe-core で少し楽をしよう! ©Yahoo Japan

EOP ©Yahoo Japan