Zenn
🔗

HTMLで無効なリンクを表現する

2024/10/03に公開
HTML 5
アクセシビリティ
tech

HTMLのa要素はdisabled属性に対応していませんが、disabled属性を持つbutton要素のようにふるまう無効なリンクを実装したくなることがあるかもしれません。
ここでは、そのような実装について考えてみます。

要件

次の性質を満たすことを考えます。

  • リンクであることがわかる
  • リンクとしての機能が無効化されている
  • 無効化された要素であることがわかる

実装

次の条件を満たすように実装します。

  • href属性を持たない
  • role="link"を持つ
  • aria-disabled="true"を持つ

つまり、次のような実装になります。

<a role="link" aria-disabled="true">...</a>

ARIA in HTMLでも同様の実装が例示されています。

実装の説明

href属性を持たない

href属性を持たないa要素はリンクとしての機能を持ちません。暗黙のロールもlinkではなくgenericとなります。これでリンクとしての機能を無効化することができます。

ただし、HTMLの仕様ではhref属性を持たないa要素は「リンクがあるべき場所にリンクの代わりに配置されたプレースホルダー」として機能します。
今回はプレースホルダーではなく、リンクそのものとして実装したいため、このままの性質では不適切です。

role="link"を持つ

href属性を持たないa要素をリンクとして扱うためにロールをlinkに上書きします。

一般的に暗黙のロールと一致したロールを明示的に付与することは避けるべきですが、href属性を持たないa要素の暗黙のロールはlinkではなくgenericであるため問題ありません。

aria-disabled="true"を持つ

aria-disabled="true"を使用して、無効な状態であること支援技術に知らせることができます。

注意点

このように、HTMLの標準では表現できない無効なリンクの状態をARIAを用いて実現できます。
ただし、標準的でない実装は実装者だけでなくユーザーにも混乱を招く恐れがあるため、このような実装が本当に必要であるかの判断は慎重すべきです。

参考

https://html.spec.whatwg.org/#the-a-element
https://www.w3.org/TR/html-aria/

Discussion