「SafariではVoiceOverでリストとして読み上げられないため、list-style: none;を設定したul要素にはlistロールを指定すべき」という主張を聞いた。

情報源を探す

元々Safariでリストマーカーを削除したリスト要素がリストとして扱われないのは以前から知られている話であり、 W3Cのドキュメントにも2019年時点で記載されている。

ただし、以前はSafariではこのような挙動をするため注意が必要であるといった主張が多かったように思う。

だが調べてみると、ここ数年で「ul要素にはlistロールを指定すべき」といった主張をする記事やSNSの投稿が特に日本語で多く見られた。

日付や内容を見ると、どうやらこの記事を元に広まっているように思われる。

この記事では、最終的に「ul要素にはlistロールを明示するべき」という主張がされている。

この挙動は仕様

この挙動はWebkitにバグとして報告されているが、次のように回答されている。

This was a purposeful change due to rampant “list”-itis by web developers.

In the same way WebKit differentiates layout tables from data tables, it now differentiates layout lists from data lists. VoiceOver users always used to file bugs that there were too many “start of list” “end of list” announcements on the Web. Customers seems much happier in the 3 years since this change went in.

Basically, if you remove all default visible indication of the list, there is no indication to a sighted user or screen reader user that the content is a list. If you want to override this heuristic for accessibility, you can always add an explicit ARIA role=“list”

https://bugs.webkit.org/show_bug.cgi?id=170179

つまり、この変更はWeb開発者による「list」の乱用により、VoiceOverを実際に利用しているユーザーからリストのアナウンスが多すぎるというフィードバックを受けて、意図的に変更されたということである。

どのように対応すべきか

ul要素にlistロールを指定すべきかどうかは、そのコンテンツがリストとして扱われるべきかどうかに依存するべきであり、一律に適用するべきではないだろう。

さもなくば、Webkitが対応を考えたように、実際にVoiceOverを利用しているユーザーにとっては不便な状況が生まれてしまう。

少なくとも「ul要素にはlistロールを明示するべき」という主張は誤りであると思う。