アクセシビリティで気をつけるchecbox,radioのCSS - Qiita
※ 2020/12/15 フォーカスについて一部追記、参考リンクを追加 ※ 2020/04/16 加筆、CSSの表現を一部修正しました この記事で言いたいことは ラジオボタン、チェックボックスをdisplay:none;してキーボード操作できなくして、CSSで装飾するのは止めろ！ ということです。 巷にフォームのラジオボタンやチェックボックスをCSSで装飾するサンプルコードがありますが、キーボード操作を確認してるのか？と疑問に思うCSSをよく見かけます。 こんなコードを平気で書いてる人はアクセシビリティを全く考えてない人です。 input[type="radio"] , input[type="checkbox"] { display:none; } テックノート – ユーザビリティのよいチェックボックス・ラジオボタンのCSS見本５３選！ で紹介されてる中でもキーボード操作できるのは10個
改めてWebサイトの品質について考える
制作における品質とは？ Webサイトにおける品質（クオリティ）とはどういう意味でしょうか。 制作者であれば同じように捉えているかのようにみえる言葉ですが、大きく 2 つの見方があると思います。ひとつは、様々な状況に堪えられるように必要最低限の見た目と操作性を保証するという意味での品質。もうひとつは、与えられた状況の中で最高の見た目と操作性を実現するという意味での品質です。どちらも「品質」という言葉で表現できるものの、見ている方向は大きく異なります。 品質に対する捉え方の違いを考える上で スターバックスの日本サイトと、米国サイトは良い比較になります。いずれもレスポンシブ Web サイトですが、スマートフォンとデスクトップで見た目を大きく変えている日本サイトに対して、米国のアプローチは極めてシンプルです。アイコンの使い方やグラフィックも日本語版のほうがバラエティに富んでいますし、ナビゲーション
障害者差別解消法で求められるWebアクセシビリティ
インターネット上に広く公開されているWebサイト。ネット接続ができる人なら誰でもアクセスできるように思えるが、そうではない。Webサイトの作りによっては、重要な情報にアクセスできない人がいる。 代表例が、画像のみで情報を提供しているWebサイト。情報を画像として掲載している場合、音声読み上げソフトを通じてWebサイトを利用している視覚障害者には、その情報が伝わらない。音声読み上げソフトは画像の中身を読み上げられないからだ。 色のみに頼った情報提供にも問題がある。入力フォームで、「赤字の項目は入力必須」と書かれていたとする。色覚障害などのために色をうまく判別できないユーザーには、どれが入力必須項目なのか分からない（図1）。 マウスポインターを重ねなければ表示されないメニューも同様だ。手がふるえるなどの理由でマウスを使えず、キーボードのみでパソコンを操作しているユーザーには、操作できない。その
Webアクセシビリティについて勉強してみて知ったことや感じたこと | mkasumi.com
ガイドライン兼国際標準規格であるWCAG2.0をもとに日本工業規格としたのが「JIS X 8341-3：2016」です。2004年、2010年にも改正されていて、2016年4月18日現在、最新版は「JIS X 8341-3：2016」となります。過去のJISを知っている方は最新版との差を知りたいと思いますが、2010年版と違い、2016年版は「等級A」と言われていた適合レベルが「レベルA」となったり、すこし文言が変更されています。2010年と引き続き、WCAG2.0をもとにしているので、項目はWCAGと同じく61項目のままとなっています。 JIS X 8341-3：2016が元に作られている国際標準規格です。JISは日本の規格ですが、こちらは海外にも適用されます。チェックツールなど、海外で配布されているものはWCAGが基準となっています。 基本的に、JIS X 8341-3：2016 はW
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
メニューボタンを span だけで実装するのは良くないのでやめた話