4.5:1に苦しむデザイナーの皆様へ | 水無月ばけらのえび日記
公開: 2019年6月23日23時40分頃 WCAG 2.0 の達成基準 1.4.3 にはカラーコントラストの基準があり、背景と文字とに4.5:1以上のコントラスト比を持たせることを要求しています。 1.4.3 コントラスト (最低限) : テキスト及び文字画像の視覚的提示に、少なくとも 4.5:1 のコントラスト比がある。ただし、次の場合は除く: (レベル AA) 大きな文字: サイズの大きなテキスト及びサイズの大きな文字画像に、少なくとも 3:1 のコントラスト比がある。付随的: テキスト又は文字画像において、次の場合はコントラストの要件はない。アクティブではないユーザインタフェース コンポーネントの一部である、純粋な装飾である、誰も視覚的に確認できない、又は重要な他の視覚的なコンテンツを含む写真の一部分である。ロゴタイプ: ロゴ又はブランド名の一部である文字には、最低限のコントラスト
アクセシビリティの専門家の言うことは唯一の正解ではない | 水無月ばけらのえび日記
公開: 2017年10月25日22時5分頃 11月発売予定の「インクルーシブHTML+CSS&JavaScript - 多様なユーザーニーズに応えるフロントエンドデザインパターン (www.amazon.co.jp)」という書籍には、こんな一節があります。 選択肢は、視覚的にも非視覚的にもユーザーにわかりやすく表示することが重要です。音声によるアクセシビリティの専門家は違うことを言っているかもしれませんが、実際のところ、このやり方は間違っている、このやり方でなければならない、というようなことは言えません。何が最も効果的なソリューションなのか考えることは、みなさんのデザイナーとしての判断になります。 正直ちょっと何を言っているのか分かりにくいかもしれませんが、アクセシビリティを向上させるための方法は一つではないということ、特に、専門家の言っていることが唯一の正解ではない、ということを言ってい
規格の策定者が解説する JIS X 8341-3:2010 - 感想 | 水無月ばけらのえび日記
公開: 2010年9月13日1時30分頃 規格の策定者が解説する JIS X 8341-3:2010 (www.ciaj.or.jp)、最後に私の感想を述べておきます。 JIS X 8341-3:2010の規格票自体は、あまり価値がないと思います。基準はWCAG2.0に対応しているので新規性はありませんし、単独で読んで理解できるようにも作られていません。WCAG2.0はWebコンテンツですからUnderstanding (www.w3.org)やTechniques (www.w3.org)にリンクが張られていて相互に行き来できますが、JIS規格票はそうではありません。仕事で厳密に参照したい場合には当然必要になりますが、アクセシビリティを確保したい、学びたいという場合にはWCAG2.0を見れば十分で、わざわざJIS X 8341-3:2010を参照する必要はないでしょう。 むしろ重要なのは
JIS X 8341-3:2010の達成基準は難しい | 水無月ばけらのえび日記
公開: 2011年4月29日19時45分頃 こんな記事がありますね……「中央省庁Webサイトのアクセシビリティ対応はまだ不十分 日経BPコンサルティングが調査結果を発表 (pc.nikkeibp.co.jp)」。 この調査では、同社が独自に設けた20の項目について調べた（調査概要）。項目は大きく3つに分類される。知覚に関する項目（説明が必要な画像に代替テキストを付与しているか、など）、操作に関する項目（キーボードのみで適切にページ移動ができるか、など）、理解に関する項目（Webページで使われている言語が明示されているか、など）である。いずれの項目も、2010年8月に公示されたWebアクセシビリティに関する規格「JIS X 8341-3:2010」を参考にして設定されている。 JIS X 8341-3:2010という名前はちらっと出ているものの、これはあくまで独自調査です。JIS X 834
ウェブデザインとはいったい何なのか | 水無月ばけらのえび日記
公開: 2012年4月11日1時25分頃 「首相官邸ホームページのリニューアル構築費用に対して製作者側からの考察 (7dw.jp)」というブログ記事を書かれている方がいらっしゃるようで。 申し訳ないのですが、最初から最後まで同意できない部分の方が多いですね。特に看過できないのがアクセシビリティの部分で、これは既に複数の方からツッコミが入れられています。 Re: 首相官邸ホームページのリニューアル構築費用に対して製作者側からの考察 (kidachi.kazuhi.to)Kotaro Kokubo - Google+ - 最近「デザイン」という言葉のひどい扱いを頻繁に目にしていたたまれない気持ちになって いたところにダメ押しのような某… (plus.google.com)「アクセシビリティに配慮すると、ビジュアルデザインが制約を受ける」「ビジュアルデザインとアクセシビリティは両立しない」という
スキップリンクにまつわる議論まとめ | 水無月ばけらのえび日記
公開: 2012年3月22日22時0分頃 「スキップリンクの議論: 前提まとめ」の続きです。 まず、前提をおさらいしておきます。 WCAG2.0 2.4.1には"Bypass Blocks"という等級Aの基準があるその実装方法の一つがスキップリンクビジュアルブラウザの利用者もスキップリンクを利用できるように、見えるようになっている必要があるスキップリンク以外の実装方法もあるが、ビジュアルブラウザで利用できるものはほとんどないこの前提をふまえた上で、スキップリンクにまつわるいくつかの議論をまとめていきたいと思います。 スキップリンク実装の現状2.4.1は達成等級Aです。これは最低限の等級で、すなわちあらゆるサイトに求められる必須の要件ということになります。 また前提で述べたように、スキップリンクは見えている、もしくはフォーカス移動すると見えるようになる必要があります。ほとんどのサイトが、その
スキップリンクの議論: 前提まとめ | 水無月ばけらのえび日記
スキップリンクブロックスキップを達成するための実装方法はいくつか提示されていますが、その筆頭に挙げられているのが以下のテクニックです。 G1: Adding a link at the top of each page that goes directly to the main content area (www.w3.org)G1: メインコンテンツエリアへ直接移動するリンクを各ページの先頭に追加する (waic.jp)「本文へ」などのリンクを設けて、メインコンテンツの開始位置までフォーカスを移動させられるようにするという手法です。 G123にもブロックスキップのリンクを設ける手法が挙げられています。 G123: Adding a link at the beginning of a block of repeated content to go to the end of the b
首相官邸サイトリニューアル、しかしすぐに再リニューアルが必要 | 水無月ばけらのえび日記
公開: 2012年4月8日16時40分頃 首相官邸 (www.kantei.go.jp)のサイトがリニューアルしたそうで。 4500万円かかったと報じられていますが、何をやったのかが分からないので、高いか安いかは評価のしようがないですね。単純に規模から「やるべき事」を考えてみると、CMS抜きで4500万円かかっても不思議ではないと思います。戦略をみっちりやったり、それなりなCMSを入れたりすれば足りなくなるかもしれません。 そして実際にサイトを見てみると、まず、見た目だけで以下のような点が気になるわけです。 背景にうっすらと写真が敷かれていますが、肝心な部分がコンテンツの下敷きになってよく見えない上に、「首相官邸」というタイトルまわりが読みにくくなってしまっています。プロがこういう中途半端な写真の使い方をすることはまずありません。写真を見せたいならちゃんと見せるでしょうし、見せなくても良い
はてなブックマークボタン設置サイトがトラッキングをしていた問題 | 水無月ばけらのえび日記
公開: 2012年3月15日2時15分頃 2011年9月からとのことですが、正直申しまして、全く気づいておりませんでした……。 はてなブックマークボタンは2011年9月1日より行動情報の取得をしている (d.hatena.ne.jp)ブログパーツやソーシャルボタンの類でアクセスログが残るのは当然だけどトラッキングされるのは当たり前にはなっていない - 最速転職研究会 (d.hatena.ne.jp)はてなブックマークボタンのトラッキング問題で高木浩光先生が決別ツイートをするに至った経緯まとめ (matome.naver.jp)はてなブックマークボタンを外しました (blog.tokumaru.org)はてブボタンを表示するスクリプトがスパイウェア的な挙動をしていたことが話題に (it.slashdot.jp)はてなブックマークを経由したトラッキングに関するお詫び (www.nantoka.
SVGをobject要素で活用する | 水無月ばけらのえび日記
更新: 2012年2月24日23時20分頃 SVGというものはずっと昔からありました。かつてはブラウザ側の対応がいまいちで、プラグインを入れたりしないと表示できなかったりもしており、あまり使われていませんでした。しかしIE9がSVGに対応したことで、かなり使えるようになってきた印象があります。最近では仕事でもガチでSVGを使うことが増えてきています。 SVGの特長のひとつは、ベクターグラフィックなので伸び縮みに強いという点です。サイズ可変の領域にうまい具合に背景を敷きたいときには便利です。そして、最近はサイトのコンテンツ全体がサイズ可変ということも増えてきました。というか元々可変ではあると思うのですが、Media Queries (www.w3.org)を使った派手な変更を伴うパターンが増えてきて、画像のサイズを大幅に変更したいケースが増えてきています。 写真などはJPEG画像を拡大・縮小
企業のリンクポリシーが無茶な要求をする理由 | 水無月ばけらのえび日記
公開: 2010年4月7日20時5分頃 「日経新聞電子版始動、しかし個別記事へのリンクを禁止、違反者に損害賠償請求も示唆 (slashdot.jp)」。 またまた出ました。無断リンク禁止。このような主張は、古い企業にありがちなものですね。 リンクを張る場合は連絡してください。リンクはトップページへお願いします。個別記事へのリンクはお断りします。個別記事にリンクさせないのはナンセンスだ、リンクするたびに連絡しなければならないなんて手間がかかりすぎる。どうしてこんな無茶な要求をするのか全く理解できない。……そう思われる方が多いと思います。 しかし、実はこの要求には理由があります。仕事柄、大企業のWeb担当の方や法務の方と議論させていただく機会もあるのですが、「なぜこんなポリシーを作ったのか」という問いに対する答えは、おおむね以下のようなものでした。 リンク元のサイトとの関係性を誤解されたくない
URLを知られたらアウトな管理画面 | 水無月ばけらのえび日記
更新: 2010年4月3日23時20分頃 メッセサンオー (www.messe-sanoh.co.jp)で個人情報が流出したというお話が。 秋葉原ゲームショップの顧客情報が閲覧可能に - アダルトソフト購入履歴なども流出 (www.security-next.com)ＰＣゲーム通販大手の顧客名簿が流出 (www.yomiuri.co.jp)メッセサンオー、PCゲーム通販の顧客情報がネットで流出 (internet.watch.impress.co.jp)Internet Watch の記事には追記がありますね。 なお、メッセサンオーが通販サイトで導入していたショッピングカートを提供するWEBインベンターは、Googleにインデックスされないように対策した最新の管理プログラムを公開し、利用者に対して適用を呼びかけている。 以上、メッセサンオー、PCゲーム通販の顧客情報がネットで流出 より ほ
ケータイの流儀を常識と思いこむのは危険 | 水無月ばけらのえび日記
公開: 2009年8月6日14時10分頃 「やはり退化していた日本のWeb開発者「ニコニコ動画×iPhone OS」の場合 (takagi-hiromitsu.jp)」。 iPhone・iPod Touch用の「ニコニコ動画」アプリのサーバ側実装が脆弱だったというお話。iPhoneやiPod Touchの端末製造番号 (UDID) は秘密情報ではない上に詐称可能なのですが、そのUDIDに依存した認証を行っていたため、他人のUDIDが分かると、その人の非公開マイリストなどが見られてしまう……ということのようで。現在は修正されているようです。 脆弱性の話としては、認証方法の不備という単純な話なのですが、むしろ周辺の反応が興味深いですね。いちばん面白いと思ったのがこのブックマークコメント。 ツッコミがたくさん入っていますが、「流儀が違う」というのは、実は全くその通りなのですね。端末固有IDによる
ビジネス・アーキテクツのマークアップエンジニア | 水無月ばけらのえび日記
公開: 2024年3月7日23時30分頃 「「HTMLやってる」人を何と呼ぶ？ (slashdot.jp)」。 一口に「HTMLやってる」と言っても、そのレベルはピンキリだと思いますが。特に、「アクセシブルなHTMLを書くことができる」とか、「企業サイトのガイドラインの作成や監修ができる」という人は、それほど多くないように思います。HTMLを専門にしている人は、HTML4の仕様を読んでいるのはもちろんのこと、WCAGなどの周辺の仕様にも精通しているわけで、その部分の差はけっこう大きいでしょう。 ところで、世間にはマークアップエンジニアという言葉があって、「第1回 マークアップ・エンジニアって何？ (itpro.nikkeibp.co.jp)」によると、以下のようにあります。 マークアップ・エンジニアという言葉は，Web制作会社であるビジネス・アーキテクツの森田 雄（もりた ゆう）氏が考えた
visited疑似クラスのビーコンを拾うサービスが登場 | 水無月ばけらのえび日記
行動ターゲティング広告は以前から存在していたが、今年の動向として新しいのは、行動を追跡する手段として、自サイトでの閲覧行動だけでなくよそのサイトでの閲覧行動まで追跡するタイプが現れたことだ。 (～中略～) 仕組みはこうだ。Webページのリンクは標準では青色で表示されるが、訪問済みのリンクは紫色に変わる。このリンクの表示色をJavaScriptなどのプログラムで取得することができれば、閲覧者が特定のサイトに行ったことがあるか否かを調べることができてしまう。 <style type="text/css> #sita-A a:visited{background:url("/beacon/site-A.gif")} #sita-B a:visited{background:url("/beacon/site-B.gif")} </style> <ul> <li id="sita-A"><a hr
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
WCAG 2.0の「非干渉」とは何か? | 水無月ばけらのえび日記
width: auto のフロート | 水無月ばけらのえび日記
application/xhtml+xml | 水無月ばけらのえび日記
文書型宣言の読み方 | 鳩丸よもやま話
目次 | ばけらの HTML リファレンス(未完成)