»Next  1  |  2  |  3  | All
2007年6月12日

WebInspector 5.02 Java6対応版

Posted by @Style : Entry 00:07 | Comment コメント (0) | Trackbacks トラックバック (0) 「WebInspector 5.02 Java6対応版:Webmaster@Style」をはてなブックマークに追加 「WebInspector 5.02 Java6対応版:Webmaster@Style」をdel.icio.usに追加 「WebInspector 5.02 Java6対応版:Webmaster@Style」にTwitterでコメントする

本日、あるサイトのチェックを行おうとして、インストールしてあるWebInspector 5.0[外部へのリンク]を開こうとしても開かない。

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用があるとは知らなかった…

タグ:

ページ先頭へ
2007年3月04日

accesskey

Posted by @Style : Entry 02:04 | Comment コメント (0) | Trackbacks トラックバック (0) 「accesskey:Webmaster@Style」をはてなブックマークに追加 「accesskey:Webmaster@Style」をdel.icio.usに追加 「accesskey:Webmaster@Style」にTwitterでコメントする

キーボードによるフォームへのアクセス

該当するチェックポイント：

  • 9.4 リンクとフォームの構成部品、オブジェクトの全体を通しての論理的なTab移動順を設定しておく。 [優先度3]
  • 9.5 重要なリンク(クライアントサイド・イメージマップのリンクも含む)、フォームの構成部品とそのグループには、キーボード・ショートカットを付ける。 [優先度3]

11.1 キーボードによるフォームへのアクセス[外部へのリンク]

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対応

Internet Explorer 6
Alt + accesskey
Internet Explorer 7
Alt + accesskey
Firefox 2.0.0.2
Alt + Shift + accesskey
Firefox 1.5.0.10
Alt + accesskey
Opera 9.10
Shift + Esc + accesskey
Safari 2.0.4
control + accesskey
ページ先頭へ
2007年2月22日

文字サイズを考える

Posted by @Style : Entry 02:08 | Comment コメント (1) | Trackbacks トラックバック (1) 「文字サイズを考える:Webmaster@Style」をはてなブックマークに追加 「文字サイズを考える:Webmaster@Style」をdel.icio.usに追加 「文字サイズを考える:Webmaster@Style」にTwitterでコメントする

ネットスター賞を受賞された「ちびごんママ」さんから文字サイズ切り替えのスクリプトのことでご相談があったことを思い出した。
＊YOMIURI ONLINE[外部へのリンク]は文字サイズの切り替えボタンを装備しているが、切り替えボタン自体ががわかりづらく使いにくい。

3年程前、お世話になっている会社の社長（当時57歳）がYahooのあるコンテンツを閲覧中「文字サイズが小さいので読みにくい」とおっしゃっていたので、文字サイズを【大】に変更してあげた。

それ以来社長がインターネットをお使いの際は文字サイズ【大】である。変更する方法をご存じではない。

全てに当てはまる訳ではなくこの例だけに限るが、シニア向けのサイトに大きな文字が使われているとしたら困ったことが起こる。適当な文字の大きさでコントラストさえ明確ならば良いのかもしれない…

タグ:

ページ先頭へ
2007年2月12日

xml:lang属性

Posted by @Style : Entry 01:53 | Comment コメント (0) | Trackbacks トラックバック (0) 「xml:lang属性:Webmaster@Style」をはてなブックマークに追加 「xml:lang属性:Webmaster@Style」をdel.icio.usに追加 「xml:lang属性:Webmaster@Style」にTwitterでコメントする

SEO対策とWeb標準のホームページ作成：xml:lang属性[外部へのリンク]

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>

ウェブコンテンツ・アクセシビリティ・ガイドライン1.0 HTML技術書：2.1 言語の変更を明示する[外部へのリンク]

同様に、複数の言語に対応したスピーチ・シンセサイザーが、適切なアクセントの正しい発音で内容を読み上げられるようになります。もし、言語の変更が示されていなければ、スピーチ・シンセサイザーは現在の言語内で最も適切だと思われる言葉で読み上げようとします。したがって、フランス語で車を表す「voiture」という言葉は、基本言語として英語を使用するスピーチ・シンセサイザーでは「voter」(投票者)と発音されてしまうことになります。

上で示したようにhtml要素で指定した以外の言語コードが出現するたびに再度指定する必要があり、音声出力の読み上げにも大きく影響する。

参考になるリソース

タグ:

ページ先頭へ
2007年2月08日

map要素

Posted by @Style : Entry 01:25 | Comment コメント (0) | Trackbacks トラックバック (0) 「map要素:Webmaster@Style」をはてなブックマークに追加 「map要素:Webmaster@Style」をdel.icio.usに追加 「map要素:Webmaster@Style」にTwitterでコメントする

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要素を有効に利用しよう。

タグ:

ページ先頭へ
2007年1月31日

headingもテキストで

Posted by @Style : Entry 01:41 | Comment コメント (0) | Trackbacks トラックバック (0) 「headingもテキストで:Webmaster@Style」をはてなブックマークに追加 「headingもテキストで:Webmaster@Style」をdel.icio.usに追加 「headingもテキストで:Webmaster@Style」にTwitterでコメントする

WCAG 2.0のためのCSSテクニック[外部へのリンク]

1.1 変化させる必要のあるプロパティ値にはemもしくは%を使用する

1.2 変化させる必要のないプロパティ値にはpxを使用する

h1やh2、h3等の見出しに画像、文章部分はテキストとしてemや%を使用している事が多くみかけられる。

美しく、一見親切のようであるが、ブラウザで文字の大きさをコントロールしても画像を使った見出しの文字サイズは変わらない。アンバランスである。

見出しが読めなくても良いのか。重要であるからこそh1やh2でマークアップするのではないか…

タグ:

ページ先頭へ
2007年1月16日

エキスパート連載コラム

Posted by @Style : Entry 01:36 | Comment コメント (0) | Trackbacks トラックバック (0) 「エキスパート連載コラム:Webmaster@Style」をはてなブックマークに追加 「エキスパート連載コラム:Webmaster@Style」をdel.icio.usに追加 「エキスパート連載コラム:Webmaster@Style」にTwitterでコメントする

エキスパート連載コラム / 実践ノウハウ － Webアクセシビリティポータルサイト『infoaxia(インフォアクシア)』[外部へのリンク]

アクセシビリティ、Web標準（Webスタンダード）、SEO（検索エンジン最適化）、ライティング、それぞれの第一人者の皆さんによる連載コラムです。"木を見て森を見ず" にならないように、アクセシビリティを関連するキーワードとあわせて考えてみましょう。

植木 真・大藤 幹・住 太陽・益子貴寛・木達一仁の4名による連載コラム。

"守り" ではなく、"攻め" のアクセシビリティのススメ[外部へのリンク]

ここ数年のキーワードとして "SEO（検索エンジン最適化）" というのがあります。そして、さらにもう一歩引いてみると、"Web標準（Webスタンダード）" というキーワードがあるのです。昨今のサイト運営において無視することのできないこれらのキーワードは、一見するとアクセシビリティとは何の関係もなくバラバラの点のように見えます。しかし、アクセシビリティとSEOには共通点が多くあり、さらにこれらはWeb標準の構成要素でもあるのです。つまり、それぞれが相互に関連しあっており、その関連性の中でそれぞれを考えていくことが大切です。

タイトルと引用部分だけで全てが言い尽くされているのかもしれません。

タグ:

ページ先頭へ
2006年12月20日

コミュニケーションデザイン

Posted by @Style : Entry 00:54 | Comment コメント (0) | Trackbacks トラックバック (0) 「コミュニケーションデザイン:Webmaster@Style」をはてなブックマークに追加 「コミュニケーションデザイン:Webmaster@Style」をdel.icio.usに追加 「コミュニケーションデザイン:Webmaster@Style」にTwitterでコメントする

昨日、SOHOの友人からメールが届いていた。

以前話した？DTP world 特集記事 P54～で書きおろしました。

DTP WORLD (ディーティーピー ワールド) 2007年 01月号 [雑誌]

彼はコミュニケーションデザインの分野ではちょっと知られた存在らしい。

ピクトグラム&コミュニケーション～アイコンデザイナーとSTのためのサイト外部へのリンク

当サイトは、人のコミュニケーションにおいて、言葉以外の手段も尊重するユニバーサル・コミュニケーション社会の形成を目指すための一つの提案の場、と捉えて頂きたいと考えています。ピクトグラムがその利点を生かし、人と人、人と物とのコミュニケーションをさまざまな場所や空間で支援し、これまで以上に広く世界中で利用される日が来ることを願います。

知り合いであることを誇りに思ってます！

タグ:

ページ先頭へ
2006年12月15日

はなまるチェッカー

Posted by @Style : Entry 11:25 | Comment コメント (2) | Trackbacks トラックバック (0) 「はなまるチェッカー:Webmaster@Style」をはてなブックマークに追加 「はなまるチェッカー:Webmaster@Style」をdel.icio.usに追加 「はなまるチェッカー:Webmaster@Style」にTwitterでコメントする

使いやすさを考えてみる。(アクティブシニア・シルバー層の現場から)外部へのリンク

いつも参考にさせていただいているこのサイトで新しい検証サイトが紹介されている。

アクセシビリティチェック外部へのリンク

試験版、時折「なんでそこにツッコミがはいるのぉ？」とアイスクリームを隠れて食べているのをばれたようなコドモの気持ちになりますが、その辺は診断終了後「そこはちゃうねん」とツッコミが入れられます。

はなまるチェッカー外部へのリンクを使ってみた。

結果は65点！

hanamaru.png

リンクテキスト（リンクの設定されている文字）には判別しやすいように下線をつけましょう。どこにリンクがあるのかがはっきりわかるような表現をすることが重要です。リンク部分がわからないと、リンクをたどることができません。他のページへ移動することができないため、サイト全体を理解することができず、情報が十分に伝わりません。

早速ツッコミを。

ナビゲーションバーにもリンク下線がいるのでしょうか…

タグ:

ページ先頭へ
2006年12月02日

WebInspector Proを使う

Posted by @Style : Entry 00:14 | Comment コメント (0) | Trackbacks トラックバック (0) 「WebInspector Proを使う:Webmaster@Style」をはてなブックマークに追加 「WebInspector Proを使う:Webmaster@Style」をdel.icio.usに追加 「WebInspector Proを使う:Webmaster@Style」にTwitterでコメントする

WebInspector Pro外部へのリンクをダウンロードし試用してみた。

WebInspector Proのヘルプより

ウェブ・アクセシビリティ診断/修正ツール「WebInspector Pro」（以降、本ソフトウェアと記す）は、HTML、XHTMLのウェブ・アクセシビリティをチェックし、アクセシビリティの問題点を簡単・効率的に修正することができるソフトウェアです。

アクセシビリティチェック機能により、HTML、XHTMLのソース上の問題点を見つけ出すことや、イメージ一覧機能により、画像のalt属性の編集を一括して行えるなど、HTML、XHTMLのウェブ・アクセシビリティの向上に必要な機能が多数搭載されています。

昨日のエントリーの時点ではWebInspector 5.0外部へのリンクの高機能版と思っていたのだが、WebInspector 5.0外部へのリンクとはまったく違う。アクセシブルな文書を制作する為のテキストエディタと考えるべきだろう。

文書を開く

上部のソース編集エリアのXHTML/HTMLソースに問題のある箇所にマークが付き、下部のユーティリティエリアには問題の解説が表示される。

修正を行えば以下のような表示となる。

チェックをクリアした画像

普段テキストエディタでの制作を行うことの無い方は、DreamweaverなどのWYSIWYGエディタで制作したページをWebInspector Proでチェックすると簡単・効率的に修正することができる。

しかし、どこにでもあらゆるタグの挿入ができるので、XHTML/HTMLの知識は必須となる。

タグ:

ページ先頭へ
»Next  1  |  2  |  3  | All

スポンサード　リンク

ページ先頭へ

Tags

Archives

Twitter

follow me!

Search



Recommend

  • ピクトグラムの利用と普及を考える会
  • I heart Validator

Feed

Syndicate this site (RDF) Syndicate this site (XML)
Syndicate this site (ATOM)
Add to Google

Licenses

クリエイティブ・コモンズ・ライセンス
This weblog is licensed under a Creative Commons License.