少し前に紹介してもらった「Aki」さんのサイトAWCSは基本的な内容がすっきりまとめられていて、ページを作っていて思い通りにならないときに開きたくなるサイトですが、なかでも「Columns」のコーナーをとても興味深く読みました。
そこには、「正しいHTMLの書き方」や「ユニバーサルデザイン(不特定多数の訪問者にボーダレスなサイトデザイン)」「アクセシビリティ(誰もが使えるバリアフリーであるサイト)」について書かれています。
これら「サイトを作るときは障害者や高齢者でも使い易いサイトにしましょう」の言葉については、以前から気になってたので一気に読ませてもらいました。
その中で私たち初心者のための記述に「HTML文法チェッカー」が紹介されていて、「Another HTML-lint gatewayでチェックして指摘されたエラー箇所を修正していく消去法でいいです」よ、とありましたので、
まずは「自分のサイトのHTMLチェック!」をしました。
自分のしたことに点数がつくなんて運転免許試験以来のことなので、ワクワクしながらやってみると「-173点」とか点数が付くんです。 そして「エッ、何が悪いの?」が続くというわけです。 面白いでしょ?![](https://blogimg.goo.ne.jp/img_emoji/face_ase2.gif)
はまってしまって次々と自分のページをチェックしました。
「うーん、なるほど」と、やっとマイナスが無くなったところで「ふつうです」と冷たくあしらわれてしまい(小学校の頃、サクラのマークの中に「よくできました」って書いてあった、あの印の中に書いてあるんです。)、
え~?マイナスがなくなったら良いわけじゃないんだ~と必死になってしまいました。
ま、何度かするうちに「よくできました」というようにはなりますが、やってみて、100点まではいかなくても、「よくできました」になる80点以上くらいでいいのでは、、?が正直な気持でした。 が問題は、それで先の「バリアフリー」なサイトになってるかどうかということですよね。
点数(バリアフリー)だけを問題にするのであれば、たぶん、デザインなどに凝らずに文字を羅列していけば、エラーもなくバリアのフリー度は高くなり、HTMLチェックでも高得点が出るにちがいないけど、それでは「見た目」と「作り手の満足度」がちょっと落ちてしまう気がします。
それで、80点以上で手を打てばいいか、と一度は思ったんです。 が、「スタイルシート」を本格的に使えば両者を満足させられるに違いないと思い返しました。 只今勉強中。 ごちゃごちゃと打ち込んでガチガチに作ってるものを、スタイルシート(CSS)ですっきりさせるのはなかなか大変。 まだまだ時間がかかりそうですが、メニュー部分を作り変えて調整中の私のサイト「余暇たいむ」です。
ここで、今までタグでページを作っていたにもかかわらず、今回のHTMLチェックをするまで、私が知らなかったこと、知ってるつもりで分かっていなかったことを挙げてみます。
![](https://blogimg.goo.ne.jp/img_emoji/face_hekomu.gif)
依存し過ぎはまずい気がするのですが「HTMLチェック」の上記サイト、思わず「作者にビールをおごり」たくなりました。
エラーを教えてもらえる、とは言ってもエラーなりに「いい頃合い」ということもあることを念頭に、これからもよきアドバイザーとして利用させてもらうことになりそうです。
そこには、「正しいHTMLの書き方」や「ユニバーサルデザイン(不特定多数の訪問者にボーダレスなサイトデザイン)」「アクセシビリティ(誰もが使えるバリアフリーであるサイト)」について書かれています。
これら「サイトを作るときは障害者や高齢者でも使い易いサイトにしましょう」の言葉については、以前から気になってたので一気に読ませてもらいました。
その中で私たち初心者のための記述に「HTML文法チェッカー」が紹介されていて、「Another HTML-lint gatewayでチェックして指摘されたエラー箇所を修正していく消去法でいいです」よ、とありましたので、
まずは「自分のサイトのHTMLチェック!」をしました。
自分のしたことに点数がつくなんて運転免許試験以来のことなので、ワクワクしながらやってみると「-173点」とか点数が付くんです。 そして「エッ、何が悪いの?」が続くというわけです。 面白いでしょ?
![](https://blogimg.goo.ne.jp/img_emoji/face_ase2.gif)
はまってしまって次々と自分のページをチェックしました。
「うーん、なるほど」と、やっとマイナスが無くなったところで「ふつうです」と冷たくあしらわれてしまい(小学校の頃、サクラのマークの中に「よくできました」って書いてあった、あの印の中に書いてあるんです。)、
え~?マイナスがなくなったら良いわけじゃないんだ~と必死になってしまいました。
ま、何度かするうちに「よくできました」というようにはなりますが、やってみて、100点まではいかなくても、「よくできました」になる80点以上くらいでいいのでは、、?が正直な気持でした。 が問題は、それで先の「バリアフリー」なサイトになってるかどうかということですよね。
点数(バリアフリー)だけを問題にするのであれば、たぶん、デザインなどに凝らずに文字を羅列していけば、エラーもなくバリアのフリー度は高くなり、HTMLチェックでも高得点が出るにちがいないけど、それでは「見た目」と「作り手の満足度」がちょっと落ちてしまう気がします。
それで、80点以上で手を打てばいいか、と一度は思ったんです。 が、「スタイルシート」を本格的に使えば両者を満足させられるに違いないと思い返しました。 只今勉強中。 ごちゃごちゃと打ち込んでガチガチに作ってるものを、スタイルシート(CSS)ですっきりさせるのはなかなか大変。 まだまだ時間がかかりそうですが、メニュー部分を作り変えて調整中の私のサイト「余暇たいむ」です。
![](https://blogimg.goo.ne.jp/img_emoji/pen.gif)
- 点数を下げていた一番の原因が、恥ずかしいことにタグの閉じ忘れ。 これは完全にジョウシキであるにもかかわらず、見返すこともなく、自分のパソコンでちゃんと表示されてるというだけで何の疑いも持たずにいたのです。 </font>がないばかりに、次の<td>と重なり合うという違反を犯すということの繰り返しです。 こんなことでバリアを作っていたんだと、大げさのようですが血の気が引きました。 そしてあらためて、「誰にもやさしいページ」を目指そうと強く思いました。
- <p>にも</p>が必要。(段落のマークで単に<br>より広く開くとしか認識がなかった。)
- <center>にも</center>が必要。(もちろんジョウシキです、ハイ。しかもこれは余り推奨されていない。)
- <table>には「summary」が必要。(このタグは初めて知りました。音声で読むときに必要なんだそうです。)
- <li>や<ul>を、<font>~</font>や<small>~</small>内には書けない。
- <ul>や<b>や<font>を、<dt>~</dt>や<dl>~</dl>内には書けない。
- 画像の<alt>に、ちゃんと説明を入れる。(そうしないと音声でパソコンを見る人に説明されないので分からない。)
- 背景の色と、文字の色の「色差」「明度差」が十分でなければならない。(これは「十分」の数値がよくわからない、、、)
![](https://blogimg.goo.ne.jp/img_emoji/face_hekomu.gif)
- <br>が多数連続しています。(二つ以上でこのエラーが出る。「CSS」を使えば何とかなりそうだけど)
- <a>の「target」はあまり薦められない属性です。(と言われても別ウインドウにしたいものはある。と思うのはやはり私のわがままでしょうかね(-_-;)
依存し過ぎはまずい気がするのですが「HTMLチェック」の上記サイト、思わず「作者にビールをおごり」たくなりました。
エラーを教えてもらえる、とは言ってもエラーなりに「いい頃合い」ということもあることを念頭に、これからもよきアドバイザーとして利用させてもらうことになりそうです。
※コメント投稿者のブログIDはブログ作成者のみに通知されます