WEB標準のライティング
WEB標準のライティング
ウェブアクセシビリティ入門 第73号
発行日 ：2006年5月8日
- ライターの
- 意識しだいで
- ハイ効率
- WEB標準で 二人三脚
皆さんこんにちは。ウェブアクセシビリティ・プランナーの望月優です。
まず、先週のクイズの答え。それは「隠しテキスト」でした。
今回は、選択肢を提示しませんでしたので、言葉が完全一致でなくても、内容的に同じことを意味していれば正解とさせて頂きます。
Google は、ＳＥＯ対策として行ってはいけないこととして、「隠しテキスト」を上げています。
その具体的手法はいずれであっても、 Google などの検索エンジンがこれを見つけるのは可能なのですから、手法に関わりなく、隠しテキストは用いない方が良いと私は思います。
さて、今回は、４月２９日のセミナーでお話したもう一つの大きなテーマである、ウェブページの効率のよい作り方についてお話します。
このメルマガでは、具体例を交えながら障害者や高齢者にも優しいウェブサイト作りのヒントをお届けしています。
[WEB標準のライティング]
４月２９日のセミナーの第２部、「ウェブ制作実践講座」で、次のページを作りました。
セミナー資料の点訳
http://www.amedia.co.jp/it/2006-4-29-1.html
このページは、下記の流れで作りました。
１．ワードのテンプレートを作成。
２．営業企画部長がそのテンプレートを用いて文書を作成。
３．できたワード文書を Dream Weaver に貼り付けて HTML 化(XHTMLならさらに良い）。
http://www.amedia.co.jp/it/2006-4-29.html
４．上記ページに CSS を適用して多少見栄えを調整。
http://www.amedia.co.jp/it/2006-4-29-1.html
今回は、方法のデモということで、頑張れば頑張るほど時間がかかりそうな4.のステップにはあまり時間をかけずに行いました。
この作業フローの中で特記すべき点は、２．の文書作成の段階です。
当社、アメディアの営業企画部長は、ウェブサイトに関連する技術や HTML のことは全く知りません。
しかし、テンプレートを作成して文書を書いてもらう際に、見出しを階層を意識して付けること、箇条書きはリストとしてはっきりと示していただくことのみをお願いしました。
このようにしてできあがったワード文書を Dream Weaver に適用してできたのが
http://www.amedia.co.jp/it/2006-4-29.html
です。ウェブ制作者の手数はあまりにも簡単でした。
ただ、リンクを貼る部分だけは少し作業をしたとのことです。
もしも、本当に事務的に内容を伝えるだけのページなら、このままでも良いと営業企画部長は言っておりました。
４．の後の、多少見栄えを調整したページはいかがでしょうか。
http://www.amedia.co.jp/it/2006-4-29-1.html
音声ブラウザで内容を聞いている私にとっては、３．の後のページと４．の後のページは全く同じです。
このようなページの作り方が「WEB標準」を意識した作り方です。
「このような」ではちょっと判りにくいので、以下に整理しますね。
制作の順序
文書内容が先にありきです。見栄えが先にきてはいけません。
まず文書の内容を作成します。
見栄えは、最後にいくらでもそのページの性質に応じて付加していけばよいのです。
特に音声ブラウザ利用者に対するアクセシビリティは、文書を HTML化したときに全て決まります。
その後で、いくら見栄えに力を入れても、アクセシビリティが落ちることはありません。
文書作成のときに配慮すること
文書を書いていただく人には、
- 見出しを階層を意識して明確につけること
- 箇条書きのところは、はっきりと箇条書きであることをテンプレートを利用して明記すること
- 文書の意味とは関係のない改行やスペースは入れないこと
ということだけをお願いします。
さて、上記で示した１番目と２番目は、見出しは h タグ、箇条書きは ul や ol タグに繁栄されます。
もちろん、文書の１行は、 p タグに繁栄されます。ですから、変なところで改行を入れてほしくないのです。それが３番目のお願い事項でした。
このようにしてできあがった HTML は、デザイン要素を全く含まない、文書構造のみを HTML で記述したすばらしくシンプルな HTML ファイルになります。
このようにして作られたシンプルな HTML こそ、 WEB標準準拠のページの基礎となるのです。
私は、前号で紹介させて頂いたＥブック「SEOの土台を築くウェブアクセシビリティ」
http://www.amedia.co.jp/store/e-book01.htm
の中で、
HTML = 構造設計
CSS = デザイン設計
という図式を紹介しています。
上記の手順で作成された HTML は、本来の HTML文法に則ったきわめて土台のしっかりとしたものになります。
この土台の上に、４．の作業でCSSでデザインを付加していけばよいのです。
この方法で制作すると、ウェブ制作者は、内容重視のページはどんどん上げていくことができます。
デザイン重視のページのみ、時間をじっくりとかけて整えていくことができるので、デザインもより優れたものになると思います。
[編集後記]
連休なのにこうしてメルマガをこつこつと書いている自分がちょっと寂しいです。
でも、阪神がジャイアンツに対して２回もさよなら勝ちをしたのはとても嬉しいです。
■ウェブアクセシビリティは、どんな方にも読み易いサイト作りの心配りです
ウェブアクセシビリティのコンサルティングや講演を承ります。
アメディア発行のメルマガ紹介
アメディア及び望月優は、本誌のほかに、以下のメルマガを発行しています。
週刊福祉情報（まぐまぐ殿堂）
毎週木曜日に、障害当事者の心のこもったコラムや１週間の福祉ニュースのソースを届けしています。
関連ブログ＆サイト
視覚障害者の情報文化を紹介する「アメディアレポート」
毎月第２と第４火曜日に、視覚障害者のライフスタイルや視覚障害者に便利な最新技術情報などを紹介しています。
アメディアの社員が輪番で編集を担当していますので、編集人の個性が出て、毎号雰囲気が違うのも一つの楽しみです。
望月優の経営指針雑記帳～２１世紀を創造する企業を目指して！
企業家としての望月優が、自身の経営指針を掘り下げる過程で感じ取った生きがいのある人生や自立、成長、平和などへの思いを語ります。
発行理念
本誌は、ウェブサイト作りに取り組む皆様とその構築に責任を持つ方々が皆障害者や高齢者の存在に配慮したサイト作りに励んで頂くことを願って発行しています。
ウェブアクセシビリティの分野はまだ注目され始めたばかり、その具体的なノウハウの定番はまだほとんどないと言っても過言ではありません。
インターネット技術は常に進歩、変化しつつあります。その点からみると、いくら追求しても「定番」の確立はありえないのかも知れません。
本誌では、全盲の望月優が現在までに紹介されているノウハウと自らの考察による新しいノウハウを、全身全霊を込めて説明・紹介して行きます。
ウェブアクセシビリティに関して秘密にするノウハウは一切ありません。全てのサイトがアクセシブルになって欲しいからです。
私の誤解や知識不足から、誤った説明や不適切な提案をしてしまうことがあるかも知れません。それに気がついたときには速やかに訂正致します。
ですから、読者の皆様からの指摘や提案が非常に大きな手助けとなります。
このメルマガを通して、ゆるやかな「ウェブアクセシビリティ大連合」が形成されていくことを念じて、発行を続けて参ります。
セミナー、講演の依頼は下記ページよりご遠慮なく
本誌では、
「JIS X 8341-3 高齢者・障害者等配慮設計指針－情報通信における機器，ソフトウェア及びサービス－ 第3 部：ウェブコンテンツ」
をしばしば引用させて頂いております。
必要な方は、下記サイトからお求めください。
WebStore
メルマガ「ウェブアクセシビリティ入門」配信登録
「ウェブアクセシビリティ入門」に登録
ウェブアクセシビリティ教材
- Ｅブック-SEOの土台を築くウェブアクセシビリティ
- 第１回ウェブアクセシビリティセミナー～音声ブラウザ対応エッセンス
- 第２回ウェブアクセシビリティセミナー～SEOの基盤を構築するアクセシビリティ
- 第３回ウェブアクセシビリティセミナー～バリアフリーサイト作りの基本と実践
ウェブアクセシビリティ関連リンク集
- ウェブアクセシビリティ入門サイト
- メルマガ「ウェブアクセシビリティ入門」
- 株式会社アメディア・ウェブアクセシビリティガイド
- web content accessibility guidelines (WCAG) 雑記帳
奥付
〒169-0051
電話番号 ：03-5286-7511
FAX番号 ：03-5286-2567
アメディアのウェブアクセシビリティ・ガイドライン （参考にしてくださいね）
