多様化していくWebアクセシビリティ | コラム | ミツエーリンクス
先日、あるクイズ番組で「急がば回れ」という言葉はもともとどこを回ることだったのか、といった趣旨の問題を目にする機会がありました。この「急がば回れ」という言葉、出題中にもあったのですが「急いては事をし損じる」と同様に、ゆっくりと安全な方法が、急いで危険なものを選ぶよりも結果としては早くなる、という文字通りの意であります。 さて、ここで少し変わった見方をしてみましょう。この言葉には、前提として二つの選択肢が必要です。すなわち、選択肢があるから選ぶことができるわけです。 かつて、Webアクセシビリティといえば、道のないところに道を通す、つまり情報へのアクセス方法がないところに何かしらの情報を与える、というものでした。たとえ、それが茨の道であったとしても。 具体的にはあるグラフのalt属性（代替テキスト）が存在しなかったところに、「グラフ」という代替テキストを記述するといったぐあいです。しかし近年
リンクテキストとアクセシビリティとスクリーンリーダーの動作 - TRANS [hatena]
リンクテキストをスクリーンから隠したいときに、どんな方法が最もアクセシブルなのでしょうか。 Yahoo! User Interface Blogより もう3ヶ月ほど前のことですが、Yahoo! User Interface Blogで面白い取り組みをしていました。Empty Links and Screen Readersという記事です。その取り組みとは、リンクテキストをスクリーンから隠すための方法を1つ1つ検証し、どの方法がアクセシブルなのかを調査するというものです。 Yahooが調べたのは以下のリンクです。 通常のテキストとそれに対するリンク テキストもtitle属性もないリンク title属性はあるが、テキストがないリンク テキストの代わりに空白を入れたリンク これらのリンクに次のCSSを当てます。 特に指定しない offscreen visibility: hidden displ
![リンクテキストとアクセシビリティとスクリーンリーダーの動作 - TRANS [hatena]](https://cdn-ak-scissors.b.st-hatena.com/image/square/ca97218ef8242074e15cf05e7764859f63dc3901/height=288;version=1;width=512/https%3A%2F%2Fogimage.blog.st-hatena.com%2F6435988827676522384%2F6435988827676523057%2F1460995386)
hn要素を各エリアに配置し、アクセシビリティを高くする。 - Trans
ページの各エリアに対してhn要素を使い起点を設けることにより、アクセシビリティを高めることができるかもしれません。 ある全盲の音声ブラウザユーザの意見 最近、ある全盲の音声ブラウザユーザの意見を聞く機会がありました。彼女が主張する使いやすいWebサイトとは以下の3つとのことでした。 ページ全体の構造がイメージしやすいこと 迷子にならないように道しるべがあること 自分の行きたい場所にすぐに行けること 1つ目はWebサイトの標準的なデザインに従えば、ある程度達成できます。このあたりは、Alertbox: ウェブデザイン標準の必要性（2004年9月13日）を参考にしてください。 また、3つ目はWebコンテンツJISにもあるナビゲーションスキップである程度対応できます。ただ、ジャンプするのはメインコンテンツだけにするべきか、それともサブナビゲーションも入れるべきかなどの問題もあるとは思いますが。
アクセシビリティ：視覚障がい者、音声ブラウザ(読み上げソフト)のシェア:WebClip - ウェブ制作、UXD／IA、アクセシビリティ
この記事のトピック Web担当者の悩み：音声ブラウザのシェアがわからない 視覚障害者のパソコン・インターネット・携帯電話利用状況調査2007 Web担当者の悩み：音声ブラウザのシェアがわからない こんにちは。“時代の3歩先をねらうWeb屋さん”ミキ・オキタです。 このブログ「WebClip ウェブデザインのニュース」では、Webデザイン・Webマーケティングの話題をお届けしています。 今回はWebアクセシビリティの話題。Web担当者なら必ず頭を悩ます音声ブラウザのシェアについて。 以前の記事でも書いたが、アクセシビリティはSEOではない。Web標準とも異なる(アクセシビリティはもっと広範囲にわたる)。かといって、結果の見えづらい「社会貢献」扱いでは、現場のモチベーションが保ちづらい。 企業がなぜアクセシビリティに取り組むのか、その動機づけははっきりさせておかなければならない。 上のことを踏
自治体サイトWebアクセシビリティ調査 | 有限会社ユニバーサルワークス
miCheckerなど3つのチェックツールを使ってみた 自治体サイトと言えばユニバーサルワークス。自治体サイト調査のユニバーサルワークスが、毎年9月1日にお届けする、都道府県、政令指定都市がドキドキする、Webアクセシビリティ愛好家がニヤニヤする、「自治体サイトWebアクセシビリティ調査」です。 21回目となる今回のテーマは「miCheckerなど3つのチェックツールを使ってみた」です。世の中にさまざまなウェブアクセシビリティチェックツールはあれど、ツールだけでウェブアクセシビリティ検証を完結させることはできません。チェックツールと目視とで評価が異なるのか、チェックツールによって違いは生じるのか、公的機関の場合miCheckerで「問題あり」がゼロであれば良いのかなどについて考えるきっかけとなれば幸いです。 ➡ 調査概要
HTMLの質の追求は、モバイルがきっかけでブレイクする。
Web標準を考えるというエントリーで、フルCSSが受託案件で堂々と使えるようになったのは、SEOという言葉が出てきたから、という言葉を書いたら、はてブに微妙な反論があった。 しかし、それは現場では間違いではなかった。 2002～2003年頃は、ネスケ4を切るための理由がなかったのだ。 ネスケ4を切るということは、少なからずユーザーを失うというビジネスマターの決断になるので、制作者の論理、HTMLの論理などという瑣末（あえて言ってみる）なことで、ビジネスの機会損失になることは許されない。 もし捨てさせたければ、ビジネスニーズvsビジネスニーズの取捨選択の決断が必要。 そこにハマったのが、MovableType（blog）とSEOだった。blogは、なんだかんだとUTF-8であることが求められるし、SEO対策のためにテーブルレイアウトが悪者とされることとなった。 ずばり、この二つのキーワードが
アクセシビリティはボランティアじゃないっ! | Junnama Online
スクリーンリーダー利用者とのやりとりから理解できること 「ウェブコンテンツ・テキストバージョン・ジェネレーター(Naked Beta)」なるものを作っているのだが、先日某SNSの「視覚障害者のパソコンサポート」コミュニティにて「PDFの扱い方」スレが立っていたので初めて書き込ませていただいた(Naked(Beta)ではPDFをテキスト化することができる)。 その後メンバーの方が参加しているメーリングリストで紹介いただいた関係で何通かメールをもらった (感想や要望など)。早速いくつかは反映させていただいたが、そのメールでのやりとりから改めて「音声ブラウザやスクリーンリーダーといってもその使い方は様々」ということを実感したので、ちょっと紹介させていただこうと思う(これまでにお会いして話を聞いた他の方の例もあわせて紹介したい)。 以下、利用環境の一例。 OSはWindows。 VDMW300 (
CAPTCHAをアクセシブルにするための色々な取り組み - Trans
自分用メモなのですが、せっかくなので公開します。CAPTCHA（Webサービスに登録する時やブログにコメントをつける際に認証を求めてくる、文字がぐにゃっとした画像）を知っている人も多いと思うし、それがスクリーンリーダー利用者などの、一部の人たちにとってはアクセシビリティ上大問題ということを知っている人も多いと思います。じゃあ、それではアクセシビリティは無視か？！というとそうでもなくて、どうやら色んな取り組みが行われているようです。 スクリーンリーダーのCAPTCHAの読み上げ方 まず、おさらいです。スクリーンリーダーはどういうふうにCAPTCHAを読み上げるのか。英語の動画ですが、次の動画が最も分かりやすい。 内容はちょっと違うのですが、海外の大手SNSで登録の際にCAPTCHAを使っているところが多くて、スクリーンリーダー利用者は登録できないじゃないか！というビデオ。でも、別にSNSだけ
米国 Mac 系ライターのもの凄い技
UPDATE: 末尾にYouTube版を追加しました。ただし、可能なら下のリンクからハイビジョン版を！ 仕事のペースがうまくつくれず、迷惑をかけまくりの中、今日、久々、そして１度目のブログ更新です（たぶん、夜中にもう１回更新します）。 最近、新たに米国のO'Reilly.netに英語でブログ記事を書き始めたのですが、これは今日アップした３本目の記事の日本語版。 先日、アムステルダム在住の友達、David Niemeijerが、ビックリするような動画へのリンクを送ってくれました。 彼の顧客で、米国のゲーム雑誌のライターの人の仕事の様子の動画なのですが、ゲームには興味がない人でも、きっとビックリすると思います。そして、もしかしたら自分の目の前にある、このパソコンという道具の素晴らしい可能性を感じとってくれるきっかけになるかもしれません。 とりあえず、ちょっと長いし、英語オンリーですが、 まずは
植木真の『アクセシビリティとWeb標準、SEO』 第１回／実践ノウハウ － Webアクセシビリティポータルサイト『infoaxia(インフォアクシア)』
"守り" ではなく、"攻め" のアクセシビリティのススメ － 植木 真の『アクセシビリティとWeb標準、SEO』 第1回 JIS X 8341-3制定により進んだアクセシビリティ対応 2004年6月に JIS X 8341-3（『高齢者・障害者等配慮設計指針－情報機器における機器，ソフトウェア及びサービス－第三部：ウェブコンテンツ』）が制定されたことをきっかけにして、官公庁や自治体はもとより、企業サイトにおいてもアクセシビリティに積極的に取り組む企業が増えています。JIS 制定前後は、業種もIT関連がほとんどでしたが、最近では百貨店、新聞社、銀行、証券、食品、製薬など、業種に関係なく広がっていることは皆さんもご存知のことでしょう。ガイドライン整備や法制化では先行していた欧米などの海外諸国でも、最近は企業サイトでの取り組みが徐々に始まっているようですが、こと企業サイトのアクセシビリティ対応
支援技術別動作検証報告： 画像のalt属性とtitle属性 | アクセシビリティBlog | ミツエーリンクス
Webサイトのアクセシビリティを高めるための方法や国内外の関連情報など、さまざまな角度からWebアクセシビリティに関する話題をご提供していきたいと思います。 2007年04月17日 支援技術別動作検証報告： 画像のalt属性とtitle属性 アクセシビリティ・エンジニア 辻 以前、あるWebサイトのアクセシビリティ対応状況が、視覚障害者のコミュニティで話題に上がったことがあります。その発端となったのが、「A銀行のWebサイトが、アクセシビリティ対応したらしい」という情報でした。しかし、私を含めた何人かがそのA銀行のWebサイトにアクセスしたところ、まったく「アクセシビリティ対応」された内容を確認することができませんでした。一方、別のスクリーン・リーダー使用者の方からは、そのA銀行のWebサイトが使いやすくなったとの報告がありました。このように、利用者によってアクセシビリティ対応されたことが
リストマーカー+テキストを画像で表示
HTMLとCSSの規格はよくできていて、真っ当な使い方をしていればアクセシビリティ上の問題はほとんど起こりえないと思う。しかし、CSSで「変なこと」をすると思わぬ落とし穴が。 その例がlist-style-imageの代わりにbackground-imageを使うことと「画像置換」。 リストマーカーをlist-style-imageで画像に変換した場合、画像非表示の環境ではもとのリストマーカーが表示される。 しかし、list-style-imageで表示した画像の位置が気に入らない（これはホントにそう思います）という理由で、list-style:none ＋ padding-left ＋ background-imageで マーカーを消し、パディングで確保した領域に背景画像を表示させるという手法がよく使われる。 これだと画像非表示の環境ではリストマーカーが見えない。 リストマーカー程度なら
Webサイトのアクセシビリティで裁判─商用サイトに求められる姿勢｜アークウェブのブログ
ディレクターの遠藤です。 「マウスを使わなければ、注文が完了しない」。 この言葉の意味するところが、すぐに理解できますか。 ショッピングサイトを運営している方は、今一度、ご自身のサイトを見直してみてください。あなたのサイトは、マウスでクリックしなくても、買い物ができるでしょうか? アメリカで一般の小売業者に対する訴訟が起こり、話題になっています。 ウェブサイトのアクセシビリティで裁判--米の視覚障害者が提訴 http://japan.cnet.com/news/media/story/0,2000047715,20096310,00.htm 今、インターネットでの情報公開には、視聴覚障害者や高齢者、モバイル機器からの利用など、どのような環境からも同様に情報を得られるよう、アクセシビリティに配慮したサイト作りが強く求められています。公共性の高いWebサイトで、一般の人々が当然得られるはずの情
パンくずリストがベストとは限らない | WWW WATCH
最近ウチの会社の中の人も書いていました、Web サイトのナビゲーションとしてよく使われる 「パンくずリスト」 （Topic Path なんて言い方もしますね） ... 最近ウチの会社の中の人も書いていました、Web サイトのナビゲーションとしてよく使われる 「パンくずリスト」 （Topic Path なんて言い方もしますね） ですが、マークアップの仕方はどういう方法がいいとか、そもそもパンくずリストって必要なの？ なんて話まで、最近よく目にする気がします。 個人的にパンくずリストはサイト ID （ロゴなどですね） に対するトップページへのリンク設定同様の慣習みたいな感覚で、すべての人とは言わないまでも一定の認知はされていると考えていますので、サイト構築の際は基本的に要件に含めるようにしています。 で、今回はパンくずリストが必要か？ とか、パンくずリストのマークアップはどのような方法が妥当か
TRANS - alt=""を越えて。
集中的にアクセシビリティやユーザビリティを最近になってやっと学び始めました。JIS X 8341やWCAG1.0を読み進める中で、もっと自分自身勉強したいと思うようになってきました。そこで、JISやWCAGを学ぶ中で、自分がシニアや障害を持つ人との現場で、またそういった現場で働いている人たちの意見を踏まえた上で、疑問に思うことを列挙しておこうと思います。いずれは、こういうことをちゃんと実装レベルで解決できるようになりたいなと思いを込めて。 alt=""は空文字なのか、半角スペースなのか、それとも全角スペースなのか？ 少し前に「ブロガーのためのアクセシビリティガイドライン」を書きました。この際に、はじめはalt=""と空文字を打つと書いていたのですが、よくよく調べてみると、空文字だと音声ブラウザによっては「画像」と読み上げてしまうことがあるようです。また、全角スペースの場合は、日本語環境以外
画像置換によるアクセシビリティーの低下 | ユージック
画像置換によるアクセシビリティーの低下 更新日：2007年1月31日｜公開日：2007年1月31日 Fsikiさんのエントリー「text-indent: -xxxxemの弊害」で紹介されている内容ですが、現在のCSSテクニックの常套手段である画像置換をするとFirefoxではクリックした時に画面外に飛ばした範囲にまで点線が生じてしまうので、対策として a { outline: none; } 上記のような対策をしてきましたが、なんとこれに致命的なアクセシビリティーの欠如があることを知りました。 というのはリンクをタブキーでたどる際にフォーカスされないという問題です。 僕は日頃あまりノートPCを使わないので、タブキーでのリンクの移動などをしないという事もありまして、まったくもって気づきませんでした。 解決策は以下の通り a { overflow: hidden; } MacIEではリンクが消
ブロガーのためのアクセシビリティガイドライン - Trans
唐突ですが、ブログやWebサイトを更新する際に、よりアクセシビリティが高いコンテンツをどうすれば書くことができるのか、そういったガイドラインを公開します。 といっても、元々は他団体向けにWebサイトを制作している際に、「結構、Webには詳しい」方にコンテンツを書いてもらっていたのですが、時折「概 要」とか、「2007年1月11日（水）」といった記述が見られ、「あー、このままでいくと、更新作業を今後やってもらうのってすごく不安だな」と思いました。そこで、どうすれば音声ブラウザなどがうまく対応できるようにコンテンツを書けばよいのかをガイドラインにまとめてみたのですが、せっかくですので、ウェブ上で公開することにしました。 前提として、 アクセシビリティに詳しい方にとっては、「何を今更」という内容。 デザインやマークアップよりも、コンテンツを書く＝ウェブライティングに特化したガイドライン。 ブロ
当事者が参加していないWeb標準の議論 - Trans
いつの間にか周りで議論が巻き起こり、気が付いたら当事者の意見は反映されていない。それは、バリアフリーでも、Web標準でも、アクセシビリティの議論も一緒なのかもしれない。 Web標準で制作されているWebサイトがどんどん増えている。どこかのサイトがリニューアルされたと思ったら、やはりWeb標準で作られていたり。最近、兵庫県のホームページもWeb標準的にリニューアルされた。 Web標準の話では決まって、JISから発表された「WebコンテンツJIS」が引用される流れになっている。その中では、「高齢者や障害者でも利用しやすいようなWebサイトの設計を行うべきだ」という意見が出されているわけだが、前々からずっと「じゃあ、具体的にどうすりゃいいんだ」という疑問が頭の中をグルグル周っていた。そこで、はてなの人力検索でも質問したことがある。 http://q.hatena.ne.jp/1153710195
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
http://mynotes.jp/blog/2007/11/post_33
http://www.asahi.com/life/update/0905/NGY200709050003.html