Web標準Blogでは、Web標準の利用に興味のあるWebサイト管理者、Webデザイナーの方向けに、Web標準を利用するための手法やノウハウ、参考になるリソース等を、国内外を問わずご紹介します。
なお当Blogでは、Web標準に関する疑問や質問を募集しています。Webコンテンツ実装プロセスにまつわるお悩みでも結構ですので、お気軽に電子メールでstandards@mitsue.co.jp宛にお送りください。
2008年7月29日
カリキュラムの調査結果
フロントエンド・エンジニア 木達
2008年7月28日
Rob Dickerson著
（この記事はWeb Standards Project（WaSP）における投稿記事「Curriculum Survey Results」を翻訳したものです。当Blogは翻訳の正確性を保証いたしませんので、必要に応じ原文を参照ください。）
教育タスクフォースは、2007年に実施したカリキュラムの調査結果を公開しました。
教育タスクフォースとW3Cの品質保証インタレストグループの両メンバーが初めて会合を持ち、昨今のWeb技術を教える高等教育の専門家を手助けする、Web標準ベースのカリキュラムの必要性について議論したのは、2006年初めのことでした。そのとき、より多くの情報を収集すべく調査を行うことが決定されました。質問は系統立てられていたものの、翌年の大部分は野放図な調査エンジンを手なずけることに費やされました。
中・高等教育の双方をターゲットとして、調査は2007年の第二四半期に開始、約三ヶ月にわたり実施しました。数多の中断や遅れ（業界内や教育界における専門家のなかからタスクフォースにリクルートしたことを含む）の後に、調査結果を公開しました。
アクセシビリティやWeb標準を含むベストプラクティスのためのカリキュラムを実施するうえで、最大の障壁は何かをたずねたところ、教育専門家たちの多くは適切な教材や関連資料といったももの不足を挙げています。OperaのWeb標準カリキュラムとWaSP独自のカリキュラム・フレームワークがともに現在開発中ですから、この点はもはや課題ではないはずです。
年内には、教育タスクフォースは別の調査を実施する計画をしています。そのときには、複数の言語で実施できればと思います。もしあなたが調査の翻訳に興味をお持ちであれば、是非教育タスクフォースまでご連絡ください。
恒久リンク | コメント [0件] | 関連情報（トラックバック） [0件]
2008年7月25日
書籍『マイクロフォーマット』が発売
フロントエンド・エンジニア 木達
マイクロフォーマットを専門的かつ総合的に扱った書籍、『Microformats: Empowering Your Markup for Web 2.0』の日本語訳であります『マイクロフォーマット 〜Webページをより便利にする最新マークアップテクニック〜』が、発売されました。既に一部書店の店頭に並び始めているほか、オンラインストアでもお買い求めいただけるようになっています。発売に先立ち、先月には原著者のJohn Allsopp氏をお招きして出版記念セミナーを開催、当Web標準Blogでも告知させていただきましたが、あらためて同書をご案内させていただきます。
- タイトル
- マイクロフォーマット 〜Webページをより便利にする最新マークアップテクニック〜
- 著者
- John Allsopp
- 翻訳
- 浅野紀予
- 監訳
- 木達一仁（株式会社ミツエーリンクス）
- 定価
- 3,780円（税込）
- サイズ
- A5判、464ページ
- ISBN
- 978-4-8399-2544-4
関連して、現在発売中のWeb Designing誌（2008年8月号）に、マイクロフォーマットの入門記事を書かせていただきました（p.162〜p.165『onClick：「マイクロフォーマット」をはじめてみよう』）。是非、そちらもチェックしてみてください。
恒久リンク | コメント [0件] | 関連情報（トラックバック） [0件]
2008年7月25日
Acid 2テストが正常に復帰
フロントエンド・エンジニア 木達
2008年7月24日
Derek Featherstone著
（この記事はWeb Standards Project（WaSP）における投稿記事「Acid 2 Test Back to Normal」を翻訳したものです。当Blogは翻訳の正確性を保証いたしませんので、必要に応じ原文を参照ください。）
当WaSPサイトで公開しているAcid 2テストに問題が発生していましたが、現在は既に修正されています。
しばらくのあいだ、私たちはWaSPサイト上のAcid 2テストに問題を抱えていました。ご存知でない方のために紹介しますと、Acid 2テストとは基本的に、Web標準への準拠の度合いを評価する際の指標として用いる、ブラウザベンダー向けのテストです。あなたがお使いのブラウザが、Acid 2テストページを模範の表示と同じように表示したなら、そのブラウザは「当たり」だったというわけです。
正直に言って、この10日間ほどのあいだに、私はAcid 2テストについて過去に知っていたことよりずっと多くを学びました。もしあなたもそうしたいのなら、Acid 2ガイドツアーから手をつけると良いでしょう。
手短に解説をすると、HTTPステータスコードに404を返すURLを参照するdata属性をもつ要素の処理テストが、Acid 2には含まれていました。キャッシングルールやmod_rewriteの設定、リダイレクト指定などが衝突した結果、私たちのサーバの404ページで問題が生じました。キャッシュされたバージョンの404ページは、200というHTTPステータス（訳注：これはリクエストの成功を意味するステータスコード）を返していたのです。ご想像の通りで、これがテストを使い物にならなくしていました。
Acid 2は壊れましたが、もう今は壊れていません。テスト続行です。
恒久リンク | コメント [0件] | 関連情報（トラックバック） [0件]
2008年7月24日
label要素とその挙動
フロントエンド・エンジニア 矢倉
先週取り上げたmaxlength属性に引き続き、今回はlabel要素について調べてみました。
label要素とアクセシビリティ・ユーザビリティ
input要素そのものには、ラベルを記述する仕組みが用意されていません。このため、スクリーンリーダーなどでフォームコントロールの読み上げに支障が出ることがあります。アクセシビリティの確保のため、各フォームコントロールにはlabel要素を設けることが必要でしょう。
さて、label要素はアクセシビリティにのみ効果があるというわけではありません。ラベルを指定することは、ユーザビリティの向上にもつながります。
たとえば、チェックボックスやラジオボタンなどのコントロールは、それ自身のサイズが小さいため、クリックをしにくいという欠点があります。しかし、label要素でラベルとフォームコントロールを結びつけることにより、ラベルをクリックしたときにチェックをつけたり、ラジオボタンを選択することができるようになります。
しかし、ユーザビリティの向上を見込めるにも関わらず、label要素を利用していないフォームは数多くのWebサイトに存在しています。
ラベルとコントロールの視覚的な結びつき
さて、label要素は「それがlabel要素なのか見てもわからない」という問題を抱えています。label要素には視覚的なデフォルトスタイルが存在しないため、コントロールとラベルを並べても、ただのテキストなのか、label要素なのかの区別がつかないのです。ラベルに相当するテキストをクリックしても選択されず、がっかりされた方は少なからずいるのではないでしょうか。
では、ラベルをクリックしている時やカーソルを重ねた時に、何かしらの視覚的な反応はあるのでしょうか。次のようなサンプルを作って検証してみました。
まず、FirefoxとOperaですが、特に視覚的なフィードバックはありませんでした。Safariもほぼ同様ですが、クリック中の状態（CSSで言うところの :active）では、チェックボックスの色が少し暗くなるといった反応がありました。
このような状況もあってか、IEの挙動には感心しました。IEではラベルにカーソルをのせたとき、結び付けられたコントロールも視覚的に反応するようになっていたのです。
ラベル自体の見た目に何らかの変更が起こるわけではないため、ラベルとコントロールが結びついていることがユーザーに伝わりづらいかもしれませんが、何も起こらないよりはユーザーの助けになるでしょう。
さて、すこし残念だったのが、FirefoxとOperaです。実はこの二つ、設定メニューにあるチェックボックスやラジオボタンでは、IEと同じ挙動をとるのです。設定で実現できているならば、Webページにおいても同じ動作をするようにして欲しいと思いました。
よりよいラベルのアイデア
できることであれば、ラベルにも視覚的なフィードバックが欲しいところです。
GUIに関する問題であることから、プラットフォーム側で対応がなされるのが理想ですが、スタイルシートなどを利用して、ホバー時は背景を変更するなどの工夫を行ってみるのもいいかもしれません。
フォームのユーザビリティは、まだまだ向上できるように感じています。label要素を記述するといった基本的な対応に加えて、よりよいユーザー体験を提供できるような取り組みを行う必要があるでしょう。
恒久リンク | コメント [0件] | 関連情報（トラックバック） [0件]
2008年7月16日
フォームのmaxlength属性
フロントエンド・エンジニア 矢倉
input要素には、maxlengthという属性が定義されています。先日社内でこの属性について質問をうけたので、すこし調べてみることにしました。
最大文字数を指定する属性
HTML4仕様書では、maxlength属性は次のように定義されています。
- maxlength = number [CN]
- When the type attribute has the value "text" or "password", this attribute specifies the maximum number of characters the user may enter. This number may exceed the specified size, in which case the user agent should offer a scrolling mechanism. The default value for this attribute is an unlimited number.
「この属性はユーザーが入力できる最大文字数を指定する」と書かれています。たとえば、<input type="password" maxlength="12" />と記述すれば、このパスワード入力フィールドは、12文字まで文字を入力することが出来ます。
このmaxlength属性ですが、昔はあまり使えるものではありませんでした。指定される値は文字数という定義にもかかわらず、Netscape 4ではバイト数として認識されていたため、日本語などの多バイト文字の入力に難があったためです。今日のブラウザでは、仕様どおり文字数として処理しています。
日本語入力とmaxlength
さて、maxlengthで指定した値を超えて入力した文字、および変換中の扱いについては、ブラウザの相互運用性が確保されていません。
どのようなことか言葉で説明するのは難しいので、maxlength="5"を指定したテキストフィールドを設置してみました。ここに「Web標準Blog」と入力してみます。
FirefoxやSafariでは、「WebひょうじゅんBlog」と、5文字を超えても入力されたすべての文字が表示されます。この状態から「Web標準Blog」と変換し確定すると、「Blog」が切り取られ「Web標準」がテキストフィールドに入力されます。
しかしIEやOperaでは、「Webひょ」と、5文字を越えた時点でその先は表示されなくなります（確定状態ではないので変換は可能です）。確定するとFirefoxやSafariと同じく、「Blog」が切り取られて「Web標準」となります。
入力中の文字は読むことが出来ても、切り取られることが予想できないFirefoxやSafari。一方、指定文字数を超えた文字は読めなくなるが、テキストボックスに何らかの仕掛けがあることを暗示するIEやOpera。どちらもユーザーが「文字制限がある」と気づくために充分な情報を提示していないように感じますが、この違いは興味深いと思います。
maxlengthのユーザビリティ
さて、ここまで簡単に解説してはみたものの、入力文字数を制限することが望ましいケースは、あまりないように感じています。思いつくものでも、ユーザー名やパスワードくらいでしょうか。
郵便番号や携帯電話番号など、桁の決まっている情報に対してmaxlength="7"やmaxlength="11"が指定されているフォームもありますが、あまり良い設計であるとは思いません。というのは、「163-1115」や「090-0000-0000」といったように、ハイフンを入力してしまうユーザーも少なからず存在するからです。
ハイフンを入力してしまったために文字が入力できず困ったり、または「数字以外の文字が含まれています。」などのエラーを見せられる状況は、よくある悪いユーザー体験のひとつでしょう。この場合はできるだけシステム側でハイフンを取り除いたりする工夫を行うべきです。
また、Ajaxを利用したWebサービスの登録フォームにおいて、入力可能な文字数のチェックを常に行うものや、「入力可能な文字数をオーバーしています」などのメッセージを表示させるものが増えています。このようなフィードバックを行う仕組みが、ブラウザにも標準的に導入されるべきなのかもしれません。
恒久リンク | コメント [0件] | 関連情報（トラックバック） [1件]
2008年7月15日
7月前半のW3C
フロントエンド・エンジニア 矢倉
MWBPとWCAGの関連性
7月3日に、Relationship between MWBP and WCAGの最新草案が公開されました。
この文書は、モバイル機器で利用しやすいコンテンツを提供するための考えをまとめたMWBPと、アクセシビリティガイドラインであるWCAGとの関連について述べています。MWBPから見たWCAG、WCAGから見たMWBPなど、観点を分けて文書化されているのが特徴です。
POWDER Formal Semantics
7月9日にPOWDER WGより、Protocol for Web Description Resources (POWDER): Formal Semanticsという文書が公開されました。
この仕様は、先日公開されたPOWDER DRとRDF/OWLの連携について、曖昧さのない変換を行うための仕組みを定義したもののようです。
Charles McCathieNevile へのインタビュー記事
W3C Q&A Weblogに、Opera SoftwareのCSOである、Charles McCathieNevileへのインタビュー記事 “Interview: Charles McCathieNevile on Opera 9.5 and W3C Standards” が掲載されています。
先月に公開されたOpera 9.5と、HTML5やCSS、その他各種Web標準仕様とのかかわり、またW3Cへの提言などが語られています。
Operaといえば、先週Web Standards Curriculumという、Web標準に関する教育や啓蒙のためのコンテンツが公開されました。Webの基本的な仕組みからHTMLの要素解説など、幅広いトピックで記事が公開されています。最終的には50個を超える記事が公開される予定とのことで、今後の展開にとても期待しています。
恒久リンク | コメント [0件] | 関連情報（トラックバック） [0件]
2008年7月14日
アクセシビリティの英国規格
フロントエンド・エンジニア 木達
2008年7月11日
Bruce Lawson著
（この記事はWeb Standards Project（WaSP）における投稿記事「British Standard for accessibility」を翻訳したものです。当Blogは翻訳の正確性を保証いたしませんので、必要に応じ原文を参照ください。）
英国規格協会（British Standards Institution: BSI）はWaSPの二人のメンバー、Bruce LawsonとPatrick Laukeを、英国初のWebアクセシビリティ規格策定に向けた草案作成委員会に招待しました。
2年前、BSIは障害者権利委員会の支援を受け、一般公開仕様書（Publicly Available Specification: PAS）を作成しました。それが「PAS 78: アクセシブルなWebサイトを発注するための基準を示した手引書」です。PASは短期間のうちに策定され、2年後には「失効」するものですが、PAS 78は人気があることから、BSIはそれを完全な英国規格とすべく更新することを決めました。
私たちは草案に携わり始めたばかりで、まだ規格に名前も無いのですが、今のところは「オンライン上の障害者に対する素晴らしいユーザー体験を開発することの促進」としています。
そういうわけで、来春にリリースされるであろうBS8878に何が盛り込まれるかを言うには、まだ時期尚早です。開発者よりむしろサイトを運営する側を助けるための規格ですから、リリース時点におけるWCAGのバージョンがいくつであっても、それがWCAGとかち合うことは無い、とは言えます。PAS 78と同様に、それは今日のWeb標準への支持を奨励することになるでしょう。
また私は、Julie Howellが委員長を務めるほかに、誰が委員として参加しているかを語ることはできません。放送、銀行、法律、教育を含むありとあらゆる業種、そして（重要な点ですが）認知障害に取り組む団体を含む障害者団体から、代表者が集まっています。
ありがたいことにPatrickと私は、それぞれが勤務しているOpera SoftwareおよびUniversity of Salfordより認可を受け、旅費の支払いや会合に参加したり草案を執筆するあいだ離職することへの支援を受けます。私たちを支援することで、勤務先が得るものはありませんし、草案に対して影響を及ぼすこともありませんが、障害者のWeb上での経験を改善することはできます。
手続きに関して補足しますと、Derek FeatherstoneがWaSPのグループリードに役職を移ったことにより、私とPatrickはアクセシビリティタスクフォースを共同で統率しています。私たちの主要なプロジェクトとしてこの英国規格のほか、マイクロフォーマットコミュニティと連携して引き続きさまざまな日時パターンのスクリーンリーダーによるテストを行ったり、HTML5の開発の監視に取り組む予定です。
恒久リンク | コメント [0件] | 関連情報（トラックバック） [0件]
2008年7月 9日
OperaがWeb標準のカリキュラムを公開
フロントエンド・エンジニア 木達
2008年7月8日
Rob Dickerson著
（この記事はWeb Standards Project（WaSP）における投稿記事「Opera Web Standards Curriculum」を翻訳したものです。当Blogは翻訳の正確性を保証いたしませんので、必要に応じ原文を参照ください。）
Opera Software ASAのChris Millsは、OperaのWeb標準カリキュラム「Opera Web Standards Curriculum」をリリースしたことを、本日発表しました。予定されている50のうち、既に最初の23の記事が公開され、利用することができます。
このカリキュラムは、教育のレベルやWeb標準への認知を底上げするよう、チュートリアルの包括的なセットを提供することを意図されています。またクリエイティブ・コモンズのライセンスにおいてリリースされており、自由に利用・共有することができます。
Chrisは次のように述べています。
私たちは、クライアントサイドのWebデザインやWeb開発を「正しく」学んだり教えたいと思う人なら誰にでも、このカリキュラムが役立つだろうと思っています。学校や大学の生徒や先生、企業内でトレーニングを授けたり、あるいは受ける人などにも役立つでしょう。既に複数の大学や、Yahoo!を含む大企業より支持いただいています。
翻訳やカリキュラムをPDFファイルにパッケージ化するといったことが、今後予定されています。
恒久リンク | コメント [0件] | 関連情報（トラックバック） [0件]
2008年7月 2日
6月後半のW3C
フロントエンド・エンジニア 矢倉
6月前半については、「6月前半のW3C」をご覧ください。
XML Schema 1.1の最新草案
6月20日に、XML Schema 1.1の新しい草案が公開されました。スキーマを記述するための要素や属性を定義したStructuresと、データ型を定義するDatatypesという二つの仕様書から構成されています。
バージョン1.1では、XML 1.1のサポートほか、多くの修正や改善が行われています。
RDFaの勧告候補
先の記事「メタ情報をXHTMLに埋め込むRDFa」にてすでに触れましたが、RDFaの構文および処理をまとめた“ RDFa in XHTML: Syntax and Processing” が、6月20日に公開されました。
構文仕様とあわせて、入門文書であるRDFa Primerの最新草案も公開されています。前の草案から大幅に書き直され、シンプルな構成になりました。
POWDERの最新草案
6月30日に、Protocol for Web Description Resources (POWDER)の新しい草案が公開されました。リソースをグループ化する Grouping of Resourcesと、リソースにメタ情報を付加するDescription Resources、どちらも更新されています。
恒久リンク | コメント [0件] | 関連情報（トラックバック） [0件]
