ホーム > アクセシビリティ

アクセシビリティを配慮したやさしいサイトづくりを丁寧に制作いたします。

Webに

「近づきやすいこと。物を得やすいこと。また、道具などの使いやすさ。」

アクセシビリティ」を辞書で引くとこのように出典されています。特にインターネットの世界ではWebページのアクセスしやすさを示す重要なキーワード(「ウェブアクセシビリティ」)のひとつになっており、障害者や高齢者を含めたすべての人が同じようにWebサイトの 情報にアクセスできるようすることを指します。インターネットは、今日では生活・経済活動に密接な役割を持つようになり、さまざまな人が、さまざまな環境で利用されています。特に障害者や高齢者は身体的な特徴があり、ハンデがあります。

高齢者の場合

ハンデ 対策の例
視力の低下 表示される文字の大きさを自由に設定できるようにする。
専門用語や流行の言葉が分からない
英語表記が苦手
コンテンツに専門用語の解説を追加する。また流行の言葉は使用しない。
メニュー項目などに英語表記をしない。

障害者の場合

ハンデ 対策の例
目がみえない Webページの情報を音声化できるようにする。
耳が聞こえない 音によるコンテンツと同様なテキストベースのコンテンツを用意する。
マウス操作が不自由 マウス以外の機器でも操作できるようにする。

2004年には、日本工業規格が「高齢者・障害者等配慮設計指針-情報通信における機器,ソフトウェア及びサービス-第3部:ウェブコンテンツ」を発表し、すでに政府、自治体、企業が取り組んでいます。
上記のJIS規格番号は「X8341-1」。番号の意味には、「やさしい」という意味がこめられています。

あなたのWebにも「やさしい」を取り入れてみませんか?

当社での取り組み

「やさしいホームページ確保をめざして」

当社では、「すべての人が同じようにWebサイトの情報にアクセスできるよう」を目標に掲げ、取り組んでいます。「ウェブアクセシビリティ」はケースによって、対策が違ってきます。
当社の基本的な対策を一部ご紹介いたします。

リンク先の明示

サイト内においてリンク先を表示する場合に、「詳細はこちら」、「⇒」と表記してあるページをしばしば見かけます。このような表記をすると、音声ブラウザで読み上げられると、リンク先が不明でサイト操作がしにくい恐れがあります。 リンク先をテキストにて確実に記述しないと、どこへリンクされるのかが情報として伝わらない可能性があります。また、SEO対策上も好ましくないとされています。よって、当社におきましてはリンクボタンにはリンク先を明確にしたテキストを記述することを心掛けています。

画像の代替テキスト

画像にはimgタグAlt属性を用いて代替となるテキスト情報を挿入します。これにより、音声ブラウザ等の非グラフティカルブラウザを使用していても、コンテンツの内容をユーザーに伝えることが可能となります。加えてSEO対策上も有効です。またグラフなどの画像には、「longdesc属性」を用いて、そのグラフの内容を文字化したページを用意します。

フレームの不使用

かつて一般的に広く使用されていたフレームを用いたページは制作いたしません。音声ブラウザでは、フレームを使用すると、それぞれのフレームがどのように関連しているのか理解しにくく、視覚障害者が利用する上での問題点として指摘されています。

適切なマークアップ

HTMLは、HyperTextMarkupLanguageの略で、マークアップ言語の一種です。タグと呼ばれるもので文章中の見出しや、表をマークアップ(印をつける)していきます。例えば、ページ内に表を挿入する場合、主に「テーブルヘッダ項目」タグ、「テーブルデータ」タグを使用して、表ヘッダーセルとデータセルをタグでマークアップし、表を構成いたします。このようにマークアップを適切に行えば、音声ブラウザ等では、聞きやすいページ'になります。なお、音声ブラウザでは、読み上げられる音声のスピード、高さなどで見出し箇所やリンク箇所を特定できます。

新しいウィンドウを開かない

新しいウィンドウを開く場合は、事前にその動作を予測できるようにします。パソコン使用歴が短いユーザは、新しいウィンドウを開くと、元のウィンドウを見失いがちです。また視覚障害者は、ウィンドウ自体の認識が難しく、混乱を招く原因の1つになります。

すべての操作をキーボードのみで行えるようにする

インターネットを利用しているさまざまな環境の中には、マウスを使用しないで、キーボード、あるいは特殊な入力装置を用いている場合もあります。一般にはインターネットを閲覧する場合は、主にマウスを用いると考えがちですが、キーボード操作のみでもサイト閲覧が可能なように構築します。

アクセシビリティ

  1. animostyle
  2. digitalarchive