本セッションの登壇者
セッション動画（YouTubeチャンネル登録もお願いします。）
こんにちは。サイボウズ株式会社の小林大輔(こばやしだいすけ)と申します。本日は「アクセシビリティツリーを読む」ということでお話をさせていただきます。よろしくお願いします。
本日の内容です。
本日は皆さんにいくつかのHTMLをお見せして、それがどのようにスクリーンリーダーに読まれるかというのを一緒に確認したいと思います。その上でHTMLのアクセシビリティツリーを確認して、「なぜスクリーンリーダーがその読み上げをするのか」の根拠を解説してみたいと思います。皆さんにはこれから2つのHTMLをお見せします。
スクリーンリーダーは何と読む? - その1
まず、ひとつめの例です。
いま、<input type="text">で作られた入力欄があります。この入力欄には <label >要素で「ユーザー名」というラベルが関連付けられています。それから入力欄にはtitle属性もついていて、「8文字以上」という補足説明がつけられています。これはスクリーンリーダーにどう読まれるでしょうか。
実際にWindows用のNVDAというスクリーンリーダーに読み上げさせると、入力欄にフォーカスした時に「ユーザー名、エディット、8文字以上」と読み上げられます。「エディット」というのは入力欄を表すキーワードです。ですので入力欄であること、それから入力欄に関連付けられているキーワードが同時に読み上げられていることがわかります。
スクリーンリーダーは何と読む? - その2
では、次の例はどうでしょうか。
今度はtitle属性のかわりにaria-labelledby属性が付けられています。aria-labelledby属性は入力欄の直後に表示されているエラーメッセージを参照しています。エラーメッセージには「エラー: 8文字未満です」と書かれています。これはスクリーンリーダーにどう読まれるでしょうか。
実は先ほどと違って、「エラー: 8文字未満です、エディット」と読み上げられます。「ユーザー名」というラベルが省略されてしまいました。
アクセシビリティツリーとは
なぜ省略されてしまうのでしょうか。これを考えるにあたっては、アクセシビリティツリーを確認することが重要です。
アクセシビリティツリーは支援技術向けに公開される情報がまとめられているツリーです。アクセシビリティツリーはHTMLとCSSの情報を元に生成されていて、スクリーンリーダーなどの支援技術はこのアクセシビリティツリーの情報を読み取って、どんな内容を読み上げるかを決定します。
アクセシビリティツリーが提供する情報はおもに4種類あります。Role(要素の役割)、Name(要素の名前)、Description(要素の補足説明)、State・Property(要素の状態や性質)です。
アクセシビリティツリーはChromeのDevToolsから簡単に確認できます。ElementsタブのAccessibilityパネルを開き、Computed Propertiesという部分を確認すると、ある要素に対してアクセシビリティツリーの値が確認できます。
アクセシビリティツリーと読み上げの対応
今、画面には実際に最初のHTMLの例のアクセシビリティツリーを紹介しています。これを見ると、Nameに「ユーザー名」、Descriptionに「8文字以上」、Roleとしてtextboxが割り当てられていることがわかります。
このアクセシビリティツリーの値にもとづいて、スクリーンリーダーは読み上げの値を決めます。NVDAの場合、Name、Descriptionはそのまま読み上げられます。Roleはtextboxとなっていますが、NVDAはわかりやすいキーワードに翻訳します。今回はそれが「エディット」ということになります。ですので対応する読み上げは、上から読み上げて「ユーザー名、エディット、8文字以上」ということになります。
では、2番目の例はどうでしょうか。2番目の例ではNameが「エラー: 8文字未満です」というふうに変化しています。Nameを展開すると、どんな要素がこのNameを決めているのかがわかります。これを見ると、label要素の値に打ち消し線が引かれていて、aria-labelledby属性で上書きされていることがわかります。
実はNameを決める要素と優先順位は決まっています。aria-labelledby属性は多くの要素のうち、もっとも優先される属性です。label要素はaria-labelledby属性より優先順位が低いので、両方付けた場合、aria-labelledby属性が優先されることになります。
では、どうすればよかったのか、ということですが、aria-labelledby属性を使うのではなくて、aria-describedby属性という別の属性を使うことが解決の鍵になります。こうするとエラーがDescriptionとして認識されるので、title属性を付けたときと同じく、スクリーンリーダーの読み上げが「ユーザー名、エディット、エラー: 8文字未満です」となります。
まとめ
ということで、アクセシビリティツリーを確認するのはとても重要です。また、NameやDescriptionを決める要素と、優先順位に注意しながら設計することがとても重要です、というお話でした。
私の発表は以上としたいと思います。ありがとうございました。
