新米デザイナーの日報|design tracks » XHTML

IEで表示確認する際に活用すると良いもの

ts — Thu, 26 Aug 2010 22:19:20 +0000

IEでデバック、検証する際に使っているものをピックアップしました。
改めてな部分満載ですが。

xray

ブックマークレット型で見たい部分をクリックするとDOM属性を表示してくれます。
ただ、細かく数値を変更したりはできず確認するだけなので、あんまり使用することはないです。

firebug lite

よく使うのはfirefoxのアドオンでもおなじみの、firebugですね。
こちらもブックマークレット型で、機能に制限はあるものの十分です。

IE Developer Toolbar

これはIEのアドオンでリリース当時はめちゃくちゃ使ってました。
firebug liteを知ってからあまり使わなくなりましたが、たまに使ってます。

少しずつIEとは仲良くなっているものの、相変わらず苦労する時があるのですが、上記のモノは重宝してます。

Zen-Coding導入してみました。

ts — Thu, 18 Feb 2010 21:45:09 +0000

個人的に最近目にしており、気になっていたので導入してみました。
今回dreamweaverに導入しました。

どういうものかというと（まだ慣れてないですが）、
div#container>ul.nav>li.item*3>a

で、「control+,」

のように展開してくれます。
サポートしているエディタも多いので、環境にはあまり左右されずにかつ、効率的に作業できそうです。

寄付をしないでアイテムを買う「夢の病院をつくろうPROJECT」

ts — Wed, 14 Oct 2009 17:52:36 +0000

駅前やコンビニやwebサイト等で募金を募っている場面は、何度か目にしたことがあります。たまに何に使われるのか細かく書かれていないモノがあったりしますが、やはり明確でないものは疑ってしまって行動を起こしにくいです。
ですが、このサイトはオンラインショッピングが浸透しているこの時代にあったやり方で、尚かつ何に使ってほしいかを選べるのが新しいなと思いました。

本日はコーディング作業でtableに苦しめられていました。
幅とか色とか、colgroupかtrで指定できないものは仕方なくtdやthに。もっといいやり方があるとは思うのですがまだまだ知識不足です。
まあそんなことより、tableはきちんとマークアップをすれば意図した通りに音声ブラウザに読んでもらうことができるので、しっかりと抜かりなくマークアップしたいと思います。
最近iPhoneのClock RadioでHouseばかり聞いています。コーディングスピードが1.2倍になった気がするのでお気に入りです。

IE7、8でリストに隙間ができる

ts — Sat, 18 Jul 2009 03:05:12 +0000

先日サイドナビゲーションの部分でつまずいたので、備忘録程度に書いておきます。
デザインとしては、各都道府県が書かれた画像をサイドバーに、縦にずらーっと並べる形なんですが、
IE7、8以外だとこんな感じでも問題ないです↓

■html

■CSS

ul {
list-style:none;
}

li {
margin-bottom:2px;
}

まあすごい簡単な感じにCSSも書いてありますが。サイトによってリセットCSSが入っている場合が多いので諸々の部分は省いております。

この際IE7で見ちゃうと大変なことに画像間の余白が予定より広くなることがありますので、
そのときの解決策はliに大してfont-size:1%;のようにするとなおります。

しかし、このままでは、IE8でリスト4個置きぐらいに3px程度余計に余白が付くことがありますので、さらにliとその中のaに追記します。

li {
line-height:0;
font-size:1%;
margin-bottom:2px;
}

li a {
line-height:normal;
}

これでオッケーです。
まだまだIE問題は大変そうです。

XHTMLのことは気にせずにHTMLに移行してもいい？

ts — Sat, 04 Jul 2009 10:39:25 +0000

先日「マイコミジャーナル」にて記事を見つけました↓

http://journal.mycom.co.jp/news/2009/07/03/041/index.html

やっとほとんどのサイトがXHTMLの1.0や1.1で制作されているのにここでかと残念に思っていたのですが、
HTMLに移行しても問題なさげな気がします。
5は互換性があるみたいなので現状HTMLで組まれているサイトに関しては作業工数はかからなそうですね、
逆にXHTMLの場合は地味に工数が掛かってしまいますが。まあそれだけのメリットがある場合はうちの会社でも変える必要がでてくるかなと。

Webアクセシビリティ＠秋葉原

ts — Sun, 24 May 2009 19:10:22 +0000

Webアクセシビリティ＠秋葉原に行ってきました。
Googleストリートビューのおかげで、ほとんど行ったことがない秋葉原ですが、迷わず会場にたどり着きました。

セミナーの内容ですが、結構濃かったです。見せ方も会場にいる人だけでなく同時に動画で生中継したり、要約筆記もされていましたので、すごく良心的なセミナーだなと思いました。
それでは以下、プログラム順に内容について。

■JIS X 8341-3改正のポイント
まずはJIS改正にあたっての背景などの説明がありました。
そこでポイント、問題となって挙げられたのが、

ポイント
・JIS X 8341-1を国際提案したISO 9241-20の方向性をできるだけ取り入れる．
・WCAG 2.0の4原則，ガイドライン，達成基準と一致．その他，WCAG 2.0のnormativeもできるだけ取り入れる．
・プロセスに関する要件をさらに吟味
・適合性評価ができるようにする．できれば，WCAG 2.0と改正版JIS適合を同一にする．
・わかりやすさ，運用しやすさの向上．（でも，厳密性は保ちたい．）
・2004年度版からの移行ガイドを示す

問題
・ WCAG 2.0とどこまで一致できるか？
→ WCAG 2.0は3レベル，JISは必須と推奨．
→ WCAG 2.0のGlossaryをすべて取り込めるか？
→ WCAG 2.0の規格としての欠点，文書の欠点，曖昧さをどう補うか
→ 適合性をWCAG 2.0と完全に一致？欧州の取り組みをどう取り込むか？
・ Accessibility Supported文書を誰が作成？どうやって作成？
・WCAG 2.0の関連文書（Understanding，Techniquesなど）をどうするか？
・「（例を示す）わかりやすさ」か「厳密性」か？
・日本で適用できる達成基準であるか？
・なじみが薄い用語（ヒューリスティック，ロバスト）

この中でも制作者として気になるのが、WCAG2.0と一致している点、一致していない点と、
どこまでやればOKとされるのかである。
利用上の注意として、

・ JISはウェブコンテンツのアクセシビリティ向上のための憲法のようなもの
・達成基準の意図や具体例は「Understanding WCAG 2.0」参照．
・各達成基準を満たす具体的な実装方法は「Techniques for WCAG 2.0」が参考になる．
・ JISだけに頼らず，ユーザ（高齢者・障害者）の視点を忘れない．
・同時に，JISからかい離しない．
・ StandardはBestである必要はない．Betterであればよい．
・大事なのは，全員が同じStandardを用いること．つまみ食いや改変は駄目．

まあ要するに、書いてあることに従うことで必ずしもユーザに受け入れられる訳ではなく、
そのサイトや、コンテンツを通して重視していくものを決めていくことでより良いモノになるのかなと思いました。

■改正版JIS X 8341-3（予定）に適合した実装方法
主に制作者よりの話だったので、聞きやすく改めてなるほどと感心することが多かった。
久しぶりに植木さんを見た！！

内容は簡単にまとめると、
・「AAAに絶対する」というのはやめた方がいい（WCAG2.0でも同じことを言っている）あったらいいねという感覚でとらえる。そもそもHTMLではないFlashでは同じことが言えるかそうでもなかったりで、なので、AAをめざしAAAで可能なものは作業をするという姿勢が良いらしいです。
・すべての機能をキーボードから利用できるようにする。
などなどありました。
日本で主流になっているPC-Talkerはページ内リンクに対応してないという事実があり、まだまだJAWSなどには追いついていない箇所もありますが、これからJISが新しくなることで開発される方ががんばってくれるのではないかと期待しています。

■オープンソース・スクリーンリーダNVDA日本語版
今回のセミナーで一番聞きたかったモノです。
辻さんが事情により欠席されていたので残念だったのですが、中村さんの説明はわかりやすく、声も非常に聞き取りやすくよかったなと思いました。

内容は、NVDAの紹介と、現状と課題、今後についてでした。
NVDAとは簡単に、オープンソースのスクリーンリーダーで、すでに20カ国語以上の言語に翻訳されているらしいです。（スゲェ！！！）ちなみに言語はPythonです。今年はJAVAや、PHPを少し学ぼうと考えていたのですが、悩ましげです。

・NVDAの現状
→スクリーンリーダーとしての基本機能（音声エンジンの選択や、速度音量の調整が可能）
→優れている点（見出しを巡って読み進めることができる、音声を読み上げる内容を表示してくれるので音声エンジンがない制作者が自分が作成したサイトがどのように読まれるかの確認が可能）
→改良点（漢字変換の問題で読みはできるが書きが苦手、音声合成エンジンが付いていない）

・NVDA日本語化プロジェクトの課題
→漢字変換時の変換候補の読み上げ
→カーソル移動時、必要に応じて詳細読みをさせる機能
→NVDA日本語版パッケージに同梱できる音声合成エンジン

・NVDAの今後
→さらなる追加機能の実装（WAI-ARIA、Internet Explorer）
→OS関連の読み上げの強化（ログオン画面の読み上げ）

まだまだ課題はあるものの、現状の段階まできているスピード感を考えるとすぐに解決されそうな予感がします。
どうしてもスクリーンリーダーを購入するとなると高価であまり手が出ないとですが、NVDAが広まると助かる人がたくさんいるのではないかと思います。自分はまだfirevoxでしか検証ができていないので、windowsにインストールしてみようと思います。
今後のカテゴリーは問わず、セミナーには参加していきたいと思います。その際にはアウトプットもしっかりと行います！