ウェブアクセシビリティ改善での生成AI活用を模索する
生成AI流行ってますね。
ウェブアクセシビリティ改善での活用を探ってみました。
ウェブアクセシビリティ改善で効率化できそうなところを探す
生成AI活用を考える前に、アクセシビリティ改善でどんなことやるか考えてみましょう。
いろいろやることはあると思いますが、代表的なものはこんな感じでしょうか。
- 公開されているウェブサイトのアクセシビリティチェック
- マークアップの静的解析
- スクリーンリーダー読み上げチェック
- デザインレビュー
これらを生成AIで効率化できないか考えてみます。
生成AIで効率化できる？
公開されているウェブサイトのアクセシビリティチェック
結論：axe DevToolsに任せよう
現在公開されている生成AI系のサービスではウェブサイトのHTML構造にアクセスできないので、きちんとしたアクセシビリティチェックを行うことはできません。
ChatGPT o3-miniなどURLを渡すとテキストや画像を解析してくれるツールは存在しますが、中途半端で一般的なアドバイスを出力するにとどまるので、あまりメリットを感じませんでした。
餅は餅屋ということで、今のところは専門ツールを使う方が効率的と言えそうです。
余談：詳しいことは書かれていませんが、axe内部でも生成AIもしくは機械学習のようなものが活用されているようです。今後生成AIを活用した機能が登場するかもしれません。
マークアップの静的解析
結論：コンポーネント単位でチェックしてもらうのはありかも
マークアップの静的解析といえば Markuplint が有名ですが、これを生成AIにやってもらうことで効率化できるかを考えてみました。
結論から言うと、網羅的な検査にはLinterを用いるのが良さそうです。
生成AIはファイルを横断して行う操作が得意ではないですし、行数の多いHTMLはトークンを多く消費してしまうのでコストもかかってしまいます。
しかし、部分的なマークアップの相談を生成AIにするのはありかなと思います。
Linterは問題点は教えてくれるけど直し方は教えてくれません。しかし生成AIは改善案も考えてくれるので、複雑なマークアップをどう改善するか相談するにはもってこいだと思います。
ChatGPTのGPTsにも Accessibility に特化したプリセットが公開されているので、試してみると面白いと思います。
スクリーンリーダー読み上げチェック
結論：無理
スクリーンリーダーを操作してもらうことはまだ難しいので、人の手でチェックするしかなさそうです。いつか自動化できたらいいな…。
スクリーンリーダーで読み上げた音声を録音し、録音から文字起こしをして、その文章からスクリーンリーダーでちゃんと操作できそうか判別してもらったら面白いかなと思ったけど、手間の割にメリットが少なそうなのでまだ試していません。誰かやってみてほしい。
デザインレビュー
結論：事前に課題を類推してもらうのは一定の価値がありそう
デザインの画像を生成AIに投げて、アクセシビリティの問題点を推測してもらうという使い方はけっこう便利だなと思いました。これを使いこなせればアクセシビリティの知識が少ないデザイナーでもデザイン段階でできるだけアクセシビリティの課題を潰せるようになりそう。
一応スクリーンリーダーで扱うときに起こりそうな問題とかも出力してくれましたが、実際に操作した結果ではないのであまり有用ではありませんでした。
画像解析は生成AIの得意分野なので、プロンプトの改善やモデルのアップデートでより精度の高い分析をしてくれると思います。
まとめ
全体的にはまだ既存の手法を代替できませんが、相談相手にはなってくれそうな感じでした。
これ以外にも面白いアイデアがあればぜひコメントください！
Discussion