🗣️

markuplintおすすめカスタマイズ(Safariとlist編)

2024/02/28に公開

背景

既存の社内プロジェクトをメンテンスする際にmarkuplintを導入することになりました。
とりあえずrecommendの設定でいれてみると、ロール「list」は要素「ul」の暗黙のロールです (wai-aria) というエラーがいくつか出ていました。下記のようなソースコードで発生するエラーです。

<ul role="list">
  <li>...</li>
  <li>...</li>
  <li>...</li>
</ul>

これは本来ul要素がもともと暗黙的にlistロールを持っているのでWAI-ARIAのrole="list"は冗長であるとの指摘です。

Safariの独自仕様

Safariでは、VoiceOverユーザーからul要素の読み上げ時に生じる「リストの開始」「リストの終了」のアナウンスが多すぎるとの声により、2017年頃からlist-style: none; を指定したul要素、ol要素からセマンティクスを取り除いています。ウェブ開発者によるリストの乱用が招いたことですね。
参考:https://bugs.webkit.org/show_bug.cgi?id=170179#c1
後に、nav要素の中にあるリストに関してはセマンティクスが取り除かれないようになりました。
しかしnav以外の箇所でもリストの乱用をしていないのであれば、むしろ積極的にrole="list"を用いてロールを補完するべきです。VoiceOverユーザーにとっても、リストであることにより項目がいくつあるなどの情報が項目読み上げ前にわかり、便利な点もあると考えています。

markuplintのカスタマイズ

そこでmarkuplintの設定ファイルに以下を追加しました。

.markuplintrc
{
  "nodeRules": [
    {
      "selector": "ul,ol",
      "rules": {
        "wai-aria": {
          "options": {
            "disallowSetImplicitRole": false
          }
        }
      }
    }
  ]
}

これにて冒頭のエラーはすべて消えました。
逆にロールを必ず指定するようルールを加えても良いかもしれませんが、セマンティクスを削除されることになった背景を考えれば加えない方がよいと判断しました。
markuplint導入時の参考になれば幸いです。

株式会社トゥーアール

Discussion