アクセシビリティに関するmor-eveのブックマーク (9)

  • 色の組み合わせチェック - 読みやすい前景色と背景色

    誰にも読みやすいコンテンツとするためには、文字色と背景色のコントラストをしっかり確保しなければなりません。これを客観的にチェックするため、色の明るさの差などを計算する仕組みを用意してみました。 色の組み合わせ検証 テストの手法 コントラストの計算 色覚偏位のシミュレーション 当サイトが独自に加えたコントラストの段階評価 コントラストと読みやすさの相関関係 色の組み合わせ検証 検証してみたい文字色と背景色の組み合わせを入力してみてください。色の指定には3桁もしくは6桁の16進数カラーコード、あるいは色名(CSS2の色名+SVGの色名、計147色)およびrgb()の表現が使えます(初期値は、読みにくい例が入っています)。また、入力欄左ボックスから216色のパレットを呼び出して入力することもできます。文字色2、3は、複数の文字色の組み合わせを表示するためのオプションで、コントラストなどの計算は行

    mor-eve
    mor-eve 2009/09/22
    コントラストチェックをチェックするスクリプトあり
  • 日付の表記に関するノート

    日付の表記方法は、文化的な背景の違い、また用途の違いによって様々なフォーマットがあります。多くの場合、特に断り無く使っても問題なく正しい日時を伝えることができますが、文脈や利用者の環境によっては、意外な落とし穴にはまることもあります。誤解なく、かつ効率的に処理しやすい日時表記方法としては、2001-08-02T10:35Zというスタイルの、ISO/W3Cフォーマットがあります。 文化と日付表記 日時表記の国際標準とW3Cノート W3Cの日時フォーマット XML Schemaの日時データ型 タイムスタンプのインターネット標準 そのほか広く用いられる日時の書式 ピリオド区切りによる日付 電子メール、HTTPヘッダなどの日時表記 継続期間の表記 ISO 8601の期間表記 Dublin Coreの期間表記 読みやすさと処理しやすさのバランス 参照文献 文化と日付表記 よく見かける日付の表記法とし

  • テーブルとアクセシビリティ -- ごく簡単なHTMLの説明

    大きなテーブルは、音声読み上げで内容を聞いているとき、データが何を示す値であるかが混乱してきます。音声ブラウザは、th要素の内容やtd要素のheaders属性を利用して、補助的な情報を読者(聴取者)に伝える機能を持っています(WebSite DesignのVol.3で「音声ブラウザでもまだサポートされていない」と書いてしまいましたが、新しいバージョンはかなり対応が進んできました)。 音声ブラウザとth要素 長い見出し項目の省略形 セルの関係を示す属性 scope属性 headers属性 データの次元と軸 補足:テーブルsummary属性の読み上げ 音声ブラウザとth要素 表(テーブル)は、大量のデータを縦横の二次元に整理することで、視覚的に把握しやすくします。しかし、音声合成でテーブルを読み上げる場合、データは順番に一次元的に読み上げられるため、全体像を把握することが難しくなります。たとえ

  • imgタグにおけるaltの使い方について -- ごく簡単なHTMLの説明

    HTML文書においてはimg要素を使ってインライン画像を表示することができますが、Lynxのようなテキストブラウザや画像表示をOFFにしている利用者のためにはalt属性によって画像の代わりとなる代替文字列を用意することができます。いえ、正しくは「用意できる」ではなく「必ず用意しなければならない」ものです。HTML4においては、altはオプションではなく「必須」の属性とされています。 WWW利用者の環境 alt属性の使い方の基公式 伝えるべき情報 なぜalt文をうまく組み込めないのか alt="" ? img要素のtitle属性を使う WWW利用者の環境 近頃はNetscape NavigatorやInternetExplorerが全盛で、それらに合わせたページを作ることが当たり前のように思われていますが、実際は: これらのグラフィカル・ブラウザを使っているが、回線の事情や、よりスピーディ

  • market website

    The field of web design and development has evolved significantly over the years, with a…

    market website
  • Webデザイン指針 一覧

    画像・スクリプト 全ての非テキスト要素に等価なテキスト情報を付加すること アンカー画像にはalt属性でリンク先の情報を伝えること 長い説明が必要な画像にはlongasrc属性で等価な文書を用意すること 背景画像を用いるときは背景色も同時に指定すること 無制限に続くアニメーションを用いないこと プラグインがインストールされていないと進めないページを作らないこと ユーザの意志に反してBGMを鳴らさないこと マウスを追いかける画像を用いないこと 重要なスクリプトやオブジェクトには適切な代替手段を設けること 何らかのアクションが行なわれる場合、ユーザは任意に停止・再開ができること スクリプトエラーが発生しないように充分検討すること イベントの取得は特定の入力装置に依存しないこと スクリプトは可能な限り、外部スクリプトファイルによって提供すること 画像ファイルへの直接リンクは避け、全てHTMLファイ

  • 実践アクセシブルHTML

    この記事の概要 技術評論社のWeb Site Design Vol.8(2003年6月17日発売)から開始した「実践アクセシブルHTML」という連載記事の元原稿です。 連載第一回は「altはつけるだけじゃなくて」というもので、アクセシビリティの代名詞のひとつともいえる「alt属性」について、第二回はWeb Site Design Vol.9(2003年9月17日発売)に掲載された「可変フォントサイズとレイアウト」となっています。そして最終回でもある第三回はWeb Site Design Vol.10(2004年3月26日発売)に掲載された「フォームは送信してもらえばこそ」です。 基は8ページの記事として執筆を依頼されたものなのですが、第一回については勢い余って12ページ構成になってしまいました。そのために、僕は「altだけで12ページ語れる男」と呼ばれるようになったとかいう(謎)。 初稿

  • ユーザビリティコラム:Jakob Nielsen博士のAlertbox

    システム状態の可視性(ユーザビリティヒューリスティックNo.1) 7月3日 現在の状態を伝えることで、ユーザーはそのシステムをコントロールできていると感じ、目的達成のための適切な行動がとれるようになり、最終的にはそのブランドを信頼するようになる。 このコラムについてUIデザイン・ユーザビリティ・UXデザインについて、その道の第一人者・ヤコブ・ニールセン博士(略歴)ら米Nielsen Norman Groupのメンバーが実例を交えて洞察するコラム『Alertbox』。その日語訳を許可を得て公開しています。

    ユーザビリティコラム:Jakob Nielsen博士のAlertbox
  • ハンディがあっても利用できるページづくり:Webアクセシビリティについて

    様々な環境に配慮して、どんなユーザーでも使いやすい方法で提供されている情報はアクセシビリティ (accessibility) が高いと言います。アクセシブルなコンテンツづくりとは、ウェブでのコミュニケーションに誰もが参加できるよう設計すること。情報の利用者であると同時に提供者でもある私たちは、常にこの点に配慮していきたいものです。 なぜアクセシビリティか コミュニケーションとしてのアクセシビリティ:WCAG 2.1 1. 全ての機能と情報が誰にとっても認識可能であること 2. 全ての機能は誰にでも操作可能であること 3. コンテンツの内容、および機能が誰にとっても理解可能であること 4. 将来にわたってコンテンツの力を最大限に発揮できる技術を用いること 元祖ガイドライン:WCAG 1.0 アクセシビリティのJIS規格(2004年初出時の情報) JISの改定:X 8341-3:2010と20

  • 1