ステータス・メッセージとスクリーン・リーダー
ステータス・メッセージは、状況に応じて動的に表示されたり変更されたりします。画面表示を見ることができない場合、このような動的な変化を認知することが不可能です。
この問題を回避するために、ステータス・メッセージについてスクリーン・リーダーなどの支援技術が適切に処理できるようにすることが求められています。具体的には、以下に示すARIAライブ・リージョンを活用することで、自動的に読み上げられるようにすることが必要です。
なお、このステータス・メッセージに関するWCAG 2.1の達成基準はレベルAAとされていますが、freeeのプロダクトにおいては操作の結果をユーザーに知らせる場合など、比較的重要な場面でステータス・メッセージが活用されていますので、当ガイドラインではこの達成基準をレベルA相当のものとしています。
ARIAライブ・リージョンの実装例と利用時の注意点
ステータス・メッセージなど、自動的に読み上げられるようにする必要があるコンテンツがある場合は、ARIAライブ・リージョンを用います。
aria-live属性が指定されているか、role属性でstatus, alert, logなどの特定の値が指定されている要素があると、これらがARIAライブ・リージョンとして扱われます。ARIAライブ・リージョンがページ中にあると、スクリーン・リーダーはその要素を監視して、内容に変化があると読み上げることが期待されています。
参考：ARIA ライブリージョン - アクセシビリティ | MDN
基本的な実装例
以下のコードが、もっとも基本的な実装です。
コードを表示
1 <!DOCTYPE html> 2 <html lang="ja"> 3 <head> 4 <meta charset="UTF-8"/> 5 <title>ARIAライブ・リージョンの基本的な実装例</title> 6 <script> 7 function showStatus() { 8 let statusRegion = document.getElementById("status-region"); 9 let button = document.getElementById("button"); 10 let msgContainer = document.createElement("p"); 11 let msg = document.createTextNode("ページが更新されました。"); 12 msgContainer.appendChild(msg); 13 statusRegion.appendChild(msgContainer); 14 button.setAttribute("disabled", "true"); 15 } 16 </script> 17 </head> 18 <body> 19 <h1>aria-live属性を使って自動的にメッセージが読み上げられる</h1> 20 <div aria-live="polite" id="status-region"></div> 21 <p>下のボタンを押すと、「ページが更新されました。」というテキストが表示され、自動的に同じ内容が読み上げられます。</p> 22 <button id="button" onclick="javascript:showStatus()">ページを更新</button> 23 </body> 24 </html>
20行目の空のdiv要素がARIAライブ・リージョンです。
以下は上記のコードを表示したもので、「ページを更新」を押下するとARIAライブ・リージョンがサポートされている環境では、追加されたメッセージが読み上げられます。
注意：ページのロード時にARIAライブ・リージョンが存在しないと読み上げられない
基本的に、ARIAライブ・リージョンはページのロード時に存在することが期待されています。そのため、メッセージを表示するのと同時にaria-live属性が付いた要素を追加しても、適切に読み上げられません。一部読み上げられる環境が存在するという情報もありますが、本稿執筆時、NVDA日本語版2020.3とGoogle Chromeの組み合わせでは読み上げられないことを確認しています。
しかし、以下のようにARIAライブ・リージョンの設置とその内容の更新に時間差を与えると、NVDAでも読み上げられることを確認しています。
コードを表示
1 <!DOCTYPE html> 2 <html lang="ja"> 3 <head> 4 <meta charset="UTF-8"/> 5 <title>ARIAライブ・リージョンをページのロード後に挿入する（要注意）</title> 6 <script> 7 function addText(elm, str) { 8 elm.appendChild(str); 9 } 10 11 function showStatus() { 12 let button = document.getElementById("button"); 13 button.setAttribute("disabled", "true"); 14 let statusRegion = document.getElementById("status-region"); 15 let msgContainer = document.createElement("p"); 16 msgContainer.setAttribute("aria-live", "polite"); 17 statusRegion.appendChild(msgContainer); 18 let msg = document.createTextNode("ページが更新されました。"); 19 setTimeout(addText, 1, msgContainer, msg); 20 } 21 </script> 22 </head> 23 <body> 24 <h1>aria-live属性を使って自動的にメッセージが読み上げられる</h1> 25 <div id="status-region"></div> 26 <p>下のボタンを押すと、「ページが更新されました。」というテキストが表示され、自動的に同じ内容が読み上げられます。</p> 27 <button id="button" onclick="javascript:showStatus()">ページを更新</button> 28 </body> 29 </html>
この方法を用いる場合、以下の点に注意が必要です。
ARIAライブ・リージョンの挿入とその内容の更新との時間差を発生させる際、
while分を使った手法では読み上げられず、setTimeout()などを使う必要がある。上記サンプルでは時間差を1msとしているが、実装状況や利用環境によってはもっと長い時間差が必要な場合が考えられる。
この手法では読み上げられない環境が存在する可能性がある。
このように、後からARIAライブ・リージョンを挿入する手法には不確実な点もあるので、なるべくページのロード時にARIAライブ・リージョンを設置するようにするのが良いでしょう。
関連ガイドライン項目
動的コンテンツ：ステータス・メッセージの適切な実装