Entries
WebInspector 4.0
貴方のサイトは誰でも読めますか？WebInspectorは作成したウェブサイトが高齢者や障害のある方にとっても読みやすいかを判断するソフトウェアです。HTMLだけでなくCSSを使用したウェブサイトのアクセシビリティも診断します。WebInspectorはWindowsとMacOS Xで動作します。
JIS X 8341-3 高齢者・障害者配慮設計指針
WebInspectorはJIS X 8341-3 高齢者・障害者配慮設計指針に対応したチェックが可能です。
富士通ウェブアクセシビリティ指針 第2.0版
WebInspectorは、富士通ウェブ・アクセシビリティ指針 第2.0版にもとづいて診断します。第2.0版はJIS X8341-3との整合性を重視しつつ、第1.01版公開後に実施した調査、研究内容などを元に、「制作」工程に加え「企画」「サポート」などで考慮すべき事項をより詳しく、解りやすく解説しています。さらに一般的に守っていただきたいユーザビリティ的配慮も記述されています。
小難しい説明は止めて、実際にチェックしてみます。対象となるファイルは以下の2点。
- http://blog1.fc2.com/cfdn/index.php
- http://blog1.fc2.com/c/cfdn/template/cfdn_06/style.css
| 番号 | 項目 |
|---|---|
| 5.1a | アクセシブルではなく、W3Cで推奨していない<s>を使用していないか？ |
| 5.1a | アクセシブルではなく、W3Cで推奨していない<strike>を使用していないか？ |
| 5.1a | アクセシブルではなく、HTML4.01で規格外の<blink>を使用していないか？ |
| 5.1a | アクセシブルではなく、HTML4.01で規格外の<marquee>を使用していないか？ |
| 5.1a | アクセシブルではなく、HTML4.01で規格外の<bgsound>を使用していないか？ |
| 5.2c | <table>に<th>を指定しているか？（border属性が"0"の場合、レイアウトテーブルとみなし、チェックしません。） |
| 5.2c | <table>に<caption>を指定しているか？（border属性が"0"の場合、レイアウトテーブルとみなし、チェックしません。） |
| 5.2e | <head>に<title>を指定しているか？ |
| 5.2f | ページを5フレーム以上に分割してないか？ |
| 5.2f | <frameset>に<noframes>を指定しているか？ |
| 5.3a | <object>を使用していないか？ |
| 5.3a | <embed>を使用していないか？ |
| 5.3a | <applet>を使用していないか？ |
| 5.3a | ondblclick(JavaScript)を使用していないか？ |
| 5.3a | onchange(JavaScript)を使用していないか？ |
| 5.3a | onclick(JavaScript)を使用していないか？ |
| 5.3a | ondragdrop(JavaScript)を使用していないか？ |
| 5.3b | <input type=radio>にid属性を指定しているか？ |
| 5.3b | <input type=checkbox>にid属性を指定しているか？ |
| 5.3e | <a>のtarget属性に_blankを指定していないか？ |
| 5.3e | <a>のtarget属性に_newを指定していないか？ |
| 5.3e | <area>のtarget属性に_blankを指定していないか？ |
| 5.3e | <area>のtarget属性に_newを指定していないか？ |
| 5.4a | リンクのない<img>にalt属性(代替テキスト)を指定しているか？ |
| 5.4a | alt属性（代替テキスト）で画像の内容を表現しているか（"スペース"などを指定していないか）？ |
| 5.4b | リンクのある<img>にalt属性(代替テキスト)を指定しているか？ |
| 5.4b | imageタイプの<input>にalt属性(代替テキスト)を指定しているか？ |
| 5.4b | <area>にalt属性(代替テキスト)を指定しているか？ |
| 5.4b | <img>にismap属性を指定し、サーバサイドイメージマップを使用していないか？ |
| 5.4e | <embed>を利用している場合、<noembed>も指定しているか？ |
| 5.4e | <script>を利用している場合、<noscript>も指定しているか？ |
| 5.4e | <object>に代替情報を指定しているか？ |
| 5.5b | 取消し線（<del>）を使用していないか？ |
| 5.5b | 取消し線（<s>）を使用していないか？ |
| 5.5b | 取消し線（<strike>）を使用していないか？ |
| 5.6a | font-size:で文字のサイズを固定していないか？ |
| 5.6a | line-height:で行間を固定していないか？ |
| 5.6a | overflowにhiddenを指定していないか？ |
| 5.6b | line-height:で行間が110%以上か？ |
| 5.6c | 文字色と背景色のコントラストは十分か？ |
| 5.6c | 弱視者(白内障者)の基準で十分か？ |
| 5.6c | 色覚特性(第一色覚-赤)の違いを考慮した基準で十分か？ |
| 5.6c | 色覚特性(第ニ色覚-緑)の違いを考慮した基準で十分か？ |
| 5.6c | 色覚特性(第三色覚-青)の違いを考慮した基準で十分か？ |
| 5.7a | <bgsound>を使用して音を再生していないか？ |
| 5.7a | <embed>のautostart属性がtrueのとき、hidden属性がtrueになっていないか？ |
| 5.8a | <blink>を使って文字を点滅させていないか？ |
| 5.8a | <marquee>を使って文字を自動的にスクロールさせていないか？ |
| 5.9a | <html>にlang属性またはxml:langを指定しているか？ |
| 5.9a | <html>のlang属性またはxml:langにjaを指定しているか？ |
| 5.9e | 「yy/mm/dd」という文字列で、日付を表現していないか？ |
| 5.9e | 全角の￥と全角の＄を使用していないか？ |
| 5.9e | 全角の「ｙｙ／ｍｍ／ｄｄ」という文字列で、日付を表現していないか？ |
| 5.9e | 「※n」という文字列を、「注釈」の意味で使用していないか？ |
| 5.9e | 「nn千」「nn百万」のように数字の0を省略していないか？ |
| 4.2a | window.status (JavaScript)でステータスバーに情報を表示していないか？ |
| 4.3c | <frame>のscrolling属性にnoを指定していないか？ |
診断結果
このファイルはすべてのチェックをクリアしました。優秀なページです。
| 番号 | 項目 |
|---|---|
| 8 | <head>に<title>を指定しているか？ |
| 9 | <html>にlang属性またはxml:langを指定しているか？ |
| 9 | <html>のlang属性またはxml:langにjaを指定しているか？ |
| 10 | 文字色と背景色のコントラストは十分か？ |
| 10 | 弱視者(白内障者)の基準で十分か？ |
| 10 | 色覚特性(第一色覚-赤)の違いを考慮した基準で十分か？ |
| 10 | 色覚特性(第ニ色覚-緑)の違いを考慮した基準で十分か？ |
| 10 | 色覚特性(第三色覚-青)の違いを考慮した基準で十分か？ |
| 13 | <blink>を使って文字を点滅させていないか？ |
| 13 | <marquee>を使って文字を自動的にスクロールさせていないか？ |
| 14 | window.status (JavaScript)でステータスバーに情報を表示していないか？ |
| 24 | <embed>を利用している場合、<noembed>も指定しているか？ |
| 24 | <script>を利用している場合、<noscript>も指定しているか？ |
| 24 | <object>に代替情報を指定しているか？ |
| 28 | <table>に<th>を指定しているか？（border属性が"0"の場合、レイアウトテーブルとみなし、チェックしません。） |
| 28 | <table>に<caption>を指定しているか？（border属性が"0"の場合、レイアウトテーブルとみなし、チェックしません。） |
| 30 | ページを5フレーム以上に分割してないか？ |
| 30 | <frameset>に<noframes>を指定しているか？ |
| 32 | <frame>のscrolling属性にnoを指定していないか？ |
| 33 | <object>を使用していないか？ |
| 33 | <embed>を使用していないか？ |
| 33 | <applet>を使用していないか？ |
| 33 | ondblclick(JavaScript)を使用していないか？ |
| 33 | onchange(JavaScript)を使用していないか？ |
| 33 | onclick(JavaScript)を使用していないか？ |
| 33 | ondragdrop(JavaScript)を使用していないか？ |
| 34 | <a>のtarget属性に_blankを指定していないか？ |
| 34 | <a>のtarget属性に_newを指定していないか？ |
| 34 | <area>のtarget属性に_blankを指定していないか？ |
| 34 | <area>のtarget属性に_newを指定していないか？ |
| 47 | <input type=radio>にid属性を指定しているか？ |
| 47 | <input type=checkbox>にid属性を指定しているか？ |
| 54 | リンクのない<img>にalt属性(代替テキスト)を指定しているか？ |
| 54 | alt属性（代替テキスト）で画像の内容を表現しているか（"スペース"などを指定していないか）？ |
| 54 | リンクのある<img>にalt属性(代替テキスト)を指定しているか？ |
| 54 | imageタイプの<input>にalt属性(代替テキスト)を指定しているか？ |
| 55 | <area>にalt属性(代替テキスト)を指定しているか？ |
| 55 | <img>にismap属性を指定し、サーバサイドイメージマップを使用していないか？ |
| 59 | 取消し線（<s>）を使用していないか？ |
| 59 | 取消し線（<strike>）を使用していないか？ |
| 59 | 取消し線（<del>）を使用していないか？ |
| 60 | font-size:で文字のサイズを固定していないか？ |
| 60 | line-height:で行間を固定していないか？ |
| 60 | line-height:で行間が110%以上か？ |
| 60 | overflowにhiddenを指定していないか？ |
| 61 | 「yy/mm/dd」という文字列で、日付を表現していないか？ |
| 61 | 全角の￥と全角の＄を使用していないか？ |
| 61 | 全角の「ｙｙ／ｍｍ／ｄｄ」という文字列で、日付を表現していないか？ |
| 61 | 「※n」という文字列を、「注釈」の意味で使用していないか？ |
| 61 | 「nn千」「nn百万」のように数字の0を省略していないか？ |
| 69 | <bgsound>を使用していないか？ |
| 69 | <embed>のautostart属性がtrueのとき、hidden属性がtrueになっていないか？ |
診断結果
このファイルはすべてのチェックをクリアしました。優秀なページです。
テンプレ制作は勿論、ウェブ制作を行う方は誰にでも閲覧しやすいアクセシブルで優しいデザインを心がけてみて下さい。
0件のコメント
コメントの投稿
0件のトラックバック
- トラックバックURL
- http://cfdn.blog1.fc2.com/tb.php/51-561174ef
- この記事に対してトラックバックを送信する（FC2ブログユーザー）
あのロリポップが運営する次世代レンタルサーバー「チカッパ！」
ブログ・CGI・PHP・MYSQLが使えて容量500MB〜1GBまで選択出来ます！
