Applications)を学ぶことになりました。長年Webアプリを開発していますが、プログラマーなのでHTMLには知らない世界がありますね。Applications)に付いての解説はしませんが、簡単に説明します。詳しくはMDNのアクセシビリティや、ネット上の情報を読んでください。現在Webにはあらゆる情報が集まっているので、目の不自由な方も読み上げ機能を使って利用しています。ように役割を持ったタグがあり、読み上げ機能はそれらを判断して音声で伝えています。以下の例はJavaScriptを使い、<span>タグ本来のコンテンツ表示用タグではなく<button>として使っています。class="・・・">詳細</span>一部のUIフレームワーク等で見かけますよね、本来は<button>タグを使うべきですが、色々な理由から現実のWebでは使われていますよね。そこでWAI-ARIAではロール(role=)属性を付ける事を推奨しています。class="・・・">詳細</span>role="button"属性があれば読み上げ機能はここがボタンだと判断できます。WAI-ARIAプロパティとしてaria-required="true"なども定義されています、aria-requiredの意味は想像通りフォームの必須項目です。今回の記事ではaria-labelが出てきますが、これはタグのラベルとして扱われます。CSSの良さが少しわかった気がしたのジャンケンアプリのUIテストを書くと以下のようになります。セレクターベースの選択は主流ではないようです(実際にはできますが)。過去にUIテストは何度か書いていますが、CSSセレクターベースの指定はUI変更の影響を受けやすく、ちょっとした画面変更でもテストが通らなくなる、あまり良くない方法だと思います。サンプルアプリのUIをかえてみましょうこのジャンケンアプリのボタンを画像(アイコン)に変えてみましょう。ボタン上の文字が無くなったので、テストコードは3が動かなくなります。そこでアプリのWAI-ARIA的に良いコード書き変えてみましょう。getByRole()にはname:オプションでaria-labelを指定できます他の変更はありません。});});サンプルアプリのUIを戻してみましょう何らかの理由によって、ボタンは文字ベースに戻す事になったとしましょう。App.tsx注)<Button>はReactコンポーネントなので、aria-labelの指定はコンポーネント内で行っても良いですね。😊まとめ以前から、ときどきaria-という属性は目にしてきましたが無視してました、ごめんなさい。今回WAI-ARIAを学んだ事で、利用者に優しいアプリは、テストコードにも優しい事を知りました。今後アプリを作る際にはWAI-ARIAを意識して行こうと思います。