ウェブアクセシビリティへの取り組み

【アクセシビリティとは】
アクセシビリティとは、「アクセスのしやすさ」を意味します。高齢者や障がい者はもちろん一時的な障がいのある人など全ての人が、ホームページで提供されている情報に問題なくアクセスでき、だれでも平等に利用できるように制作することです。
日本ではJIS X8341-3:2004 が標準です。
平成16 年6 月20 日制定されたこの規格は、主に高齢者、障がいのある人及び一時的な障がいのある人（以下、高齢者・障がい者といいます。）が、ウェブコンテンツを利用するときの情報アクセシビリティを確保し、向上させるために、ウェブコンテンツの企画、設計、開発、制作、保守及び運用をするときに配慮すべき事項について規定されています。公共性が求められる行政機関や自治体では、遵守することが重要であるといえます。
芦屋市では、コンテンツ管理システム を導入し、各課職員の更新性、利便性を図るとともに、閲覧者の見やすい、使いやすいホームページを目指し、アクセシビリティの準拠に注力していきます。

【障がいとは】
全盲： 画面を見ることができない。マウスを操作できない。
弱視： 画面を拡大しないと見えにくい。
色覚特性： 識別できない色がある。
聴覚障がい： 音声が聞こえない。聞きづらい。
運動障がい： 手や指先が動かない。動かしづらい。
【加齢に伴う変化】
• 加齢に伴い、視覚・聴覚が変化する。
• 思いどおりに体を動かせなくなる。
• 全体的な傾向としては、IT 関係の専門用語や新語は苦手である。

【障がい者のInternet 利用率】
インターネットを利用する障がい者の約9 割が、利用後の生活の変化について「よい方向に変わった」又は「どちらかと言えばよい方向に変わった」と回答しています。
出典： 総務省情報通信政策研究所
「障がいのある方々のインターネット等の利用に関する調査報告書
―国民全般の情報環境との比較を通じて―」

【XHTML の特徴】
HTML はインターネットを利用して、情報を伝えるための記述言語で、文書構造とレイアウトについてひとつのファイルで記述するので、アクセシビリティ対応や他メディアでの再利用に制限があります。
一方、最新規格XHTML は文書構造とレイアウトを別ファイルとして作成し、アクセシビリティ対応や他メディアでの再利用に有効です。
【XML】
文書やデータの意味や構造を記述するためのマークアップ言語です。この言語を基盤とする技術はXHTML だけでなく、数式の記述に使用されるMathML や書籍データの記述に使用されるJepaX といった言語もXML を基盤とする技術です。
【CSS】
スタイルシートと呼ばれ、ページ（ウェブページ）のレイアウトを定義する規格です。具体的には、フォントや文字の大きさ、文字飾り、行間などの見栄えに関する情報を定義することができます。

【CSS 適用状態】 【CSS を適用しない状態】
デザイン部分をCSS で制御せず、タグで制御する場合、利用者の環境によっては正しく文書の意味が伝わらなくなる場合があります。
デザイン部分をCSS で制御し、タグを正しく使用することで、様々な環境の利用者に対して正しく文書の意味が伝わるため、アクセシビリティの向上につながります。
タグとはWeb ページなどの記述に使われる「<」と「>」で囲まれた標識のことです。
文書構造や書式、文字飾りなどを指示したり、画像や他の文書へのリンクを埋め込むために使われます。

【XHTML とCSS（スタイル）の利点】
(X)HTML 文書構造とCSS 表現を分ける事により指定した全てのページデザインの統一が容易になり、更新・編集作業も効率化され保守性も向上します。
公共機関や自治体、これらに関連する民間企業などのサイトではW3C が策定した仕様やWAI が規格した情報バリアフリーに準拠してXHTML/CSS デザインの制作が増えています。現にアメリカではリハビリテーション法により「連邦政府や関連する組織では、購入する全ての情報通信機器はアクセシビリティに対応したものにしなければならない」とされていることから構造と表現を分離する考え方はスタンダードになっています。これも踏まえ、アクセシビリティ対応もSEO 対策も容易に行なうことができます。
表現指定を省いた分ページの軽量化が可能で、表示にかかる時間を短縮できます。故に転送量の削減にもつながります。
ユーザースタイルシートや読み上げ方法を設定できる視覚ブラウザとの親和性が向上します。
印刷用のCSS ファイルを用意すれば、不要な部分を取り除いたりフォントサイズの調整など適切な印刷を行なうことができます。

各ページに適切なタイトルを入れる
音声ブラウザで読み上げる場合、最初に読み上げるのがページのタイトルです。このタイトルの名前の付け方があいまいだと、何のページなのかが理解しづらく、自分に必要なページなのかそうでないのかも判断できません。
ページのタイトルには、利用者がページの内容を識別できる名称を付けます。
タイトル=見出し1 が基本ルールです。

ページには必ず見出しを設定する
見出しとは本や新聞の題名のようなものです。
ページに見出しが設定されていないと、本文を読むまでページの内容を把握することができません。特に、音声ブラウザの利用者は見出しのみを最初に読み、ページ全体の内容を把握します。
さらに、音声ブラウザの利用者には、画像化したり色やフォントのサイズで見た目の変化をつける手段では、「見出し」であるということは認識できません。
見出しではどんな内容なのか、伝えたいことをわかりやすく提示することが必要です。

パンくずリストを各ページにつける
多くの情報が提供されているホームページでは、ページを閲覧するうちに、自分がどこにいるのか、どうすれば前のページに戻れるのかがわからなくなる可能性があります。また、検索などで階層の深いページに直接訪問した場合にも、関連情報や他ページへの移動が容易になるため、すべてのページに適切なパンくずリストをつけましょう。
パンくずリストとは、現在閲覧しているページのサイト内での位置（階層構造）と、各階層へのリンクを簡潔に示したものです。

テーブル（表組み）要素を使ったデザインをしない
読み上げの順序と情報の方向が一致しないため、音声ブラウザの利用者にとって内容を把握しづらくなっています。

読み上げ順を考慮する
音声ブラウザは左→右、上→下の順番で読み上げます。読み上げた際に内容が理解できるように注意します。
音声ブラウザは、最初にキャプションを読み上げ、表内を順に左から右、上から下に読み上げます。
複雑な構成の表はできるだけ作成しない
セルの結合を多用すると、音声ブラウザで意図したとおりに読み上げられないことがあります。セルの結合をする場合には、読み上げ順を考慮しましょう。

行や列の見出しを指定する
行や列の見出し項目には見出しの指定をします。表に適切な見出しを指定していない場合、音声ブラウザは、各行・各列の見出し項目を読み上げず、表
の内容を正しく把握できない場合があります。

分かりやすい表題をつける
caption 要素を使用し、分かりやすい表題を付けて表であることを明示します。

適切な代替テキストをつける
画像等の非テキスト情報には、代替テキスト（alt 属性）を設定します。音声ブラウザなど画像を表示することができないブラウザは、代替テキスト（alt 属性）を参照します。
そのため、代替テキスト（alt 属性）には、わかりやすい適切な内容を記述する必要があります。

適切な代替テキストをつける
画像に何も代替テキスト（alt 属性）をつけていない場合、画像を表示できない環境ではどのような画像なのかわかりません。
画像に代替テキスト（alt 属性）をつけている場合、画像を表示できない環境ではその情報を参照します。
利用者はその情報をもとに、どのような画像かを判断します。

日付や曜日は 年月日・○曜日 と正しく表記する
日付を記号を用いたり、曜日を省略した形で表記すると音声読み上げソフトは正確に情報を伝えることができません。

時間は時分で表記する
時間を表記するときに記号を用いると、音声読み上げソフトは正確に情報を伝えることができません。正しく、時、分の表記をしましょう。

単語の途中にスペースを入れない
単語の途中にスペースが入ると、音声読み上げソフトはひとつの単語として認識できないため、的確な読み上げができません。
レイアウト目的のスペースも望ましくありません。音声ブラウザによっては、一文字として認識してしまうことがあります。

単語の途中に改行を入れない
単語の途中に改行を入れて縦書きに見せるようにしていると、音声読み上げソフトはひとつの単語として認識できないため、的確な読み上げができません。

読みの難しい言葉はできるだけ使用しない
ページの中で人名や地名などの固有名詞や難しい専門用語を用いる場合、それを読むことができない利用者がいる可能性があります。
また、音声ブラウザでも正しい読み上げが行われない可能性がありますので、フリガナをつけることや、漢字表記をやめることなどの検討をしましょう。
専門用語、行政用語であるため、理解できない利用者がいる可能性があります。括弧書きで説明を併記しましょう。

フォント種類やサイズを固定にしない
高齢者や弱視者が利用する場合、文字が小さくて読みづらく感じることがあります。ウェブブラウザには、このような場合に文字の大きさを変更して閲覧できる機能があります。フォントサイズを固定するとその機能を利用できなくなるので、フォントサイズを固定しないでください。
コンテンツ管理システム で生成されたホームページでは、フォントサイズはCSS で制御しているため、<font>タグを使用してもサイズは変更されません。

機種依存文字や半角カタカナを使用しない
特定機種にのみ存在する文字を機種依存文字といいます。
機種依存文字や半角カナは機種依存文字にあたります。機種依存文字を使用すると、OSの違い（Windows やMacintosh）により文字化けが起きたり、違う文字として表示されたりするため、使用しないようにしてください。

英単語は半角小文字で表記する
英単語が全て大文字により表記されている場合、音声ブラウザでは、アルファベットが一文字ずつ読み上げられることがありますので、原則として小文字で表記してください。ただし、「NPO」「PHS」などのように略語等で大文字表記が通例となっている場合や製品名などの固有名詞はこの限りではありません。

数値は半角数字を使用する
数値を全角数字で表記すると、音声読み上げソフトによっては1 文字ずつ数字を読んでしまうものもあります。
正確に情報を伝えるために数字は半角で表記するようにしてください。

背景色と文字色には、識別し易い色の組合せを使う
ホームページで色を使う場合、色の組み合わせに注意します。色の組み合わせによっては弱視・高齢の利用者など、文字が読みにくい、または全く読めないといった問題が起きる可能性があります。背景色と前景色、背景色と文字色のコントラスト（明度差）に配慮が必要です。

文字や画像などの色の違いに頼った表現はしない
色で情報を区別しても、伝わらない利用者がいることに配慮してください。見た目だけのための色の指定も避けるようにしましょう。

半角英数字、ハイフン（-）のみ使用し、わかりやすくする
ファイル名やフォルダ名を漢字やひらがな、全角英数字にするとインターネット上で表示されない場合があります。
また、ファイル名やフォルダ名が長すぎるとアドレスが長くなり、直接入力する場合の負担が大きくなってしまいますので、階層を浅く、わかりやすいファイル名をつけるようにしましょう。尚、ローマ字はヘボン式を用いることとします。

リンク先の内容がわかるようにする
「こちら」や「詳細」のみにリンクを設定すると、リンク先の内容が想像できず、音声読み上げソフトの利用者はどこへリンクされているのか判断することができません。
添付ファイルも同様で、何のファイルで、どのくらいのサイズであるかを表記する必要があります。
必ず、リンク先の内容を表す言葉に対してリンクを設定するようにしましょう。

内部のリンク先を新しいウィンドウで開かない
リンク先を新しいウィンドウで開いてしまうと、音声読み上げソフトの利用者は下のページに戻れないことがあります。
また、利用者が意図していない状態で新しいウィンドウが開かれると、開いたことに気がつかなかったり、戸惑うことがあるので、新しいウィンドウで開く必要がある際には、リンクする文言中に（別ウィンドウが開きます）などの注意を促す文言を入れます。

ページの先頭へ戻る