a要素のリンクに対し、一時的に遷移できないように設定したい場合。完全にリンクを消したい場合はaタグごと消すのが良いですが、仮リンクやキャンペーン実施前・終了後などに見た目的に一時的に無効化したい場合の実装方法。

HTMLの表記は以下の通り。CSSで見た目を制御するため任意のclass属性を付けて設定します。さらにtabindex="-1"とaria-disabled="true"の属性を設定し、キーボード操作の無効化とアクセシビリティの振る舞いを設定します。

<a href="https://example.com/" class="is-disabled" tabindex="-1" aria-disabled="true">詳細はこちら！</a>

Tabキーで選択しEnterキーで遷移する…といったキーボード操作を無効化するために、tabindex="-1"を設定します。aria-disabled="true"を設定することで、この要素は無効であることを明示できます。

CSSは以下の通りで、クリックできないような振る舞いに設定します。デザイン部分は割愛。

.is-disabled {
 pointer-events: none; /* マウスクリック・タップを無効化 */
 cursor: default; /* カーソル形状をデフォルトに */
 opacity: .5; /* 視覚的に非活性を示す（任意） */
}

pointer-events: none;プロパティを指定することで、この要素はクリック・タップできないように設定できます。

これでマウスやタップの操作、および、キーボード操作両方から遷移を無効化できます。ただしくまで無効化にしてるだけなので、HTMLコードを見られたりするとリンク先がバレてしまいます。情報解禁前のリンクなどをあらかじめ埋め込んでおく…みたいな使い方は控えましょう。

おしまい♥