アットスタイルのWebmasterがHTML・CSS・アクセシビリティ・Movable Type 等、気になる事について色々と・・・
このブログで数回紹介している「コミュニケーション支援用絵記号」デザイナー、オフィス・スローライフ林さんの新しいサイトがオープンした。
世界共通のコミュニケーションシンボル、ピクトグラム。当サイトは、世界に先駆けて日本で規格化された「コミュニケーション支援用絵記号デザイン原則」に基づいたピクトグラムのダウンロードサイトです。コミュニケーションボード、案内用サインやメニュー、またプレゼンやホームページのアイコン用などに５種類のデータ形式を取りそろえています。お客様のニーズに応じてご利用ください。
EMF・EPS・JPG・PNG（レイヤーなし）の4種類（+PDF）のピクトグラムデータを購入できる。
特にオススメは「アドホックカテゴリ」の「JIS絵記号（フリー）」。4月7日現在323点、メンバー登録すると無料でダウンロード出来る。
ご利用ください。
本日、あるサイトのチェックを行おうとして、インストールしてあるWebInspector 5.0![[外部へのリンク]](http://atstyle.biz/webimg/link.gif){kind=small}
を開こうとしても開かない。
WebInspector 5.02 Java6対応版が公開されていました。Javaバージョン6の方は必ずアップグレードしてください。
WebInspector 5.02 Java6対応版を公開しました。
【重要なお知らせ - 2007年6月7日以前にWebInspectorをダウンロードされた方へ】
Java バージョン6の環境で動作するWebInspector 5.02を公開しました。Windows版のWebInspector 5.0以前のバージョンは、Javaバージョン6の環境で動作しません。 WebInspector 5.0以前のバージョンをお使いの方は、お手数ですが、最新版 5.02を再度ダウンロードしてご利用ください。（なお、Macintoshをご利用の方は、従来のバージョンでそのままお使いいただけます。）
Mac用があるとは知らなかった...
キーボードによるフォームへのアクセス
該当するチェックポイント：
- 9.4 リンクとフォームの構成部品、オブジェクトの全体を通しての論理的なTab移動順を設定しておく。 [優先度3]
- 9.5 重要なリンク(クライアントサイド・イメージマップのリンクも含む)、フォームの構成部品とそのグループには、キーボード・ショートカットを付ける。 [優先度3]
Movable Type デフォルトテンプレートのindividual_entry_archive.tmplにおけるコメントフォーム
<p>
<label for="comment-author">名前:</label>
<input id="comment-author" name="author" size="30" />
</p>
<p>
<label for="comment-email">メールアドレス:</label>
<input id="comment-email" name="email" size="30" />
</p>隠し技的にaccesskeyを追加するよりも、accesskeyによるショートカットを設けていることを明記すべきである。
主要モダンブラウザのaccesskey対応
ネットスター賞を受賞された「ちびごんママ」さんから文字サイズ切り替えのスクリプトのことでご相談があったことを思い出した。
＊YOMIURI ONLINEは文字サイズの切り替えボタンを装備しているが、切り替えボタン自体ががわかりづらく使いにくい。
3年程前、お世話になっている会社の社長（当時57歳）がYahooのあるコンテンツを閲覧中「文字サイズが小さいので読みにくい」とおっしゃっていたので、文字サイズを【大】に変更してあげた。
それ以来社長がインターネットをお使いの際は文字サイズ【大】である。変更する方法をご存じではない。
全てに当てはまる訳ではなくこの例だけに限るが、シニア向けのサイトに大きな文字が使われているとしたら困ったことが起こる。適当な文字の大きさでコントラストさえ明確ならば良いのかもしれない…
xml:lang属性は、指定した要素内の内容を書き表している言語を示します。 XHTML1.1 では、HTML互換のlang属性が廃止されたため、代わりにxml:lang属性を指定します。値はlang属性と同じでアルファベット2文字で言語の種類を表す言語コードを指定します。文書内で使用している言語を指定することで、検索エンジンのロボットが情報を収集する際の各言語別の文書インデックス化の手助けや音声出力環境の読み上げ時に言語特有の発声規則を使えるようになることが期待されます。
他文書の引用などで文書内（blockquote要素等）での言語コードが変わる場合がある。
このブログの2006年4月14日のエントリー：pre要素の引用部分も言語コードが変わっている
<blockquote cite="http://www.w3.org/TR/html4/struct/text.html#h-9.3.4" lang="en" xml:lang="en"><p>The horizontal tab character</p>
<p>The horizontal tab character (decimal 9 in [ISO10646] and [ISO88591] ) is usually interpreted by visual user agents as the smallest non-zero number of spaces necessary to line characters up along tab stops that are every 8 characters. We strongly discourage using horizontal tabs in preformatted text since it is common practice, when editing, to set the tab-spacing to other values, leading to misaligned documents.</p></blockquote>同様に、複数の言語に対応したスピーチ・シンセサイザーが、適切なアクセントの正しい発音で内容を読み上げられるようになります。もし、言語の変更が示されていなければ、スピーチ・シンセサイザーは現在の言語内で最も適切だと思われる言葉で読み上げようとします。したがって、フランス語で車を表す「voiture」という言葉は、基本言語として英語を使用するスピーチ・シンセサイザーでは「voter」(投票者)と発音されてしまうことになります。
上で示したようにhtml要素で指定した以外の言語コードが出現するたびに再度指定する必要があり、音声出力の読み上げにも大きく影響する。
参考になるリソース
map要素は複数のリンクをグループ化してナビゲーションの読み飛ばしに利用することができる。
ウェブコンテンツ・アクセシビリティ・ガイドライン1.0 HTML技術書:6.2 リンクのグループ化とそれを読み飛ばす仕組
【例】
この例では、MAP要素によってリンクをグループ化し、title属性によってそれがナビゲーション・バーであることを示しています。そして、グループ化したリンクの中の最初のリンクは、グループの後にあるアンカーへと移動するようになっています。また、各リンクは、リンクしていない印刷可能な(両端をスペースで囲った)文字で区切られていることに注意してください。 （【訳注】MAP要素には、HTML4.01の場合はname属性を、XHTML1.0の場合はid属性を必ず指定する必要がありますので注意してください。）<BODY> <MAP title="ナビゲーション・バー"> <P> [<A href="#how">ナビゲーション・バーを読み飛ばす</A>] [<A href="home.html">ホーム</A>] [<A href="search.html">検索</A>] [<A href="new.html">更新情報</A>] [<A href="sitemap.html">サイトマップ</A>] </P> </MAP> <H1><A name="how">このサイトの使い方</A></H1> <!-- このページのコンテンツ --> </BODY>
DTD
<!ELEMENT map ((%block; | form | %misc;)+ | area+)>
<!ATTLIST map
%i18n;
%events;
id ID #REQUIRED
class CDATA #IMPLIED
style %StyleSheet; #IMPLIED
title %Text; #IMPLIED
name NMTOKEN #IMPLIED
>元々イメージマップのために定義された要素型であるため解説しているサイトも少ない。アクセシビリティアップを目指してmap要素を有効に利用しよう。
1.1 変化させる必要のあるプロパティ値には
emもしくは%を使用する
1.2 変化させる必要のないプロパティ値には
pxを使用する
h1やh2、h3等の見出しに画像、文章部分はテキストとしてemや%を使用している事が多くみかけられる。
美しく、一見親切のようであるが、ブラウザで文字の大きさをコントロールしても画像を使った見出しの文字サイズは変わらない。アンバランスである。
見出しが読めなくても良いのか。重要であるからこそh1やh2でマークアップするのではないか...
エキスパート連載コラム / 実践ノウハウ － Webアクセシビリティポータルサイト『infoaxia(インフォアクシア)』
アクセシビリティ、Web標準（Webスタンダード）、SEO（検索エンジン最適化）、ライティング、それぞれの第一人者の皆さんによる連載コラムです。"木を見て森を見ず" にならないように、アクセシビリティを関連するキーワードとあわせて考えてみましょう。
エキスパート連載コラム / 実践ノウハウ － Webアクセシビリティポータルサイト『infoaxia(インフォアクシア)』
植木 真・大藤 幹・住 太陽・益子貴寛・木達一仁の4名による連載コラム。
ここ数年のキーワードとして "SEO（検索エンジン最適化）" というのがあります。そして、さらにもう一歩引いてみると、"Web標準（Webスタンダード）" というキーワードがあるのです。昨今のサイト運営において無視することのできないこれらのキーワードは、一見するとアクセシビリティとは何の関係もなくバラバラの点のように見えます。しかし、アクセシビリティとSEOには共通点が多くあり、さらにこれらはWeb標準の構成要素でもあるのです。つまり、それぞれが相互に関連しあっており、その関連性の中でそれぞれを考えていくことが大切です。
タイトルと引用部分だけで全てが言い尽くされているのかもしれません。
昨日、SOHOの友人からメールが届いていた。
以前話した？DTP world 特集記事 P54～で書きおろしました。
![DTP WORLD (ディーティーピー ワールド) 2007年 01月号 [雑誌]](http://ec2.images-amazon.com/images/P/B000LAZEU0.01._SCMZZZZZZZ_V34416891_.jpg)
彼はコミュニケーションデザインの分野ではちょっと知られた存在らしい。
ピクトグラム&コミュニケーション～アイコンデザイナーとSTのためのサイト
当サイトは、人のコミュニケーションにおいて、言葉以外の手段も尊重するユニバーサル・コミュニケーション社会の形成を目指すための一つの提案の場、と捉えて頂きたいと考えています。ピクトグラムがその利点を生かし、人と人、人と物とのコミュニケーションをさまざまな場所や空間で支援し、これまで以上に広く世界中で利用される日が来ることを願います。
知り合いであることを誇りに思ってます！
使いやすさを考えてみる。(アクティブシニア・シルバー層の現場から)
いつも参考にさせていただいているこのサイトで新しい検証サイトが紹介されている。
試験版、時折「なんでそこにツッコミがはいるのぉ？」とアイスクリームを隠れて食べているのをばれたようなコドモの気持ちになりますが、その辺は診断終了後「そこはちゃうねん」とツッコミが入れられます。
はなまるチェッカーを使ってみた。
結果は65点！
リンクテキスト（リンクの設定されている文字）には判別しやすいように下線をつけましょう。どこにリンクがあるのかがはっきりわかるような表現をすることが重要です。リンク部分がわからないと、リンクをたどることができません。他のページへ移動することができないため、サイト全体を理解することができず、情報が十分に伝わりません。
早速ツッコミを。
ナビゲーションバーにもリンク下線がいるのでしょうか...