キーボード操作を意識したHTML/CSSコーディング

この記事は 「Webアクセシビリティ Advent Calendar 2020」 5日目の記事です。 アクセシビリティ Advent Calenderの記事を寄稿するにあたり、少しの工夫であらゆるユーザーに対して優しいWebサイトを作れるようなHTML/CSSコーディングの方法についてまとめました。より多くの人にとって優しい・使いやすいWebサイトを作ることは訪れてくださるユーザーの方々だけでなく、クライアントにとってもユーザーの機会損失を防ぐことができるので多大なるメリットがあります。（よくコードが適当でもデザインが見えていれば良いって意見を聞くけれどそんなことはない） ただ、アクセシビリティを意識したHTML/CSSコーディングについてのまとめだと内容量が非常に多くなりZennなら記事より本で出したほうがベターになってしまうので、今回は数あるアクセシビリティの視点から「キーボード操作で

[Falky]

お、あんまり気に掛けられてなかった視点&テクニックばかりで興味深い

[t_motooka]

とても大事なことが書かれている。特にWebアプリのデザイナさん達にはぜひ読んでもらいたい。モーダルダイアログをESCキーで閉じれるサイトは、一気に信頼感上がるよね。

[t-sat]

ここで語られているよりずっと些細な事だけど、スマートフォンが主流になった辺りからかspace/shift+spaceでスクロールできないサイトが増えてきて、コーヒーすすりながら読み流せなくてだるい。

[buhoho]

webがこれ気をつけてくれれば生きるの楽になる/Micromodal.jsよさそう

[ar0]

“るinputはTabキーでのフォーカスが不可能になってしまうため、キーボード操作でWebサイトを利用している方はそのチェックボックスやラジオボタンを選択す”

[d4-1977]

button要素の使いこなし考えないとなあ… というのも、reset.cssなども関係してくるから、すぐに出来なくて、どうやるか？は、しっかり考える必要があるから、スキルを見るのにちょうどいいのかな

[Phenomenon]

ためになる

[salar_de_uyuni]

わかってんだけどSPANタグは便利だからな・・

[takogawa]

micromodalは便利なのかな。モーダル外はtab移動の対象外にする実装、最近担当してるPJでも対応してた。

[kvx]

このレベル出来る人は少ないんだろうか。

[a20130517]

なんでブクマ多いのに、コメントこんなに少ないの？タブ移動できるかどうかなんて、どうでよくない？

[tsutaken]

「ログイン画面でIDを入れてTABを押しても、パスワード欄に遷移しないのは納得いかない」と言う話では無かった。。。

[rjge]

チェックボックス・ラジオボタンの非表示の話とかモーダルのアクセシビリティとか見た目重視でつい忘れやすいのでまとまってるのめっちゃ助かる

[tech0403]

Androidには非常にわずかだが、トラックパットを採用してる機種も未だ生き残っているので、スマホでもキーボード操作はあり得る（それを言ったらガラケーもだが）。

[harry0000]

BootstrapはToggle buttonのinputをclip: rect(0,0,0,0);とかで消してて学びがある

[ultimatebreak]

良い記事。だが現実は予算と納期云々

[yoshi-na]

“:focus:not(:focus-visible)” なるほど！

[suneo3476z_tn]

Vue.jsでアクロバットなdiv/spanを書きまくっていたので反省。

[asayamakk]

a11yって何だろなって考えたらaccessibilityか！vimium使ってるからdivでボタン作られると困るのわかる。

[yamasta]

　いいまとめ。

[marony0109]

この視点はぬけていた。反省。

[NOV1975]

そういえば、スマホってまったくもってユニバーサルデザインじゃないよね。PCサイトをないがしろにしてはいけない。

[baronhorse]

勉強になるわ

[Helfard]

モーダルすごい…！

[nanamae]

エスケープがきちんと機能するアプリケーション、にっこりしてしまう

[t_f_m]

これさー、Chromeが86だか87だかのあたりからサイト自体にフォーカスあてる＆それを解除する方法がないの合わせ技で、テンキーでの細かい上下移動不可になってて、今めっちゃ辛い

[Sire]

アクセシビリティ

[roppara]

メモ

[danhox]

安易にアクセシビリティを口にするやつがいるのでブクマ

[eartht]

最近のブラウザは選択時にぶっとい枠線出してくるんで、outline:none にしてしまってたが、良いやり方を知った

[t-murachi]

ちゃんとアクセシビリティの話になっててとても良いと思う。