<< TOPへ
Web accessibility trends and implementation in dynamic web applications
・モダンなシングルページアプリで、動的なアプリのWebアクセシビリティ対策の概要を報告。2022年。
・The NASA Astrophysics Data System (ADS)
https://ui.adsabs.harvard.edu/
・よく見かけるWebAIMというのは、Webアクセシビリティの非営利団体だったのね。ブログアーカイブが2006年からある。
https://webaim.org/
・動的にコンテンツが変わるページでのアクセシビリティ対策として、基本的に視覚障害者のユーザーは見出しをアクセスに使うことに言及し、ADSのWebアプリは見出しを多用して構造やレイアウトを提供していると言及。
・このことによって、スクリーンリーダーで関心ある分野や検索結果のタイトルをリストアップできるとのこと。イメージはしやすいし、新規性のあるところでもなさそう
・ダイナミックコンテンツとしては、「時間経過とともに変化する」ということで、特別な属性role="status", role="alert"を使っていることと、aria-atomic="true"で要素テキスト全体を読み込ませているとのこと。良く分からないのでこの3つを調べてみた。どうやらARIA (Accessible Rich Internet Applications) の属性らしい。
１．role="status"
role="status" は、ユーザーの注意を引く必要はあるが、そのためにユーザーの現在の活動を中断させるほどではない情報を伝えるために使用されます。例えば、フォームの送信が成功したことを示すメッセージなどが該当します。このロールを持つ要素には、通常、非常に短いメッセージが含まれ、スクリーンリーダーはユーザーが現在行っている作業を中断させることなく、これらのメッセージを読み上げます。
２．role="alert"
role="alert" は、ユーザーの注意を直ちに引く必要がある情報、特にエラーメッセージなどを伝えるために使用されます。このロールが指定された要素は、ページ上で自動的に発生し、スクリーンリーダーによって即座に読み上げられることが期待されます。role="alert" はユーザーの現在の作業を中断させる可能性があるため、必要な場合にのみ使用することが推奨されます。
３．aria-atomic="true"
aria-atomic="true" は、スクリーンリーダーが要素の変更を検出した場合に、その要素内の変更されたテキストだけでなく、要素全体の内容を読み上げるよう指示します。この属性は、要素の一部が動的に更新されるときに、コンテキストを失わずに全体の情報をユーザーに提供するのに役立ちます。例えば、リアルタイムで更新されるステータスメッセージがある場合、この属性を使用すると、スクリーンリーダーは更新された部分だけでなく、関連する全体の情報をユーザーに伝えます。
・総じて、スクリーンリーダーによって使われるもの。
・よくよくADSのサイトを見てみると、確かにソースに role="xx" が多用されている。画面リーダーを意識したつくりにすることが大切ね。
・検索結果を出すようなサイトにおいては、アクセスのしやすさが特に大事なので、有益な実践報告だと思う。勉強になるなぁ。
https://www.researchgate.net/publication/358321064_Web_accessibility_trends_and_implementation_in_dynamic_web_applications