キーボード操作を意識したHTML/CSSコーディング
この記事は 「Webアクセシビリティ Advent Calendar 2020」 5日目の記事です。 アクセシビリティ Advent Calenderの記事を寄稿するにあたり、少しの工夫であらゆるユーザーに対して優しいWebサイトを作れるようなHTML/CSSコーディングの方法についてまとめました。より多くの人にとって優しい・使いやすいWebサイトを作ることは訪れてくださるユーザーの方々だけでなく、クライアントにとってもユーザーの機会損失を防ぐことができるので多大なるメリットがあります。（よくコードが適当でもデザインが見えていれば良いって意見を聞くけれどそんなことはない） ただ、アクセシビリティを意識したHTML/CSSコーディングについてのまとめだと内容量が非常に多くなりZennなら記事より本で出したほうがベターになってしまうので、今回は数あるアクセシビリティの視点から「キーボード操作で
「この機能のアクセシビリティどうしよう」と思ったら
こんにちは、この記事は Webアクセシビリティ Advent Calendar 2020 の6日目です。 すこし前に、同僚のエンジニアに「Webアプリケーションにドラッグ＆ドロップを使う機能を作ろうとしているんだけど、アクセシビリティは何をすればいいのかわからない」という相談をされる機会がありました。そのときの回答が、実はアクセシビリティを考える上ですごく大事なことだなと思ったので、ちょっと文章化してみることにしました。 相談されたのは「新しい機能で直感的な操作を実現するためにドラッグ＆ドロップを使いたいが、アクセシビリティチェックをパスできない気がする」というような内容でした。たしかに私の会社で運用しているチェックでは、キーボードやスクリーンリーダーによる動作チェックを行っているので、それらではドラッグ＆ドロップの操作ができそうには思えません。 彼のこの相談内容からは「良いものを作ろう」
ウェブページに文字拡大機能を置くのは「時代遅れ」 | Accessible & Usable
公開日 : 2015年2月17日 (2019年11月9日 更新) カテゴリー : ユーザビリティ / アクセシビリティ ウェブページの上部 (サイト共通ヘッダーなど) に、文字拡大機能が設置されているサイトを見かけることがあります。 文字拡大機能のイメージ。[大][中][小] ボタンが並んでいたり、[標準][拡大] ボタンが並んでいたりする。 ブラウザの標準機能として文字の拡大が可能であることを知らないユーザーが多い (ユーザーの大半はプリファレンスを変更しようという考えに及ばない) ことから、文字拡大機能を見える形でページ上に設置したほうが親切、というウェブユーザビリティ専門家が (かつては) 多かったように思います。 私自身、長い間ウェブユーザビリティに関わってきた中で、当座の利便性を優先してサイト側に文字拡大機能を実装する判断をしたり (そしてやっぱり止めたり) ... と紆余曲折な
画像とテキスト（文字情報）が一対になっているリンク | Accessible & Usable
公開日 : 2009年10月4日 (2015年3月9日 更新) カテゴリー : ユーザビリティ / アクセシビリティ Webページに実装されているリンクの中には、画像とテキスト（このコラム記事では以下、HTMLテキストだけでなく画像化された文字情報も含みます）のリンクが一対になっているもの、つまり両者が隣接していて、かつリンク先が同一になっているケースをよく見かけます。たとえば、テキストリンクにアイキャッチャーとなるアイコンが付随している場合や、テキストリンクを補足するイメージ写真が付いている場合、などです。たとえば、以下のような例があります。 テキストリンクにアイキャッチャーとなるアイコンが付随している例（成田空港の公式サイトのフッターより） 商品カテゴリーへのリンクにイメージ写真が付いている例（スターバックス コーヒーの「ビバレッジ」のページより） 具体的な商品（品番）へのリンクに写真
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
