重複したリンクを `aria-hidden=true` するな

投稿: 2025年5月10日

以下の記事を読みました。

当エンジニアブログで実施したアクセシビリティ改善の方法についての解説(tech.plaid.co.jp)

まず大前提として私は yuheiy さんのことをエンジニアとして尊敬していますし、一方的にめちゃリスペクトしています。そのうえで上記記事には同意できない点が複数見受けられました。そのうちのひとつ、ターゲット領域を広げるための重複するリンク(tech.plaid.co.jp)について私なりの考えを記します。

このような見た目のリンクは本ブログでも採用しています。ブログのトップページ(blog.w0s.jp)の記事一覧リンクをご覧ください。

このリンクは左側のサムネイル画像も <a href> に含まれており、マウスクリックやタッチ操作が有効です。

言うまでもなく、リンクが視覚上は左右に分かれていたとしても <a href> は一つにすべきです。これは position: absolute や float を使えば実現可能です。本ブログでは2024年6月まで float を、それ以降現在は position: absolute でやっているので参考にしてください。

しかし現実にはこれを2つの <a href> に分割してマークアップしているケースがあり、それを改善したくても「HTML は多少手を加えられるが CSS ファイルを触ることはできない」といったような運用上の制約に縛られることはあり得ます。

これに対し元記事では「片方のリンクをキーボードやスクリーンリーダーでは無視する」方法が紹介されています。元記事の意図を変えない程度に簡略化したコードがこちら。

<div class="link">
  <a href="..." tabindex="-1" aria-hidden="true">
    <img src="..." alt="" />
  </a>
  <p><a href="...">記事タイトル</a></p>
  <p>投稿：20xx年xx月xx日</p>
</div>

一つ目のリンクに tabindex="-1" と aria-hidden="true" を設定している理由は以下のように説明されています。

これによって、重複するリンクはタブキーでフォーカス移動する際にスキップされることに加えて、アクセシビリティツリーからは除外されて存在しないことになります。

一見すると、ある要素が存在しないように扱われることは問題のようにも思えますが、同等の役割を果たせる要素がすぐ隣に存在しているので、片方がアクセシブルになっているだけで十分なのです。

当エンジニアブログで実施したアクセシビリティ改善の方法についての解説(tech.plaid.co.jp)

確かにアクセシビリティ界隈【何処】ではこのような考え方があるのは承知しています。スクリーンリーダーで主に Tab キーを使って操作している人にとっては、マークアップ上重複したリンクがまるでひとつに纏められたような工夫はありがたいことなのかもしれません。

しかしそれはスクリーンリーダーユーザーがリンク遷移する場合に対してのみ有効に作用するユーザービリティ対策であり、広い視点でのアクセシビリティ観点ではむしろ逆効果にもなり得るマークアップと言えます。

WAI-ARIA の仕様では aria-hideen の使い方が以下のように説明されています。

Authors MAY, with caution, use aria-hidden to hide visibly rendered content from assistive technologies only if the act of hiding this content is intended to improve the experience for users of assistive technologies by removing redundant or extraneous content. Authors using aria-hidden to hide visible content from screen readers MUST ensure that identical or equivalent meaning and functionality is exposed to assistive technologies.

WAI-ARIA 1.2 – aria-hidden state

ここで注目したいのは後半部分で、要約すると「aria-hideen=true にするなら同一または同等の意味と機能性を保証しろ」と言っています。

もう一度マークアップ例を再掲しますが、さてこれは同一または同等の意味と機能性が保障されているでしょうか。

<div class="link">
  <a href="..." tabindex="-1" aria-hidden="true">
    <img src="..." alt="" />
  </a>
  <p><a href="...">記事タイトル</a></p>
  <p>投稿：20xx年xx月xx日</p>
</div>

「機能性（functionality）」は保障されています。一つ目のリンクが hidden 状態になっていても二つ目のリンクで同じリンク先に遷移できるからです。

しかし両者のリンクで「意味」は異なります。一つ目は画像（記事のサムネイルや著者のアイコン）、二つ目は記事タイトルであり、リンク先は同じでもリンク内のコンテンツは別の意味を持っています。それにも関わらず片方を aria-hidden="true" にしてしまうと、例えばその画像を保存したいユーザーにとっては操作に支障が出てしまう可能性があります。

これが技術ブログのサムネイル画像ならそれほど問題にはならないでしょうが、仮にアイドル本人のブログで、ここのサムネイルが本文にはない画像だったらファンはきっとそれを保存して後生見返したいと思うことでしょう。そんな誰かにとっては大事なコンテンツを制作者の判断で aria-hidden="true" して良いわけがありません。リンク内画像の alt が空であることと、aria-hidden="true" して良いかどうかはまったく別の問題です。

元記事の最後の方に

これらのような実装をするうえで意識すべきは、「そのUIは誰のためのものか？」という問いです。

当エンジニアブログで実施したアクセシビリティ改善の方法についての解説(tech.plaid.co.jp)

との至言があります。これは UI をゼロから考える際には有効かもしれませんが、今回の例のように「問題のあるマークアップを不完全でも改善したい」ケースには当てはまりません。

私はアクセシビリティ視点では逆に「その UI は特定の誰かものではない」と考えています。ユーザーは我々（コンテンツ運営者や制作者）の想像も付かない使い方をするかもしれない、それらをすべて事前想定することなど不可能なのだから、最初から想定せずどのような使い方がされても問題ないようにすることが大事だと思います。