名刺のユーザビリティ - Trans
うちの会社が名刺をあまり管理できていなかったので、名刺をデータベース化するために延々とOCRで読み込む作業をたまにしています。 かっこいい名刺のデザインなんちゃらというエントリーは定期的にはてブに上がるわけですが、だいたいそういう名刺はOCRでちゃんと読み込んでくれません。でも、今はOCRで名刺を管理している人も増えているはずなので、そろそろ名刺のユーザビリティも語られるべきではないかと思うわけです[誰]。 そこで、名刺を延々とOCRで読み込ませて、その正確性をメモするという作業を繰り返した結果、名刺ユーザビリティガイドラインを公開します。 ライティング 当たり前だが、誤字脱字をしない 名刺の間違いを手書きで修正しない（電話番号が変わったからといって、二重線ひいて、新しい番号を書き足すなど） 「TEL・FAX」や「TEL&FAX」を使わない サイトURLは「org」を「orp」と認識しやす
新聞社のナビゲーションで見るユーザビリティ - Trans
Yahoo!基金から助成金をもらって、アクセシビリティの啓蒙 - TRANSで書きましたが、今年度うちのNPO法人はYahoo!基金から助成金を得て、Open Accessibility Library Projectというのをやっております。 そのインタビューの中でシニアの方からこんなおもしろい指摘があったので、メモ代わりに書いておきます。 まず、次の各新聞社のサイトを見てください。 毎日新聞 読売新聞 日経新聞 産経新聞 朝日新聞 先ほどのシニアの方に言わせると、この中で1つだけ違和感を感じるというか、使いにくいサイトがあるんだそうです。さて、それはどれか。 回答 答えは毎日新聞のサイト。 理由はいたって簡単。毎日新聞以外のサイトは、ニュースのカテゴリごとにタブ型のグローバルナビゲーションがあるのですが、毎日新聞は左側にナビゲーションがあるからです。そのため、各新聞社のサイトを見比べる
WebアクセシビリティからWeb Adaptability（アダプタビリティ）へ - Trans
Webアクセシビリティの限界を補完するためのWeb Adaptability（アダプタビリティ）。詳細はまだ分かりませんが、これからのキーワードの1つになるかもしれません。 アクセシビリティの限界 Web Adaptability（アダプタビリティ）とは、“From Web Accessibility to Web Adaptability” Paper Published « UK Web Focusで発表された概念です。著者のBrian Kelly氏によるサマリーは、“From Web Accessibility To Web Adaptability”: A Summaryで読むことができます。 Brian Kelly氏はアクセシビリティについて次のように述べています。 "disability results from the interaction between persons
キャプションをオンラインに根付かせるために。（日本語訳） - Trans
著者: Joe Clark件名: This is How the Web Gets Regulated日付: 2008年11月18日URL: http://www.alistapart.com/articles/thisishowthewebgetsregulated訳者: Arata Kojimaその他: Translated with the permission of A List Apart Magazine and the author[s].Webアクセシビリティというものは今やよく知られるようになった。また、Webアプリケーションもかなりアクセシブルになってきている。徐々にWebアプリケーションのアクセシビリティも一般的になりつつある。よくやったものだ。 しかし、仕様がはじめて求めてからほぼ10年間、オンラインキャプションはほとんど浸透していない。たぶんこの状況は政府の規制に
情報を重複させないサイト構造 - Trans
強調したい情報がある、だから繰り返したい！でも、それってユーザビリティ・アクセシビリティは高くないかもしれないのです。 某視覚障害者のMLにて 普段はソフトウェアの使い方や近況報告のようなMLなのですが、たまに僕たちのようなサイト制作者にとっては興味深い投稿がされます。例えば、視覚障害者からのこんな内容でした。 「JR東日本のメールでのお問い合わせが使いにくくて仕方がない」という内容。というわけで覗いてみました。 情報量が多すぎる！ まず、指摘のあったその問題のページは、JR東日本：ご意見・ご要望の受付です。当ブログからでは分かりにくいのですが、実は手前のページからポップアップウィンドウで開きます。また、お問い合わせするだけなのになぜこんなにも個人情報を入力しなければならないのか、という疑問も沸いてきます。 では、このポップアップウィンドウを開く手前のページはどこなのか。それがJR東日本：
福祉情報工学研究会での気付きや学び - Trans
福祉情報工学研究会に参加して、そこで得た気付きや学びを皆さんとざっくりと共有しておきます。 福祉情報工学研究会 僕が参加したのは、第42回 福祉情報工学研究会です。前半しか参加しなかったのですが、その主な内容は今年4月に発表された視覚障害者のパソコン・インターネット・携帯電話利用状況調査2007の要約的な紹介でした。個人的には、生の渡辺哲也先生を見れたことが一番の大きな収穫だったかもしれませんが、それはさておき。本当にざっくりなのですが、メモを紹介します。 触覚ディスプレイ 触覚ディスプレイが面白い。パソコン上にある文字や画像を点字のような形にして触覚に伝える機器。それに画像を表示し、普及できるように研究中。ユニプラン社を参考。 今まで視覚障害者に画像を伝える方法は代替テキスト（alt属性のような）しかなかったが、この機器は触覚によるモノの形の認知ができる。 Windows付属のペイントな
垂直スクロールバーを左側にしたい！（CSSではなく、アクセシビリティの話） - Trans
垂直スクロールバーは一般的にユーザの右側にあります。でも、左側にあったほうがアクセシブルなときもあると思います。 文末ではてブのコメントに返答しました。（2008年6月15日1時35分） 肢体不自由者の操作の困難さ 一般的にページを縦にスクロールしたいときは垂直スクロールバーを使うことと思います。そして、そのページから1つ前のページに戻るときはブラウザやソフトウェアのツールバーにある「戻る」などをクリックすることと思います（使い慣れた人はキーボードかもしれません）。 そのときはこんな感じのマウスポインタの移動になります。 これをマウスを使って移動すれば一瞬の出来事です。しかし、マウスを使えない肢体不自由者の場合はそうではありません。例えば、下記のような支援機器を使う人の場合はどうでしょうか。 僕はこの数ヶ月の間にこういった支援機器を使う人たち（顎や舌でマウスを使う）にパソコンを教える機会が
印刷用デザインをきれいにまとめるための7つのポイント - TRANS [hatena]
印刷用デザインもWebサイトにとっては1つのデザインだと言えます。制約がある印刷用デザインをきれいにまとめるためのポイントを上げてみました。 印刷用デザインをどうするか。 当ブログで印刷用CSSをはじめて取り上げたのが2006年12月でした。また、2007年4月にも印刷用CSSをもっとよくするための4つのTipsという内容で取り上げました。 さて、今回取り上げるのは今までと違い、印刷用CSSのコーディングではなく、純粋に印刷用デザインはどのようなものがよいか、というものです。コーディングではなく、いかにデザインするか。 ちょうどアックゼロヨン・アワード2007の結果発表もあったことなので、その受賞作の印刷用デザインを参考にしました。また、ADP: 印刷用CSSの書き方（基本編）もかなり（むしろほとんど）参考にさせてもらいました。そのポイントを以下の7つにまとめました。 なお、文末にアックゼ
![印刷用デザインをきれいにまとめるための7つのポイント - TRANS [hatena]](https://cdn-ak-scissors.b.st-hatena.com/image/square/f625aab20ef8abfef513499376656cecc29a08ae/height=288;version=1;width=512/http%3A%2F%2Fcdn-ak.f.st-hatena.com%2Fimages%2Ffotolife%2Fa%2Faratako0%2F20080518%2F20080518141449.png)
リンクテキストとアクセシビリティとスクリーンリーダーの動作 - 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)
スムーススクロールは音声ブラウザで確認すること。 - Trans
スムーススクロールを実装する際は音声ブラウザでの読み上げを確認しておいたほうがよいようです。 jQueryなどのスムーススクロール たまに見かけるjQueryのモジュールでページ最下部からページの最上部にスムーズにスクロールさせるためのページ内リンクがあります。スクリプトもいろいろと紹介されているので、使っているサイトも多くあります。 ただ、そのうちのいくつかのモジュールでは音声ブラウザでうまく動作しないものがあります。 どういうことかというと、普通のページ内リンクはリンクの文字列（例えば、「ページの最上部へ」）を女性の声などで読み上げているときに、Enterをクリックするとid属性やname属性でマークアップされた任意の場所に飛び、音声ブラウザは自動的にそこから読み上げを再開します。 ただし、スムーススクロールで紐付けられたページ内リンクでEnterをクリックすると音声ブラウザがid属性
「TEL」・「FAX」は音声ブラウザやスクリーンリーダーでどのように読み上げられるのか？ - Trans
「TEL」・「FAX」は音声ブラウザやスクリーンリーダーによって読み上げられ方が異なるなので、text-transformを使ったほうが無難なようです。 ちょっとした実験 例えば、以下のようなコードがあるとします。 <ul> <li>tel</li> <li>TEL</li> <li><span class="uppercase">tel</li> </ul> .uppercase { text-transform: uppercase; } それぞれ電話を表す「tel」を小文字、大文字、text-transformで小文字を大文字に変換する、という3つのコードを用意しました。 では、これは音声ブラウザやスクリーンリーダーではそれぞれどのように読み上げられるのでしょうか。 僕の手持ちのIBMホームページリーダー 3.0.4とPC-Talker XPでは、IE6の環境においてそれぞれ次のよう
hn要素を各エリアに配置し、アクセシビリティを高くする。 - Trans
ページの各エリアに対してhn要素を使い起点を設けることにより、アクセシビリティを高めることができるかもしれません。 ある全盲の音声ブラウザユーザの意見 最近、ある全盲の音声ブラウザユーザの意見を聞く機会がありました。彼女が主張する使いやすいWebサイトとは以下の3つとのことでした。 ページ全体の構造がイメージしやすいこと 迷子にならないように道しるべがあること 自分の行きたい場所にすぐに行けること 1つ目はWebサイトの標準的なデザインに従えば、ある程度達成できます。このあたりは、Alertbox: ウェブデザイン標準の必要性（2004年9月13日）を参考にしてください。 また、3つ目はWebコンテンツJISにもあるナビゲーションスキップである程度対応できます。ただ、ジャンプするのはメインコンテンツだけにするべきか、それともサブナビゲーションも入れるべきかなどの問題もあるとは思いますが。
CAPTCHAをアクセシブルにするための色々な取り組み - Trans
自分用メモなのですが、せっかくなので公開します。CAPTCHA（Webサービスに登録する時やブログにコメントをつける際に認証を求めてくる、文字がぐにゃっとした画像）を知っている人も多いと思うし、それがスクリーンリーダー利用者などの、一部の人たちにとってはアクセシビリティ上大問題ということを知っている人も多いと思います。じゃあ、それではアクセシビリティは無視か？！というとそうでもなくて、どうやら色んな取り組みが行われているようです。 スクリーンリーダーのCAPTCHAの読み上げ方 まず、おさらいです。スクリーンリーダーはどういうふうにCAPTCHAを読み上げるのか。英語の動画ですが、次の動画が最も分かりやすい。 内容はちょっと違うのですが、海外の大手SNSで登録の際にCAPTCHAを使っているところが多くて、スクリーンリーダー利用者は登録できないじゃないか！というビデオ。でも、別にSNSだけ
印刷用CSSをもっとよくするための4つのTips。 - TRANS [hatena]
約2ヶ月くらい前に、Printing the Web: Solutions and Techniques | Smashing Magazineというエントリーを読みました。10個以上の海外のサイトのいろんな印刷向けCSSやJavaScriptのTipsが紹介されていて、「印刷用CSSをまとめてみた。」を書いた自分としては何とか分解してやりたいなと思っていました。で、本日ようやく分解が一通り終わりましたので、その中で得たTipsを紹介します。 印刷用デザインも1つのWebデザインプロセスとして考えておく。 今回、このエントリーが最も自分にとっては衝撃的でした。印刷用CSSの機能面だけを追い求めて、「まあ、印刷されるときに、最低限読めればいいんでしょ？」くらいにしか思っていなかった自分が、ちょいと情けない。元ネタは、Five Simple Steps to Typesetting on th
![印刷用CSSをもっとよくするための4つのTips。 - TRANS [hatena]](https://cdn-ak-scissors.b.st-hatena.com/image/square/006177c1ae7d95a2c7c0336994db88ed59a41525/height=288;version=1;width=512/https%3A%2F%2Fogimage.blog.st-hatena.com%2F6435988827676522384%2F6435988827676523317%2F1448268251)
TRANS - * { magin: 0;}だけでは物足りない！zoom: 1;を使おうよ！
IE6からIE7が今後本格的にマーケットシェアを取って行くことを考えると、IE7の仕様やバグを考えた上でのマークアップが欠かせないとは思います。でも、僕らはまだIE7がどんなものかが分からない。そのため、とりあえず* { zoom: 1;}を指定しておくことが安全策なのかもしれません。 IE7のZoom機能で、見事にこける。 先日、うちの本体のサイトを更新し終わった際に、スタッフから「あれ、しゃらくのサイトずれてるよ」と指摘されました。更新箇所が多く、CSSも多少いじくったので、どこか消してしまったのかもしれません。そこで、自分のブラウザで確認するも、どうも問題が再現できない。そのスタッフのブラウザを見ると、こんな感じになっていました。 僕のFirefoxで見てみても問題ないし、そのスタッフが使っているIE7でも問題なし。「うーん」と悩んでみるものの、意外と答えは簡単なところにありました。
TRANS - 携帯用CSSを書く上で押さえておくべきポイント
先日、diggでVitamin Features » Make your site mobile friendlyというエントリーが上がってきてました。見てみると、非常にうまい具合に携帯向けのCSSやHTMLの書き方などが紹介されていました。僕も携帯向けCSSの書き方には興味があったので、勉強がてら重要なポイントを抜き出して、和訳してみました。 和訳文は次からスタートです。（上記サイトの「mobile」は携帯電話やPDAを含めたモバイル機器が正確な訳ですが、ここでは話を分かりやすくするために「mobile」を全て「携帯」と訳しています。） 基本からスタートしよう。 既に論理的でセマンティックなHTMLを構造化しているんだったら、携帯を含めたどのデバイスでもきれいに、使いやすく、アクセシブルになっています。携帯によっては、WAPに準拠しているかもしれないし、もしかしたらWAP2もいけるかもし
Yahoo! UI Library: Fonts CSS を使うのなら、Opera には気を付けて！
Yahoo! UI Library: Fonts CSSを知ってから、CSSを書く際にfont-sizeは大体このライブラリを読み込ませてから使っています。ただし、Operaで表示する際には、気をつけたほうがよさそうな点があったので、メモしておきます。 Fonts CSSはどういう構造になっているのか詳細は分かりませんが、とりあえずクロスブラウザで同じフォントサイズを実現してくれる摩訶不思議なライブラリ。デフォルトのフォントサイズ、つまりfont-size: 100%;は13pxになっており、それからfont-sizeをパーセントで指定することによって、pxでフォントサイズを指定するような感覚で、フォントサイズを指定することができます。 ただし、Operaにおいては、フォントサイズを100%以下、つまり12pxなどにするときはフォントがほかのブラウザより、小さく表示されるバグがあるようです
TRANS - alt=""を越えて。
集中的にアクセシビリティやユーザビリティを最近になってやっと学び始めました。JIS X 8341やWCAG1.0を読み進める中で、もっと自分自身勉強したいと思うようになってきました。そこで、JISやWCAGを学ぶ中で、自分がシニアや障害を持つ人との現場で、またそういった現場で働いている人たちの意見を踏まえた上で、疑問に思うことを列挙しておこうと思います。いずれは、こういうことをちゃんと実装レベルで解決できるようになりたいなと思いを込めて。 alt=""は空文字なのか、半角スペースなのか、それとも全角スペースなのか？ 少し前に「ブロガーのためのアクセシビリティガイドライン」を書きました。この際に、はじめはalt=""と空文字を打つと書いていたのですが、よくよく調べてみると、空文字だと音声ブラウザによっては「画像」と読み上げてしまうことがあるようです。また、全角スペースの場合は、日本語環境以外
ブロガーのためのアクセシビリティガイドライン - Trans
唐突ですが、ブログやWebサイトを更新する際に、よりアクセシビリティが高いコンテンツをどうすれば書くことができるのか、そういったガイドラインを公開します。 といっても、元々は他団体向けにWebサイトを制作している際に、「結構、Webには詳しい」方にコンテンツを書いてもらっていたのですが、時折「概 要」とか、「2007年1月11日（水）」といった記述が見られ、「あー、このままでいくと、更新作業を今後やってもらうのってすごく不安だな」と思いました。そこで、どうすれば音声ブラウザなどがうまく対応できるようにコンテンツを書けばよいのかをガイドラインにまとめてみたのですが、せっかくですので、ウェブ上で公開することにしました。 前提として、 アクセシビリティに詳しい方にとっては、「何を今更」という内容。 デザインやマークアップよりも、コンテンツを書く＝ウェブライティングに特化したガイドライン。 ブロ
ページ内リンクはどう実装すべきかについて考えてみた。
ナビゲーションスキップは主に音声ブラウザ向けに、グローバルナビゲーションなどをスキップするために実装されるものだが、前々からずっとナビゲーションスキップをどのように書けば最適なのか、についてはずっと疑問に思ってきた。というわけで、調べてみた。 前提：まずは最適なHTML（XHTML）を書くこと。 これが大前提。音声ブラウザによっては、heading要素（h1とかh2）を順にスクロールすることができるから。というわけで、XHTML＋CSSによるWeb標準での実装は大前提。というより、これをしっかりと書いておけば、ナビゲーションスキップを埋め込まなくても、音声ブラウザにとってはテーブルレイアウトに比べて、かなり便利になるようだ。 検討事項その1：そもそもナビゲーションスキップは見えるようにすべきか否か。 ナビゲーションスキップを見えるようにするべきか、しないべきかについて、まず考えておく必要が
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
