img（画像）には文字色を指定しよう（そう、文字の色を） | 初代編集長ブログ―安田英久
今日は、Webページの作り方に関して、ちょっとした細かい話を。ページに画像を入れるときに、imgタグの「文字の色」をCSSで指定しておきましょう。画像に文字色？ と思ったあなた、ちゃんと理由があるのです。 なぜ画像なのに「文字の色」を指定しなければいけないのでしょうか。それは、画像が表示されない状態では画像のaltテキストが表示されるため、その状態での表示をおかしくない状態にするためです。 念のために説明しておくと、altテキストとは、imgタグで画像の簡単な説明をテキスト記述するものです。HTMLの用語では「alt属性」と呼ばれ、img要素には必ず記述することとされています。altテキストはふつうにブラウザでページを見ているときには関係ありませんが、画像を解釈できない検索エンジンや視覚障害者が使うテキスト読み上げブラウザにとっては、そこに何が示されているのかを理解するのに重要です。 しか
アクセシブルなドラッグ＆ドロップとは？ | Web標準Blog | ミツエーリンクス
Opera Developer Communityにて、The Paciello GroupのGez Lemonにより、"Accessible drag and drop using WAI-ARIA" という記事が公開されていました。 Accessible drag and drop using WAI-ARIA - Opera Developer Community ドラッグ＆ドロップを利用するWebアプリケーションなどは増えていますが、それらのアクセシビリティに関する認知や取り組みは、まだまだという状態でしょう。記事では、問題の認識から具体的な対応方法までを詳しく解説しています。 ドラッグ＆ドロップの問題は？ 一言「アクセシビリティ」と書いてしまいましたが、ドラッグ＆ドロップには具体的にどのような問題があるのでしょうか。Gezは、次のふたつの点から、ドラッグ＆ドロップの持つアクセシビ
日本IBMが視覚障害者のアクセシビリティー向上のためのツールを開発しサイト公開 | Web担当者Forum
日本IBMは、インターネット上で一般ユーザーと視覚障害を持つユーザーが協働してウェブページのアクセシビリティーを向上させるためのツール「ソーシャル・アクセシビリティー・コラボレーション・ソフトウェア」を開発し、それを支えるコラボレーションサイト「ソーシャル・アクセシビリティ・プロジェクト」を公開した、と7月8日発表した。 視覚障害者が読み上げ機能付きブラウザでウェブページを閲覧し、理解できない箇所を見つけた時に、ソーシャル・アクセシビリティー・プロジェクトのサーバーにメッセージを送信。メッセージはサイトに表示され、表示を見た一般ユーザーが問題に対して適切な情報をツールを使って付加し、サーバーに登録。その後、視覚障害者がそのウェブページにアクセスすると、ソーシャル・アクセシビリティー・プロジェクトのサーバーから登録された付加情報が自動的に読み込まれ、理解できる仕組み。 ソーシャル・アクセシビ
【スクリプトインジェクション対策15】JavaScriptが無効なクライアントでも利用可能なサイトにする | gihyo.jp
最近はJavaScriptが使えることが前提であるサイトが非常に増えています。JavaScriptが無効だとリンクやボタンをクリックできなかったり、クリックできても「Page not found」になって表示できなかったりする大手サイトが数多くあります。 あり得ないと考えるべきですが、仮に自分が構築したサイトが完全な安全性を維持しているとします。しかし、ほかの非常に多くのサイトはスクリプトインジェクションに対して脆弱です。自衛の方法としてスクリプトの実行を行えないようにしているユーザも少なからずいます。 理想的にはJavaScriptが無効なサイトでもユーザが不便なく利用できるようにすべきです。特に公共性の高いサイトは目新しさや派手さなどは求めるべきでなく、アクセシビリティが高いサイトを構築すべきです。 スクリプトが実行できないとすべての機能が利用できず、ナビゲーションやフォーム送信に支障
WAI-ARIAの現状と課題 | Web標準Blog | ミツエーリンクス
Webアプリケーションでアクセシビリティを確保するための仕様、WAI-ARIAの新しい草案が2月4日に公開されています。 WAI-ARIA Version 1.0と名づけられた新しい仕様は、昨年公開された二つの技術仕様（RolesとStates and Properties）を統合したものです。内容はほとんど完成しているようで、年内にはに完成するとの見解も示されています。技術仕様だけではなく、入門文書やベストプラクティスの草案も公開されています。 仕様の策定だけではなく、ブラウザや支援技術の対応も既に進んできているようです。夏ごろにリリース予定のFirefox 3はWAI-ARIAを完全サポートするようですし、JAWSやWindow-Eyesといったスクリーンリーダーもサポートを表明しています。また、JavaScriptツールキットであるDojoは早くからWAI-ARIAをサポートしていま
アクセシブルなサイトにするための26のステップ
Webmaster World.comのエントリー「アクセシブルなサイトにするための26のステップ」の意訳です。 26 Steps to a More Accessible Website スキップリンクは、キーボード操作をしている人のために目に見えるように設置する、というのにはなるほど、と思いました。 Altのテキストと代替の内容 画像にはAltを記述し、代替の内容を記す。 動画のキャプションや概要 動画の内容・概要・サマリーなどを記す。 「ここをクリック」は使用しない リンクには的確な情報を含める。 リンクの間のスペース 隣接したリンクには、区切りを設置する。 JavaScriptで記述したリンク リンクの記述は、JavaScriptに依存させない。 lang属性の使用 lang属性を使用して、使用言語を明示する。 アニメーションは使用しない ユーザーの気を散らせない。 色に依存しない
なぜ、サイトにアクセスした人のほとんどが途中であきらめてしまうのか？ | カスタマーエクスペリエンスで道は開ける～フォレスター・リサーチのWebサイト方法論
[コラム]カスタマーエクスペリエンスで 道は開ける ～フォレスター・リサーチのWebサイト方法論 by ジョナサン・ブラウン フォレスター・リサーチのシニア・アナリストであるジョナサン・ブラウン氏によるウェブコラム。 主にカスタマーエクスペリエンスとマーケティングの側面から企業のビジネスをサポートしているジョナサン氏が、企業サイトにおけるユーザー志向の考え方や方法論をさまざまな切り口で解説します。 明けましておめでとうございます。今年もよろしくお願いいたします。 私はクリスマス前にイギリスに帰り、お正月は両親と妹たちと一緒にフランスのブルターニュ地方に行きました。ブルターニュは子供の頃、毎年夏休みを過ごしていたところですが、今回の訪問は8年ぶりでした。町はずいぶん豊かになり、新しい別荘が立ち並んで、私が知っている昔のフランスの田舎の町からはずいぶん変わったなと思いました。でも、幸いに、私た
窓の杜 - 【NEWS】Web上の文字の読みやすさを判定する「カラー・コントラスト・アナライザー」
Webページ上の文字の読みやすさをW3C（World Wide Web Consortium）の基準で判定する「カラー・コントラスト・アナライザー」v2.0 日本語版が、10日に公開された。Windows 2000/XPに対応するフリーソフトで、現在（株）インフォアクシアのWebサイトからダウンロードできる。 「カラー・コントラスト・アナライザー」は、Webページの配色を支援するソフト。文字色と背景色の組み合わせを指定すると、W3Cが定める基準をもとに、指定条件下での文字の読みやすさを判定してくれる。判定対象の色はカラーパレットから選択したり、16進数のRGB値などで指定できるほか、内蔵のカラーピッカー機能を利用してデスクトップ画面上の色を取得することも可能。 判定基準は2種類あり、色差と明度差を測定する方法か、輝度のコントラスト比を測定する方法を選択できる。判定結果は配色のプレビューとと
窓の杜 - 【NEWS】米MS、HTML構造やレイアウトを検証できるWeb制作者向けIEプラグインを正式公開
米Microsoft Corporationは9日（現地時間）、Webページの構造を検証できるIE用プラグイン「Internet Explorer Developer Toolbar」の正式版を無償公開した。Windows XP/Server 2003/Vista上のIE6/7に対応し、現在同社のダウンロードセンターからダウンロードできる。 「Internet Explorer Developer Toolbar」は、IEのエクスプローラバーとして動作するWeb制作者向けのプラグイン。ローカルまたはインターネット上のWebページのHTML/CSS構文を解析でき、レイアウトや色合いの調整、W3Cの文法チェックサービスを利用した構文エラーチェックなど、アクセシビリティに配慮したWebページ作成に便利な機能が多数搭載されている。 エクスプローラバーはWebブラウザー画面の下側へ表示され、上部に各
窓の杜 - 【今日のお気に入り】通常と異なる色覚をシミュレーション「AnotherVision」
通常と異なる色覚特性をもつ人の視界をシミュレーション表示するソフト。ディスプレイ画面にカラーフィルターを貼ったようにデスクトップ全体の色調を変えたり、マウスカーソル周辺の領域を複数のウィンドウに表示してそれぞれ色調を変えて同時比較できるのが特長。たとえば自作のWebページやソフトウェアが、色覚障害のある人にとっても見やすい色づかいになっているかどうかをチェックしたいときにお勧め。デスクトップ全体を数秒間だけ色調変更して元に戻す機能などもあり、色づかいを確認しながら修正しやすいだろう。フィルターは赤弱・緑弱・青弱などの色覚特性から選べるほか、フィルターを自作することも可能。なお、作者サイトではユーザーが作成した白内障のシミュレーションフィルターなども紹介されているが、使用には同じく作者が公開しているフィルター仕様の変換ソフト「avfconv」を使って変換する必要があるので注意。 【著作権者】
Googleがアクセシビリティで検索結果を順位付け
米グーグルは2006年7月19日（米国時間）、Webサイトのアクセシビリティ（アクセスの容易さ）で結果を順位付けする検索サービス「Google Accessible Search」を公開した。正式サービス化前の技術を実験的に公開する「Google Labs」で利用できる。 Google Accessible Searchでは、同社の通常の検索アルゴリズムに加えて、Webページの構造を解析して判断したアクセシビリティの高さを加味して順位付けをする。アクセシビリティの高さは「視覚障害のある人が、標準的な技術を使いながらWebページを見たり、楽しんだりできること」（同社）と定義しており、さまざまな団体と協力しながら、アクセシビリティの判断基準を決めているという。 現在のところ、ページレイアウトのシンプルさ、画像の量、重要な操作をすぐにキーボードで実行できるか、などを基準としている。画像表示をオフ
Webアクセシビリティを理解し実践するためのポータルサイト『infoaxia(インフォアクシア)』
Accessibility is the Web. 「エー イレブン ワイ」は、Webアクセシビリティの情報提供Webサイト。 ユーザーフレンドリーでみんなが利用できるWebコンテンツづくりをサポートします。
Ajaxのアクセシビリティ／実践ノウハウ − Webアクセシビリティポータルサイト『infoaxia(インフォアクシア)』
特集記事：Ajaxのアクセシビリティ イントロダクション：Ajaxとは？ Ajaxのアクセシビリティを語る前に、まずAjaxとは何か、そしてAjaxがWebアプリケーションにどのような進化をもたらしているかを説明しておこう。 Ajaxという用語は、Asynchronous JavaScript and XML の略で、JavaScriptとXMLを組み合わせて用いる技術のことを指す。このAjaxを使うと、従来ならばWebページ全体をリフレッシュしなければならなかったインタラクションが、変化させたい部分だけを読み込むことが可能になり、操作性が軽快になるということで注目を集めている。たとえば、キーワードを入力して検索するとき、これまではキーワードを入力して検索ボタンを押すと、ページ全体がリフレッシュされて、検索結果ページが表示される、というのが当たり前だった。これがAjaxを使うと、検索ボタン
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
視覚障害者向けの総合イベント「サイトワールド2011」 ～声で操作できるエアコンや読み上げ機能のついたテレビなど
Amazon.co.jp: ウェブアプリケーションのためのユニバーサルデザイン: Wendy Chisholm (著), Matt May (著), 水野貴明 (翻訳): 本
日本IBMが音声ブラウザのWebページ読み上げ順序を容易に修正できる技術を開発 | Web担当者Forum
IBM Developer
NTTデータ、Webアクセシビリティの無料診断サイト開設