クランドからの挑戦状

【クランドからの挑戦状】

豪華でお得なヒミツの酒ガチャを
ページのどこかに隠しました。

画像の謎を解ければ、
隠しリンクの場所が分かります。
ぜひ探してみてください。

「酒ガチャ感謝祭」
▼ ページはコチラ ▼https://t.co/gWNeit8C7c #なぞ解き #謎解き pic.twitter.com/SOOwcpbm06
— 「クランド」クラフト酒のお店 (@KURAND_INFO) February 22, 2024

画像の謎を解ければ、
隠しリンクの場所が分かります。

と主張している。
とはいえ、命題とその裏の真偽は必ずしも一致するとは限らない。
画像の謎が解けなくても、隠しリンクの場所が分からないとは限らない。

指定のページ
酒ガチャ感謝祭 | 酒・日本酒の通販ならKURAND（クランド）
を開き、Tab キーをたくさん押すことで、いずれ該当の隠しリンクにフォーカスが当たる可能性がある。

実際に試してみたところ、Tabキーを100回弱押すことで該当の隠しリンクにたどり着くことができた。

なお、このキャンペーンは 2024年3月6日 (水) 23:59 までである。

リンクを Tab キー連打で発見されなくする方法

HTML タグに属性 tabindex を設定することで、Tab キーでこの要素にフォーカスを移すことができるかどうかを設定できる。
属性 tabindex の値を -1 (などの負の値) に設定することで、Tab キーでフォーカスを移せないようにできる。

tabindex - HTML: ハイパーテキストマークアップ言語 | MDN

<a href="https://example.com/" tabindex="-1">Tab キーでフォーカスが移らないリンク</a>

発見されにくくする方法としては逆効果かも

tabindex 属性を用いることで、隠しリンクを「Tab キーの連打で」発見されなくすることができる。
しかし、「発見されにくくする」方法としては逆効果の可能性がある。
なぜなら、リンクを表す a 要素に属性 tabindex を設定するのは普通のことではないので、CSS の属性セレクターにより発見されやすくなってしまう。

属性セレクター - CSS: カスケーディングスタイルシート | MDN

隠しリンク以外のリンクに tabindex 属性を指定すると、以下のような問題が生じる。

負の値を設定すると、Tab キーでフォーカスを移せなくなるので、アクセシビリティが下がる
非負の値を設定すると、負の値を設定した隠しリンクと区別される

JavaScript で以下のようにすることで、属性セレクターにより値が - で始まる (すなわち、負の値が設定された) tabindex 属性がついた a タグを取得できる。
(たとえば、開発者ツールのコンソールでこれを実行する)

links = document.querySelectorAll('a[tabindex^="-"]');

結論

今回の場合、Tab キーを数十回連打するよりも素直に謎を解くほうが簡単だと考えられるので、無理に今より見つけにくさを上げる意味は薄いと考えられる。

隠しリンクをどのように設定するかは、それをどの程度不正に見つけられたくないかなどを考え、コストやアクセシビリティなどとのバランスのいい方法で設定するのがいいだろう。