アクセシビリティから考える画像のマークアップ
はじめに 本連載では、Web標準のメリットを最大限に生かすことをテーマに、仕様書には書かれていない部分を中心に取り上げ、実際のWeb制作現場で起こり得る問題について、解決の糸口をたらしていきたいと思います。 連載第4回目となる今回は、「画像の代替テキスト」について扱います。「画像の代替テキスト」は、Webアクセシビリティの指針である「WCAG 2.0（Web Content Accessibility Guidelines 2.0）」や「JISX-8341-3（JIS X 8341-3:2004 高齢者・障害者等配慮設計指針－情報通信における機器、ソフトウェアおよびサービス－第3部：ウェブコンテンツ）」の中でも扱われている基本的な部分です。「画像の代替テキスト」について、前回の記事で紹介した「構文の妥当性」と「目的の妥当性」の両方の側面からみていくことにしましょう。 対象読者 XHTMLと
ウェブページを見る目の動きは「F」パターン - GIGAZINE
つまり人間はページを見る場合、「F」の字を描きながらページ全体を見ているというわけ。 これは232人の被験者を対象に行われたもので、大体1ページから重要なコンテンツを見つけるために2秒から3秒というものすごい短時間に驚異的な速度でページを見ていくそうで。 で、その視線の経路をビジュアル化したのがこの画像。全部で3段階のステップを踏んでおり、各段階を踏んでいった結果、「F」の字を描くというわけ。大体どのユーザーも一貫してこのパターンを踏んでいるらしい。以下がその全3段階の説明。どういうレイアウトが効果的なのかが分かります。 F-Shaped Pattern For Reading Web Content (Jakob Nielsen's Alertbox) http://www.useit.com/alertbox/reading_pattern.html 第1段階： 訪問者は最初にページの
ユーザーにとってはUIがすべて：UIデザイン原則をソシオメディアが語る - builder by ZDNet Japan
シーネットネットワークスジャパンは9月29日、builderとしては2回目のイベントとなる「builder tech day」を開催した。今回は「User Interface & beyond」をテーマに、ソシオメディア、マイクロソフト、アドビシステムズ、カールのスピーカーが登壇し、ユーザーインタフェースの現在と未来について講演した。 本稿では、ソシオメディア取締役である上野学氏の基調講演「ユーザーにとってはUIがすべて」を紹介しよう。 トイレにひそむUIのヒント 講演の冒頭、上野氏は米国の著名なデザイン・コンサルティング・ファーム、Adaptive Pathに2008年まで在籍していたDan Saffer氏と対話した際のエピソードを披露。 Saffer氏が「トイレにはユーザー・インタフェース・デザインの様々なヒントがある」と話していたことを紹介し、下の画像を示した。 上野氏は赤色の注意書
4つの悪しきデザイン
コンテンツが足りない、リンクが分かりにくい、ナビゲーションの出来が悪い、カテゴリーページが使えない…さて、ビジネスへの悪影響はどれがもっとも深刻か？ この中では、コンテンツが不十分なあまりにもたらされる損害が一番である。 Four Bad Designs by Jakob Nielsen on April 14, 2008 毎年、ユーザ調査や日々の生活の中で大量の悪しきデザインを目撃する。Don Normanと一緒に仕事をしているせいか、エレベータに乗ればボタンの不出来にイライラさせられる。20年前にDonが言ったとおりボタンをデザインしてくれないのはどうしてなのだろう？ ウェブデザイナーも同じで、私が13年前に言ったとおりには作ってくれない。悪しきデザインに遭遇しても何ら不思議はないのである。今日は、最近見かけた愚かなデザインをいくつかご紹介しよう。 コンテンツが足りない： Lincol
40分でできるホームページ診断 ～最低限クリアしたい40項目のチェックシート | Web担当者Forum
40分でできるホームページ診断 最低限クリアしたい40項目のチェックシート［訪問者目線編 2008年版］ SEO？ ユーザビリティの向上？ それ以前にしなきゃいけない「サイト作りの基本のキ」を、あなたのサイトではちゃんとできているだろうか？ 高度な施策に目を向ける前に、最低限クリアしておきたいチェックポイントをまとめてみた。あなたのサイトは何点とれるだろうか？ TEXT：編集部 協力：株式会社 環 ウェブサイト作りの基本のキSEOやユーザビリティに限らず、キーワード広告、アクセス解析、LPO、リッチインターフェイスなど、サイトの効果をアップさせる手法はさまざまあり、Web担でも詳しく解説してきている。 しかし、そういった施策にコストを割く前に、現状の自社サイトが、訪問者が「あれれ？」とマウスをうろうろさせてしまうような状態になっていないか確認したことがあるだろうか。 そんなあなたのために、
実践アクセシブルHTML - altはつけるだけじゃなくて
画像にalt属性を よく「画像にはalt属性をつけましょう」というフレーズを耳にするかと思いますが、これはサイトのアクセシビリティ改善における対応のうち、もっともメジャーなものであるといえます。WAIのアクセシビリティガイドラインであるWCAG1.0には「テーブルをレイアウトに使ってはいけません」というような内容の項目もありますが、これに対して「よっしゃ、テーブルを使うのをやめよう」とあっさりと決断してサックリとそのように作り変えることなど、ほとんどのサイトにおいて無茶な話でしょう。しかし「すべての画像にalt属性をつけよう」というのはアクセシビリティの対応要件に必ずといって良いほど含まれます。これなら、たとえ数千ページある規模のサイトであっても、とりあえず機械的な処理であるとか、人海戦術であるとかでも何とかなりそうだから……と思うからかもしれません。 たまにalt属性のことをaltタグと
WCAG 1.0 チェックリストもどき
Checklist of Checkpoints for Web Content Accessibility Guidelines 1.0 を適当に解釈して適当に書いたものです。翻訳ではありません。独自の解釈によって原文と全く違う表現になっていたり原文にはありもしない注釈が加えられています。あたりまえですが W3C や WAI 公認のリソースではありません。 優先度1 一般項目 (優先度1) 適切な代替テキストを用意する (1.1) img要素に適切な alt 属性がないと画像が表示できない環境で読まれるべきものが読めなかったり、余計なもの([INLINE]という文字列とか)が読めてしまったりすることがあります。適切な alt 属性が指定されているかどうか確認します。area要素にも alt 属性が必須です。 他にも、object, iframeなどが再現できない環境があります。これらは
イギリス政府推奨のアクセスキー (kuruman.org > Kuruman Memo)
イギリス政府が推奨するアクセスキーなんてのがあるんですね。作成者が勝手気ままにつけたアクセスキーなんてのはよほどでない限り飾り以上のものにはなりませんから、こういう指針作りはそれなりの効果があるように思います。電車の中で携帯電話片手にブラウジングする社会人あふれる日本でもこのような指針ができればいいなぁと思う次第。 UK Government Access Keys Standardにあったリストを適当に邦訳しておく。 S: ナビゲーションのスキップ 1: トップページ 2: 最新情報、更新情報、新着 3: サイトマップ 4: 検索 5: よくある質問と回答、FAQ 6: ヘルプ 7: クレーム窓口 8: 契約条件、取引条件 9: 意見の受付、フィードバックフォーム 0: アクセスキーの詳細 サイトをいくつかに分類して、このような指針を設けておくというのがよいのかもしれない。さすがにこのま
CSSによる画像置換問題概観 - Liner Note
画像置換問題とは想定ユーザ像アクセシビリティ確保における優先順位の付け方おまけ画像置換問題とはウェブ技術に詳しい方には耳‥画像置換問題とは ウェブ技術に詳しい方には耳にタコができるくらい聞いた話ではありますが。 これはミツエーリンクスで解説されている通り、HTML文書でマークアップしたテキストを、CSSで画像に置き換えて表示させる手法で、具体的にはテキストはdisplayプロパティで隠したり、あるいはtext-indentやpositionプロパティを使って画面外に追いやり、画像を親要素の背景画像として表示させる感じで実現します。 このテクニックに対する問題点も同ページで指摘されていて、CSSが有効かつ画像は非表示という閲覧環境において（中略）適用箇所については一切の情報が得られなくなることです。 この功罪については、画像置換の問題点 - てんぽという記事に表でまとめられていて、わかりやす
カスタムチャンス！ - 正しいHTMLとWebアクセシビリティ
livedoor Blog(ライブドア ブログ)の基礎的カスタマイズの書.正しいHTML（妥当なXHTMLと論理的マークアップ）,Webアクセシビリティの向上など.[ skip ] [ 次頁 ] [ 目次 ] [ 検索 ] [ 雑記帖 ] [ サイトマップ ] ... あなたはカスタムチャンス！に来ましたね 正しいHTMLとWebアクセシビリティ こんにちは。カスタムチャンスのコーラ父（livedoor ID：cola_papa）と申します。このブログは livedoor Blog（ライブドア ブログ）を対象にした「正しいHTMLとWebアクセシビリティの向上」に関する簡単な覚書です。（見直しが必要な記事もあります。ご容赦下さい。） 概要 正しいHTMLのための覚書 Webアクセシビリティ向上のための覚書 カスタマイズ関連の記事 精選リンク集 XH
ウェブコンテンツ・アクセシビリティ・ガイドライン 1.0
E-mailｼ嗹ebmaster@zspc.com Copyright © 1996-2000 ZSPC. All Rights Reserved. All pages except color chart are written in Japanese. g src="/static/zspc.com-vcss.gif" alt="Valid CSS! | " height="31" width="88" border="0"> g height="31" width="88" src="" alt="Level A conformance icon, W3C-WAI Web Content Accessibility Guidelines 1.0" border="0">
Webアクセシビリティのポータルサイト『Infoaxia(インフォアクシア)』
アクセシビリティPodcast 2人の軽妙なトーク(?)で最新情報を提供 Web Developer 日本語版 2008年3月より、開発およびユーザーサポートを他サイトへ全て移管しました。 移管のお知らせ "Webアクセシビリティとは？"から始まる『Webアクセシビリティ入門』、2004年6月に制定されたWebコンテンツのJIS（日本工業規格）『JIS X8341-3の解説』など、これだけは知っておきたいWebアクセシビリティの基礎知識を習得。 Webアクセシビリティ入門 Web アクセシビリティを正しく理解する上での基礎知識を分かりやすく解説。 JIS X8341-3の解説 2004年6月に制定された、Webコンテンツの JIS X 8341-3 について詳しく解説。 Webアクセシビリティ用語辞典 Web アクセシビリティに関連する専門用語の辞典。 『基礎知識』トップ
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
caraldo.net - it転職 リソースおよび情報
market website