タグ「CSS」が付けられているもの

overflow:hidden

富士通ウェブ・アクセシビリティ指針

overflow:hidden は、使用しないことが望ましい。文字サイズを大きく設定した場合、一部の文字が表示されなくなる場合がある。

富士通ウェブ・アクセシビリティ指針

WCAG 2.0のためのCSSテクニック

一般的にはすべてのフォームコントロールに視覚的なラベルを付与するのが最善ですが、そのコントロールを囲っているテキストの記述そして/あるいはそのコントロールが含んでいるコンテンツ次第では、視覚的なラベルが不要な場合があります。しかしながらスクリーンリーダのユーザは、コントロールを耳にしたときにその目的が理解できるよう、個々のフォームコントロールに対し明確にラベルが付けられていることを必要とします。ラベルはposition: absoluteを指定するか、heightおよびwidth値を0にしoverflow:hiddenを指定するか、あるいはdisplay:noneを指定することにより、表示しないようにすることができます。これらのテクニックはラベルが目の見えるユーザに対して表示されることを防ぎますが、スクリーンリーダーはそのラベルが非表示であっても読み上げるでしょう。ブラウザ側でCSSが無効化されていれば、すべてのユーザに対しラベルが表示されます。

WCAG 2.0のためのCSSテクニック

方向性がまったく違うようですがWCAGでも薦めているこの手法がWebInspector 5.0ではエラーとなります。

ラベルはブラウザに表示されてもまったく問題はないのでは...

WebInspector 5.0

WebInspector 5.0

WebInspector 5.0は「画面で確認」機能を実現し、修正すべき箇所をビジュアルに確認することが可能になりました。従来は、HTMLのソースを参照し、行番号から問題のある部分を特定しなければなりませんでしたが、WebInspector 5.0では、「画面で確認」機能により、より簡単に、修正すべき箇所を特定できるようになっています。

WebInspector 5.0

ためしに/を検証してみた結果は以下の通りです。

Fujitsu WebInspector 5.0チェック結果

どこが変わったのか...

他のサイトで調べてみます。

WebInspector 5.0

WebInspector 5.0

WebInspector 5.0は「画面で確認」機能を実現し、修正すべき箇所をビジュアルに確認することが可能になりました。従来は、HTMLのソースを参照し、行番号から問題のある部分を特定しなければなりませんでしたが、WebInspector 5.0では、「画面で確認」機能により、より簡単に、修正すべき箇所を特定できるようになっています。

WebInspector 5.0

ためしに/を検証してみた結果は以下の通りです。

Fujitsu WebInspector 5.0チェック結果

どこが変わったのか...

他のサイトで調べてみます。

1024px×768px

Yahoo! ポータル、より便利な「Web 2.0」体験が可能に

Yahoo! は、「Web 2.0」体験を可能にするポータル最新版のプレビューを開始した。最新版の特徴は、新着情報が入ると「娯楽」「スポーツ」「Eメール」などコンテンツのアイコンが点滅することだ。ユーザーがいちいち更新ボタンを押す必要はない。

Yahoo! ポータル、より便利な「Web 2.0」体験が可能に

Ajaxもカッコイイのですが、幅1024pxを想定したレイアウトとなっている。これまでもいくつかの有名サイトが3カラム 幅1024pxや4カラム 幅1024px等でリニューアルしていますが、ポータルでは初めてかもしれません。

確かにアクセスログから調べてみると、私のサイトでも800px×600px環境での閲覧は1%未満です。制作を始めたころは640px×480pxで制作するのが一般的でしたが、今や1024px×768pxの時代となったのか。

WebInspector Version 5.0

富士通がWebのアクセシビリティ診断ソフトを強化

富士通は、Webサイトのアクセシビリティをチェックするためのツールを強化した。5月18日から、同社のWebサイト(http://design.fujitsu.com/jp/universal/assistance/)で公開し、無償提供する。

富士通がWebのアクセシビリティ診断ソフトを強化

5.0では、チェック可能な項目を旧版(4.0)の68個から89個に増やした。例えば、音声読み上げソフトが正しく機能するように、「東 京 都」のように一つの単語にスペースや改行を入れていないかがチェックできる。また、問題点の表示方式を改良し、一覧画面で選んだ問題点が画面上のどこにあるかを赤枠で示すようにした。

富士通がWebのアクセシビリティ診断ソフトを強化

WebInspector Version 2.0を初めて使った時は一晩どうしたら改善できるかと悩んだのですが、WebInspector Version 2.0自体のチェックが甘く、アクセシビリティを理解するうちに問題なく対応できるようになった。

今度のWebInspector Version 5.0は、どの程度厳しくチェックしてくれるのか楽しみです。

WebInspector Version 5.0

富士通がWebのアクセシビリティ診断ソフトを強化

富士通は、Webサイトのアクセシビリティをチェックするためのツールを強化した。5月18日から、同社のWebサイト(http://design.fujitsu.com/jp/universal/assistance/)で公開し、無償提供する。

富士通がWebのアクセシビリティ診断ソフトを強化

5.0では、チェック可能な項目を旧版(4.0)の68個から89個に増やした。例えば、音声読み上げソフトが正しく機能するように、「東 京 都」のように一つの単語にスペースや改行を入れていないかがチェックできる。また、問題点の表示方式を改良し、一覧画面で選んだ問題点が画面上のどこにあるかを赤枠で示すようにした。

富士通がWebのアクセシビリティ診断ソフトを強化

WebInspector Version 2.0を初めて使った時は一晩どうしたら改善できるかと悩んだのですが、WebInspector Version 2.0自体のチェックが甘く、アクセシビリティを理解するうちに問題なく対応できるようになった。

今度のWebInspector Version 5.0は、どの程度厳しくチェックしてくれるのか楽しみです。

Spread Firefox Japan

サイトSpreadFirefoxの日本版,5月上旬にも開始

「SpreadFirefox日本版を,ゴールデンウイーク明けにもオープンします」---Mozilla Japan理事の瀧田佐登子氏は4月30日,Mozilla Party JP 7.0(関連記事)の講演で,マーケティング・サイトSpreadFirefoxの日本版を開設することを明らかにした。

サイトSpreadFirefoxの日本版,5月上旬にも開始

Welcome to Spread Firefox Japan group.

So in other words, this is an area for Japanese and Japanese speaking people to talk in their own language, it is not an area for English speaking people to talk about spreading Firefox in Japan, we hope members respect this intention.

Welcome to Spread Firefox Japan group.

おっ!サイトの表示が日本語となっている。早速エントリーしている方もいる。

WindowsユーザーはIE7を待つまでも無く、MacユーザーはIE5を捨てて(SafariはOK?)、Web標準サポート率が高いFireFoxを

(-moz-border-radiusを使ってみたい...)

HTML validator

先日、知り合いのSOHOから「新しいサイトを作ったのでW3C HTML 4.01 Validのバナーをはりたい。手を加えて欲しい。」とメールがあった。Dreamweaverで制作したテーブルレイアウトのサイトだった。ちょっと修正すればW3C 4.01 Validをもらうことは簡単に出来るけれども、文書構造としては一切成り立っていない。

Web::Blogoscope:XHTMLの最適化手法

当然、テーブルレイアウトの問題も絡んでくる。XHTML+CSSだがテーブルレイアウトを採用しているケース、つまり「ハイブリッドレイアウト」も書式上のエラーではなく使い方のエラーである。決められたボキャブラリと書式を守っていても、使い方が間違っていることになる。

Web::Blogoscope:XHTMLの最適化手法

「簡単だから自分でやりなさい」と・・・
正しくないものに手を貸すことは出来ません。

スタイルシート スキルアップ・デザインブック

なぜ、私の手元にあるかというと・・・

(Web標準に興味がある方には、おおよその見当が付くと思いますが、)今日、ある企業の社長とお会いした。

私のサイトもご覧になっていたようで、恥ずかしい限りですが、Web2.0のことから経営やマネジメント・Blogの書き方まで、普段はとても聞けないだろうと思われるような貴重なお話。

いつも拝見しているBlogで想像していた通りの、とても気さくで、気取らない方でした。

ありがとうございました。

デザインだけでなく機能の向上にも役立つCSS

もうける.net Vol.1(毎日コミニュケーションズ)に、アットスタイルが制作した【真宗 紫雲山 正覚寺】を「CSSを使用したサイト」として紹介記事が掲載されました。

11月、雑誌社より掲載の依頼があり、副住職様より掲載の許可をいただきました。

デザインだけでなく機能の向上にも役立つCSS

福岡県大牟田市にあるお寺「正覚寺」のサイトでは、CSSで細かく文字間のバランスを指定し、見やすさ、読みやすさを考慮して作成されています。ブラウザで文字の大きさを指定してもレイアウトが崩れませんので、是非試してみてください。

デザイン性の向上、管理のしやすさに加え、CSSを使用するメリットとしてもうひとつ、アクセシビリティというものがあります。アクセシビリティとは、「Webサイトの利用のしやすさ」という意味に加え、「障害を持つ人にとっての、Webサイトの利用しやすさ」という意味も含まれます。HTMLからデザインのためのコードを省くことができるため、目の見えない方が使用する音声読み上げブラウザの認識率の向上にも、CSSが役に立つことを覚えておきましょう。

デザインだけでなく機能の向上にも役立つCSS

もうける.net Vol.1(毎日コミニュケーションズ)に、アットスタイルが制作した【真宗 紫雲山 正覚寺】を「CSSを使用したサイト」として紹介記事が掲載されました。

11月、雑誌社より掲載の依頼があり、副住職様より掲載の許可をいただきました。

デザインだけでなく機能の向上にも役立つCSS

福岡県大牟田市にあるお寺「正覚寺」のサイトでは、CSSで細かく文字間のバランスを指定し、見やすさ、読みやすさを考慮して作成されています。ブラウザで文字の大きさを指定してもレイアウトが崩れませんので、是非試してみてください。

デザイン性の向上、管理のしやすさに加え、CSSを使用するメリットとしてもうひとつ、アクセシビリティというものがあります。アクセシビリティとは、「Webサイトの利用のしやすさ」という意味に加え、「障害を持つ人にとっての、Webサイトの利用しやすさ」という意味も含まれます。HTMLからデザインのためのコードを省くことができるため、目の見えない方が使用する音声読み上げブラウザの認識率の向上にも、CSSが役に立つことを覚えておきましょう。

Web標準への切り替え

あなたのWebサイトの CMS の作成者に、適宜、問題を修正するように依頼して下さい。

Web標準への切り替え | あなたのWebサイトの分析

Log検証ツールは、URIのリストを受け取り、あなたがテスト開始時にロードするように選択したモジュールに沿って、分析を行います。 (この作業はあなたの技術チームの作業になると思います。技術チームの人たちと、あなたのサイト用の設定について検討して下さい。) Log検証ツールは、各々のURIに対して一連のテストを実施し、その結果を返します。
この最初の分析によって、あなたのWebサイトの健康状態についての概要を知ることができます。これにより、必要な作業を整理して、エラーのあるページを修正するための戦略を練ることができます。もしかしたら、膨大な数のページが、あなたの設定した基準に適合していないかも知れません。例えば、あなたのWebサイトの全てのページが、不適切なHTML(またはXHTML)かも知れません。でも、心配する必要はありません。― これは、実はよい結果なのです。何故って?それはもし、あなたのWebサイトの作成に、特定のテンプレートエンジンまたはコンテンツ管理システムが使用されているのであれば、この結果は、そのテンプレートに誤りがあることを示しているからです。
この場合には、問題は簡単に解決することができます。単に、あなたのテンプレートを修正し、再度、全てのテストを実行すればよいのです。その結果、エラーは非常に少なくなるか、むしろ多分、全てのエラーをなくすことができるでしょう。もしあなたが、テンプレートエンジンの開発者でないのであれば、その開発者、もしくはあなたのWebサイトの CMS の作成者に、適宜、問題を修正するように依頼して下さい。

Web標準への切り替え | あなたのWebサイトの分析

アクセシビリティから考えるh1

ナビゲーションとスペーサー画像にトラックバックをいただきました。

『透明spacer.gifをアンカーに』は、使用方法を間違えると問題ありのようです。

有限会社ユニバーサルワークスさんのコラムが紹介されていた。こちらのサイトは、以前、別のBlogでも紹介している。

第29回 自治体サイトWebアクセシビリティ調査2005を終えて(上)(2005年9月1日掲載)では、さすが清家さんと思うところがある。

もうひとつ、特殊な発展形としては、上記の読み飛ばしリンクが透明gifであることに有頂天になった制作者が、この小手先のテクニックを駆使して、トップページ全体に不可視のナビゲーションを付けまくるタイプがある。うっとうしさ満点。それやるなら、先に見出しの要素を付けとけよと言いたい。

第29回 自治体サイトWebアクセシビリティ調査2005を終えて(上)(2005年9月1日掲載)

見出しやリストなどの適切な文書構造があってこそアクセシビリティです。

ひとつ勘違いしていたのは・・・

第13回 スキップのテクニック (2004年7月1日掲載)

私:ページの一番上(読み上げの最初)に置くのはやめてね。

制作:どうして?

私:ページに入ってすぐエンターキーを押せというのは酷ではないか!やってみな。

制作:なるほど。

私:いちいちシフト+Tabで戻らないといけないわけよ、もううんざり。タイトルタグの直後は聴き逃しやすいし、そうそう、音声ブラウザのデフォルトではタイトルタグはそのページに入ったとき1回しか読み上げないから、ページの一番上にはもう1回ページ見出しを書いておいてもらえるとうれしいね。

第13回 スキップのテクニック (2004年7月1日掲載)

h1の後にスキップを設置しました。それでは、h1には何が適切なのでしょうか。<h1>要素の扱い | Web標準Blogで質問が掲載されていました。

構造的にマークアップを進めていく場合、<h1>で括るのにふさわしいものとして「a.サイト共通のタイトルや企業名称」と「b.そのページのユニークなタイトル」のうち、どちらがより適切でしょうか。

<h1>要素の扱い | Web標準Blog

ところで、MovableTypeのh1はデフォルトではサイトのタイトルとなっています。(このBlogもphpによりincludeしていますのでサイトのタイトルです。)改善の必要がありそうですね。

CSSハック

IEBlogより:お使いのCSSハックを一掃してください | Web標準Blog

IEBlogは本日付で開発者に対し、IE7のStrict(厳格)モードにおいて機能しなくなるCSSハックの数々を「一掃する」呼びかけを掲載しました。
IE開発チームを手助けすることに興味があろうとなかろうと、次のことを考えてみてください。ソースコードのレビューは、悪いCSSハックの代わりに良いCSSハックを使うことのできる箇所を見極めるうえで、役立つかもしれません。以下の場合においても、レビュー(そしていくつかのドキュメントも?)は、あなたを助けるかもしれません。

久しぶりにcss-discussを見に行ってみると・・・

This hack is DEPRECATED and should not be used due to the imminent release of IE 7. See [the official IE blog] for details.
このハッキングを推奨しない、IE7の差し迫っているリリースのため使用するべきではありません。 詳細のための公式のIEブロッグを見てください。

ページ幅を固定していた頃のスタイルシートはMovableTypeのbase-weblog.cssにも使用されているStarHtmlHack等色々なCSSハックを使用していましたが、現在のリキッドレイアウトでは、CSSハックは不要となり削除しました。 XHTMLコードもdivの多用を避け、シンプルに!

label要素を隠すにはCSS

WCAG 2.0のためのCSSテクニック

一般的にはすべてのフォームコントロールに視覚的なラベルを付与するのが最善ですが、そのコントロールを囲っているテキストの記述そして/あるいはそのコントロールが含んでいるコンテンツ次第では、視覚的なラベルが不要な場合があります。しかしながらスクリーンリーダのユーザは、コントロールを耳にしたときにその目的が理解できるよう、個々のフォームコントロールに対し明確にラベルが付けられていることを必要とします。ラベルはposition: absoluteを指定するか、heightおよびwidth値を0にしoverflow:hiddenを指定するか、あるいはdisplay:none を指定することにより、表示しないようにすることができます。これらのテクニックはラベルが目の見えるユーザに対して表示されることを防ぎますが、スクリーンリーダーはそのラベルが非表示であっても読み上げるでしょう。ブラウザ側でCSSが無効化されていれば、すべてのユーザに対しラベルが表示されます。

一般的な音声ブラウザだと思われているホームページ・リーダー3.01はdisplay:noneを全く読み上げないので、ラベルの存在がわからない。(3.04は未確認)

そうなると読み飛ばしリンクにも使用できない。position: absoluteが現実的な手段のようです。

label要素を隠すにはCSS

WCAG 2.0のためのCSSテクニック

一般的にはすべてのフォームコントロールに視覚的なラベルを付与するのが最善ですが、そのコントロールを囲っているテキストの記述そして/あるいはそのコントロールが含んでいるコンテンツ次第では、視覚的なラベルが不要な場合があります。しかしながらスクリーンリーダのユーザは、コントロールを耳にしたときにその目的が理解できるよう、個々のフォームコントロールに対し明確にラベルが付けられていることを必要とします。ラベルはposition: absoluteを指定するか、heightおよびwidth値を0にしoverflow:hiddenを指定するか、あるいはdisplay:none を指定することにより、表示しないようにすることができます。これらのテクニックはラベルが目の見えるユーザに対して表示されることを防ぎますが、スクリーンリーダーはそのラベルが非表示であっても読み上げるでしょう。ブラウザ側でCSSが無効化されていれば、すべてのユーザに対しラベルが表示されます。

一般的な音声ブラウザだと思われているホームページ・リーダー3.01はdisplay:noneを全く読み上げないので、ラベルの存在がわからない。(3.04は未確認)

そうなると読み飛ばしリンクにも使用できない。position: absoluteが現実的な手段のようです。

ナビゲーションとスペーサー画像

先日のエントリー【MovableTypeの小技(微技)】において、以下のようなご指摘をいただきました。

スペーサー画像を使用するのは、アクセシビリティに反するのではありませんか?

ナビゲーション読み飛ばしリンクや適切な見出しが無い場合など、リンク及びアンカーとしてもよく使う手段です。

アクセシビリティの解説サイト Webアクセシビリティのポータルサイト『Infoaxia(インフォアクシア)』 でもナビゲーション読み飛ばしリンクとして使用されています。

<a href="#contents_start"><img src="/shared/images/spacer.gif" width="1" height="1" alt="メインメニューをとばして、このページの本文へ" class="skip_link" /></a><a id="menu" accesskey="1" name="menu"><img src="/shared/images/spacer.gif" width="1" height="1" alt="ここからメニューです。" class="navigation_menu" /></a>

このように何も意味を持たない画像に高い意味を持つ代替(等価)テキストを付加すとことが必要です。

勿論、過去によく使用されていた、テーブルの特定位置へのレイアウト目的で代替テキストが無いスペーサー画像はアクセシビリティの面で利用すべきではありません。

display:noneと検索エンジンスパム

display:noneは検索エンジンスパムであるという俗説があります。また、スタイルシートにdisplay:noneを記述したためにインデックスから削除されたという事実もあまり聞きません。

Yahooで当サイトのCSSを検索してみると結果に現れました。

ちなみにGoogleではインデックスされていないようです。
しかし、インデックスされてるから削除の対象になるというものでもなさそうです。

当サイトもGUIとナビゲーションを両立させるためにdisplay:noneを多用しているので、今後のYahooの動向には十分注意する必要がありそうです。

MovableType 3.2のテンプレート

やっと、MovableType 3.2 Base Weblogテンプレートの解析に取り掛かった。スタイルシートにはWin IEやMac IEにも対応させるような小技が見られますが、かなりひどい出来です。NucleusのDefaultスキンのほうがよっぽどよい。

今まで通りのトップページのみ2カラムですが、サイドバーにはブロックを作り、装飾を加えている。こんなものは望まない。posted回りも複雑になっている。

シンプルで手の加えやすいものが最善ではないのか?

文字サイズは、全て固定されている。IEなどの一部のブラウザで文字サイズを変更できないのではアクセシビリティ ガイドラインから大きく外れ、時代に逆行している。

この状態から作り直すと大変。
今までのテンプレートを修正する方向で行きます。

アクセシビリティの全て

アクセシビリティを考えてみると、全てはここに行き着く。

Web Content Accessibility Guidelines 2.0

全般的な目標は、現在そして将来にわたって、想定しうる最も広範囲な利用者にとって認知、操作および理解可能であり、なおかつ利用者が使用している様々な支援技術と互換性のあるWebコンテンツを制作することである。基本的原則は以下の通りです。

  • コンテンツは認知可能であること
  • コンテンツのインターフェイス要素は操作可能であること
  • コンテンツの内容およびコントロールは理解可能であること
  • コンテンツは現在および将来のテクノロジーで利用できるよう十分に互換性が確保されていること