自社で日報・顧客管理などのデータベースを簡単設計できる「使えるくらうど」シリーズ― アサクラソフト株式会社

制作ブログ

アクセシビリティ!

web制作部ムネヤスです。
今回は「ウェブアクセシビリティ」について。

アクセシビリティについては、有識者が沢山おられて私などが解説すべきものではないのですが、「使えるホームページ」を利用され、閲覧者のことを考慮した正しいウェブサイトのコンテンツの充実を考えておられるユーザーさまに、「ウェブアクセシビリティ」について軽くさわりを知っていただければと思います。

アクセシビリティ?

まず「アクセシビリティ」について、そのまま直訳で「アクセス可能」という意味ですが、これは「ある場所」へアクセスできるか、ということだけでなく対象は物や情報に対しての意味だったりします。

Webであれば、情報を知りたい閲覧者が、その知りたい情報にたどり着けること自体が「アクセスできる」という状態となります。

 

まず、「Web」の本質が「アクセシブル」であること

World Wide Web(WWW)の創始者でW3C(WWWで利用される技術の標準化をすすめる国際的な非営利団体)のディレクター、ティム・バーナーズ=リー氏の言葉です

The power of the Web is in its universality. Access by everyone regardless of disability is an essential aspect.
翻訳:Webの力はその普遍性です。障害の有無に関係なく、誰もがアクセスできることがWebの本質です。

アクセスする対象は1つでも、それにアクセスしようとしている人はそれぞれに環境が異なります。
上記の言葉で「障害」とありますが、それは単に「視覚障害」「聴覚障害」などの障害だけのことではなく、加齢による衰え、指先が動かせない障害や怪我などの一時的に指が動かせないなどで「マウスが使えない」場合、「メガネを忘れた」「周りが騒がしい」など、普段と違う環境や条件で利用しなければならない場合も含まれるかと思います。

そういった様々な条件からでもアクセスできる、しやすいウェブサイトのコンテンツ作りを今後しっかりと考えていく必要があります。
障害だけでなく、ウェブサイトにアクセスする端末自体、PCやスマートフォンに限らず、テレビやゲーム機、時計やメガネといったウェアラブル端末からのアクセスも増えてくるはずです。

そういった様々な「アクセス」を考慮したコンテンツ作成を「使えるホームページ」で少しずつ、できるところから始めてはいかがでしょうか。
 


Webアクセシビリティを考慮したコンテンツづくり

ディレクター、制作者がすべきこと

誰のための、どういった内容の、何のための、どういったデザインのウェブサイトを作るか、をお客様と考え纏めるディレクターと、それを形にする制作スタッフがすべきこと、アクセシビリティを考慮したウェブサイトを制作しやすいCMSにしていくために機能向上の作業をする開発スタッフがすべきこと。
ウェブアクセシビリティは本当に奥が深く、毎日勉強すべきことばかりです。
少しずつでも身につけ、使えるホームページユーザーさまと、それ以上にそのウェブサイトの閲覧者のことを考慮したウェブサイト作成のお手伝いができるよう、日々努力するばかりです。

 

使えるホームページを使ってできるウェブアクセシビリティの一歩

[画像の"alt"]

ウェブサイトに画像を設置する際にimg要素を使ってhtml内に画像を設置します。その際、そのimgタグに[alt属性]によって代替テキストを用意することができます。
※正しくは、用意できる、というより必ず用意しなければならないもの、といった扱いとなります

この代替テキストは、テキストブラウザで画像の代わりに表示させたり、全盲、ロービジョンの方が使う、テキストを読み上げしてくれる音声ブラウザで画像の代わりに読み上げるテキストとなります。

例えば求人情報のバナーなど
<img src="recruit.gif" alt="求人情報はこちら" />
こういった記述の仕方をします。ただ、これをhtmlモードに切り替えてimgタグを探し、記述を追加していくのは大変です。

使えるホームページでは、画像を設置する際の「代替テキスト」の欄がこれにあたります。

使えるホームページで代替テキストを入れる方法

これでその画像が、目の不自由な方にも何の画像が表示されているのか伝わるようになりました。
ただし、使い方には注意が必要です。

例1

「詳細はこちら」の画像のイメージ

例えば上記のページの「詳細はこちら」ボタンが画像だった場合、代替テキストは「詳細はこちら」で良いでしょうか?
正確に、その画像が何を表しているかの代替テキストを入れるのであれば「ウェブディレクターの求人についての詳細はこちら」等入れると、その画像が何のボタン、何のリンク先へ飛ばそうとしているのかがはっきりわかります。
 

例2

「意味のない画像へのaitの処理について」のイメージ

例2、左のイメージ画像に入れる代替テキストに「PCを操作する女性の写真」と代替テキストを入れるのは正解でしょうか?
今回の場合は、デザイナーイメージ画像」で良いでしょう。そこに「PCを操作する女性の写真」があることを説明する必要はないでしょう。



​長くなってきたのでこのあたりで。
随時「使えるホームページでできるアクセシビリティ」について書いていきます。
次回はAタグ(リンク時の注意)、heddingタグ(タイトルの設置)、Mapの設置と説明などについての予定です。