はじめに
クラウドサインでは、組織内でアクセシビリティ向上に向けた改善を進めています。
今回は、スクリーンリーダーと <footer> 要素にまつわるお話です。
きっかけ
2024 年 9 月に「弁護士ドットコム×SmartHR「出張！俺の電子契約」〜クラウドサインのアクセシビリティチェック〜」というイベントを開催しました。
視覚障害当事者である SmartHR 社の辻さんに、スクリーンリーダーを使ってクラウドサインを操作していただくイベントでした。
詳細は記事 イベント開催レポート：「出張！俺の電子契約」〜クラウドサインをアクセシビリティチェック〜 - 弁護士ドットコム株式会社 Creators’ blog をご覧ください。
このイベントを見ていて気づいたことがあります。
フッターが「フッター」と読まれていないぞ……？ （その場面）
クラウドサインのフッター部は、アプリ画面下部にある「ヘルプセンター」や「利用規約」などへのリンクが含まれる箇所です。
「書類の内容に同意」ボタンとフッター部は、別々のセクションに置かれています。そのため、フッター部が「フッター」と読み上げられれば、その境目がわかりやすくなります。
しかし、実際には「フッター」と読み上げられていないので「書類の内容に同意」ボタンとフッター部分の内容が連続して読み上げられてしまい、操作者にとって一続きのコンテンツに感じられる状態になっています。
このフッター部は、<footer> 要素で実装されています。
通常、<footer> 要素に差し掛かった場合、スクリーンリーダーは「フッター」と読み上げるはずですが、読み上げられていませんでした。
これはなぜでしょうか？
前提知識
スクリーンリーダーによる読み上げは、簡単に言えば、要素ではなく、その要素についている ARIA ロールに基づいて行われます1。
たとえば、 <button> 要素は通常「ボタン」と読み上げられますが、これはデフォルトで button ロールがついているためです。
<footer> 要素には通常 contentinfo ロールがついていて、スクリーンリーダーはこれを「フッター」と読み上げることが多いです。
原因調査・解説
ということで、クラウドサインのソースコードを読んでいきます。
すると、このフッターの祖先が <section> 要素であることが判明しました。これが原因でした。
<footer> 要素は、祖先に <main> 要素やセクショニングコンテンツがあるかどうかで、デフォルトのロールが変わります。
具体的には、以下の条件のいずれかを満たす要素が祖先にある場合、そのセクションのフッターとみなされ、デフォルトのロールが generic になります。
- main, article, aside, nav, section のいずれかである
- article, complementary, main, navigation, region のいずれかのロールが付与されている
そうでない場合、ページ全体のフッターとみなされ、デフォルトのロールが contentinfo になります。
改修
このフッターは、セクションのフッターではなく、ページ全体のフッターです。
そのため、<section> 要素の内側にいるのは不適と判断し、外側に出す形で改修を行いました。
これによって、祖先がセクショニングコンテンツではなくなり、デフォルトのロールが contentinfo となったので、フッター部が「フッター」と読み上げられるようになりました。
ほかにも
条件によってデフォルトのロールが変わる要素はほかにもあります。
たとえば、 <a> 要素です。通常は link ロールを持つと考えられますが、これは href 属性を持っている場合のみです。
href 属性がない場合、generic ロールになり「リンク」であると読み上げられなくなります2。
まとめ
今回の事例では、スクリーンリーダーが <footer> 要素を意図通りに読み上げない原因が、祖先要素に <section> が含まれていたためであることがわかりました。これにより、デフォルトのロールが generic となり、「フッター」として読み上げられなくなっていました。
この問題を解決するために、 <footer> 要素を <section> 要素の外側に移動させる改修を行いました。これにより、デフォルトのロールが contentinfo となり、スクリーンリーダーが「フッター」と正しく読み上げるようになりました。
他にも、要素の条件によってデフォルトのロールが変わる場合があるため、アクセシビリティを考慮したマークアップを行う際には注意が必要です。
