何が一番いいのか考え中です…
JavaScript無効
JavaScript（以下JS）が使えなくなっているユーザーに対してサイトやアプリケーションはどうなっているべきでしょうか？
- そもそもJSを無効にするユーザーはリテラシーが高いから動いてなかったら有効化するでしょ
- そもそも無効にしないでしょ
みたいな意見があるかもしれません。
僕の考えはこうです。
- JSを無効化なんか調べればすぐできる
- ブラウザバックのハックや広告だらけのサイトなどの出現によって無効化したい需要が増えた
- JSがバグって動かなくなってたらどうするの？
- JSってそもそもHTMLやCSSだけではできないような高度なユーザー体験の補助になるものじゃなかったか？
この辺を考えると、
- じゃあJSなしでも最低限動いてた方がいいでしょ
- JSのあるなしでブラウザやスクリーンリーダーから読み取れる情報に差があってもいいけど、それぞれ意味の違う情報をユーザーに与えてしまったらダメだよね
となりました。
2個目を少し補足します。
タブ
例えばタブです。
APGによるとタブはrole="tab"のような属性や、キーボードによる操作が必要です。
つまりJSが必要で、JSありきのコンポーネントです。
ではJS無効時タブはどうあるべきでしょうか？
JS無効時を気にしなければおそらく以下のようなHTMLになるでしょう。
<div role="tablist">
<button id="tab1" role="tab" tabindex="0" aria-selected="true" aria-controls="panel1">タブ1</button>
<button id="tab2" role="tab" tabindex="-1" aria-controls="panel2">タブ2</button>
<button id="tab3" role="tab" tabindex="-1" aria-controls="panel3">タブ3</button>
</div>
<div id="panel1" tabindex="0" aria-labelledby="tab1">パネル1</div>
<div id="panel2" hidden="until-found" tabindex="-1" aria-labelledby="tab2">パネル2</div>
<div id="panel3" hidden="until-found" tabindex="-1" aria-labelledby="tab3">パネル3</div>
JS無効時これがどうなるかというと、ボタンは「タブ」として認識され、かつtabindexが負であったりhiddenがついたコンテンツにはアクセスできません。
（hidden="until-found"をつければ検索や:target時見えるようになりますが、サポートされているブラウザのバージョンが比較的新しいものに限られているため、現状「これで安心」ではなさそうです。）
また、スクリーンリーダーユーザーはこれをタブだとして認識するので、当然左右キーの押下などでタブを切り替えられると思うはずです。（リテラシーが高ければ動かないことを理解できているかもしれませんが…）
しかし、実際はJSが無効になっていれば動きません。
「あれ？動かないぞ」となってしまったらユーザーは混乱しますし、いい印象は受けないはずです。
僕はこれを良くない（最善ではない）と考えました。
できることはやっておきたいですが、何ができるでしょうか？
JS無効時はアンカーリンクにしちゃおう！
role="tab"をやってしまうのは先ほどのセクションに書いた通り、よくなさそうです。
JS無効環境でタブはタブとして機能しないので、別のものを考える必要があります。
JSは「ユーザー体験の補助」として使う という考えのもとで、タブをなんのために使いたいのか、そもそもなぜタブなのか考えてみました。
「多分ページが長く見にくくなるからシンプルに見せて本来ページの下の方に行ってしまうコンテンツも見せたい/見やすいようにしたいんだろうな」
わざわざ画面上に一つのタブパネルしか表示したくない理由はこれしか思いつきませんでした。
ページが長くなって後半のコンテンツが見られにくくなる問題は「タブのボタンをアンカーリンクにして、かつタブとパネルをstickyコンテナにしてボタンを追従させる」である程度解決できます。
JSは「ユーザー体験の補助」として使う を考えると、JSが無効な時からJS有効化でアンカーリンクより少し便利になっているので良さそうです。
JS無効時はセレクトボックスで切り替えられるようにしちゃおう！
もしくは、一つのタブパネルだけ見せたいという強い目的があるのであれば、以下のように書けば達成できるでしょう。（例が雑ですみません）
ただこれはインターネットが不安定などの原因でCSSファイルが読み込まれない場合
「セレクトボックスを変更するとパネルが切り替わります」が挙動と一致しなくなったりselectの用途とズレるのであまり良くなさそうです。（ただテキストで説明があるので混乱はしなさそうです。）
<div class="c">
<label for="message">セレクトボックスを変更するとパネルが切り替わります</p>
<select id="message" name="tab">
<option value="1" selected>1</option>
<option value="2">2</option>
</select>
<div id="panel1" class="panel">panel1</div>
<div id="panel2" class="panel">panel2</div>
</div>
.panel {
display: none;
}
.c:has(option[value="1"]:checked) #panel1 {
display: block;
}
.c:has(option[value="2"]:checked) #panel2 {
display: block;
}
まとめ
- JSなしでも最低限動いてた方がいいでしょ
- やるとしたら何ができるだろうか？
- JSのあるなしでブラウザやスクリーンリーダーから読み取れる情報に差があってもいいけど、それぞれ意味の違う情報をユーザーに与えてしまったらダメだよね
- 混乱させたら良くない
最近アクセシビリティを意識したコンポーネントは増えてきたように思いますが、
JSがあることを前提にしたものも多いなぁと思っています。
工数や需要の問題があるので絶対やらないといけないとは思っていませんが、よりいいものが作れるなら自分は気にして作っていきたいなぁと思っています。