読み上げられないスケルトンスクリーン

生活雑貨の店のトップページに「新着アイテム」のセクションがあります。商品はページの表示後に別のリクエストで取得され、届くまでの間は灰色のカードが3枚並びます。写真の場所に四角が一つ、商品名と価格の場所に棒が2本あります。これがスケルトンスクリーンで、MUIのSkeleton、shadcn/uiのSkeleton、Bootstrapのプレースホルダーなど、多くのコンポーネントライブラリーに用意されています。1、2秒で商品が届き、灰色のカードと入れ替わります。画面が見える人には、まずレイアウトが見え、そこに中身が入っていく様子が分かります。

商品を取得している間に、スクリーンリーダーの利用者がページを上から読んだとします。聞こえるのは「新着アイテム、見出しレベル2」と、セクションの後ろにある「30日以内なら返品無料です。」です。灰色のカードは中身のない div なので、読むものがありません。商品を読み込んでいることは伝わらず、商品が届いても何も伝わりません。利用者はもうセクションを空だと思っているため、たまたま見出しまで戻らない限り、新着アイテムには出会えません。

もう一つの例では、すべてのプレースホルダーに aria-busy="true" と aria-live="polite" が付いています。React Loading Skeletonも、プレースホルダーを1つずつ包む span にこの2つを付けています。コードだけ見ると、待っていることを伝えていそうです。しかし伝わりません。プレースホルダーには相変わらず読むものがなく、商品が届くと、ライブリージョンはプレースホルダーごと取り除かれます。中身が変わったライブリージョンがないため、伝えるものがありません。

「新着アイテムを読み込み中…」や「新着アイテムを3件読み込みました」は、WCAGのいうステータスメッセージです。待っている状態や処理の結果を伝え、フォーカスは移しません。達成基準4.1.3は、こうしたメッセージをロールやプロパティで判別できるようにし、フォーカスを移さずに支援技術が伝えられることを求めています。スケルトンは待っている状態を灰色の形だけで示し、メッセージだと示すロールもプロパティもないため、見えない人には何も伝わりません。これはW3CがF103で示している失敗です。入れ替わりに表示される商品そのものは、達成基準の解説書が検索結果について述べているとおり、ステータスメッセージではありません。ステータスメッセージにあたるのは「新着アイテムを3件読み込みました」のような一文で、修正前にはそれがないため、待ち時間が終わったことも言葉では伝わりません。

2つ目の修正前は惜しいところまで来ていますが、どちらの属性も付ける場所が違います。aria-live を付けた要素はライブリージョンになり、ページにある間に中身が変われば、スクリーンリーダーが読み上げます。ところがスクリプトは、この領域の中身を変えずに、領域そのものを取り除きます。ライブリージョンは、初期設定では中身が取り除かれたことを伝えません。aria-busy="true" は、要素が更新中であり、更新が終わるまで伝えるのを待ってもよいと支援技術に知らせる属性です。メッセージではないため「読み込み中」とは言いません。しかもここでは、更新されずに捨てられるプレースホルダーに付いています。

スケルトンスクリーンは、商品一覧、フィード、ダッシュボード、検索結果など、ページの表示後に読み込まれる部分に使われます。後から読み込まれる部分こそ、スクリーンリーダーの利用者が見落としやすいところです。

10グループ中2グループに影響

• 全盲 （影響あり）
• 弱視 （影響あり）
• 色覚 （影響なし）
• ろう （影響なし）
• 難聴 （影響なし）
• 発話 （影響なし）
• 手の操作 （影響なし）
• 筋力・可動域 （影響なし）
• 認知 （影響なし）
• 光過敏 （影響なし）

• 視覚を使わない 読み込み中にページを読むスクリーンリーダーの利用者には、見出しの次にセクションの後ろの行が読まれ、セクションが空のように聞こえます。商品が届いたことも伝わらないため、そのまま先へ進み、たまたま戻ったときにしか商品に出会えません。
• 視覚が限られる 画面拡大ソフトと音声読み上げを併用する人にも、読み込み中であることや商品が届いたことは読み上げられません。ページの別の場所を拡大していると、灰色のカードが商品に変わったことにも気づかないことがあります。

ページの読み込みが終わるのを待つスキャンは、そろった一覧を見て合格にします。調べるころにはスケルトンは消えていますし、中身のない div はどのルールにも違反しません。スケルトンを探すaxeのルールもありません。EaseWebの診断は、読み込み中のページも見ています。スケルトンのクラスを持つプレースホルダー（MUIやReact Loading Skeletonが使う「skeleton」を含むクラス、shadcn/uiの data-slot="skeleton"、Bootstrapの placeholder-glow と placeholder-wave）が現れ、その外にライブリージョンがなければ、人が確認すべき項目として報告します。待っていることと届いたことが実際に読み上げられるかは、読み込み中にスクリーンリーダーで聞いて確かめるしかありません。スケルトンを使いやすくするようAIに頼むと、プレースホルダーそのものに aria-busy や aria-live を付けることがあります。これが2つ目の修正前です。