JavaScript無効時のユーザビリティ
https://gyazo.com/4df236b9e1e181da4f89b4611c2745fa
社内で話した内容で気づけてよかったことなのでまとめてみる。自戒も込めてます。
SPAとかなんかJavaScriptあり気なんだしでかいFlash１つ置いててiPhoneで見る場合のと同義っぽい SPAをdisってる訳ではない
JavaScriptでガッチリ組みすぎてるのもアレだけど、とはいえ今のレイアウトはJavaScriptありきのものばかりだよね
そうなるとJavaScriptが動作してなくて崩れてたとしても情報はちゃんと見せてあげたい
リッチな表現はJavaScriptにのみ任せて、それ以外の基本動作は抜きでもちゃんと機能するようにしたい
以下例みたいな考え方をスタンダードにしたい
アコーディオンは通常時は出しておき、JavaScript読み込みで非表示にする
ローディングとかを入れる時、ローディング自体をすでに出しておきsetTimeOutで消えるみたいな処理にしない（消えなくなる）
Googleとかのウェブフォントも極力JavaScript読み込みなどを避ける JavaScriptで動作しないと表示しないテキストをやめる（重要なやつだと特に）
text()とかで出来る限り入れない・表示非表示で切り替える。
フォームバリデーションはブラウザのバリデーションも意識してやる（最低限required付けるとか）
JavaScriptバリバリ使っているサイトだったら最低限の礼儀として<noscript>タグをちゃんと使おう
結局のところマークアップなりの時点でHTMLの構造をしっかり作れという感じなのですが、デザインでもJavaScript使えて当然なリッチなものも多いのでその辺意識しないと結構大変だなと思うようになってます。 まあ結局ケースバイケースでJavaScriptやれる部分はJavaScriptでやるという部分はやっておき、万一のことは<noscript>なりできっちり表示しといたほうがいいよなと感じます。
というか最近フロントエンド界隈でのフレームワークだのビルドツールだのどうだこうだの話もありますが、まずは根本の話をしませんか、という気持ちがあります。こちらからは以上です。
参考URL