【Web素材】素材サイトのバリアフリー

視覚に障害を持つ方がＷｅｂサイトを利用する場合をはじめ、パソコンを使う際に活躍するのが、「スクリーンリーダー」と呼ばれる画面の文字を読み上げるソフトです。とはいえ、ページに貼り付けてある絵に何が描かれているのか？ということまでは知ることができません。

もっとも、「何の画像なのか」ということだけであれば、後でご説明いたします「ＡＬＴタグ」などの方法で対応できます。

しかし、実はもうひとつ問題があるのです。通常、画像素材サイトで素材をダウンロードする場合、画像にマウスカーソルを合わせて、Ｗｉｎｄｏｗｓであれば右クリックで「名前をつけて画像を保存」…といった手順になる事が多いかと思います。視覚障害がある方の場合、パソコンの操作はキーボードによるショートカットを利用することになるので、この操作が難しいのです。

ですが、これもページにちょっとした細工をすることで、キーボード操作だけでも画像がダウンロードしやすくなるのです。

Webサイトにある画像の上にマウスカーソルを置くと、テキストによる案内文が表示（ポップアップ）されることがあります。これを実現しているのが、IMGタグで画像ファイルを指定する際、一緒に設定するALTタグです。

試しに、画像▼の上にマウスカーソルを置いてみてください。「人形で遊んでいる女の子」というテキストが表示されたでしょうか。

これは、次のサンプルソースのようにALTタグで文字列を指定することで実現されています。

ALT="人形で遊んでいる女の子"

スクリーンリーダは、このALTで指定されているテキストを読み上げます。しかし、もうちょっと長い解説をＡＬＴタグで説明しようとすると、場合によってはテキストがページを覆ってしまい、今度は晴眼者にとって大変に見にくいサイトになってしまいます。

そこで、ALTタグとは別に、詳細な解説文を書いた小さいページが開く「解説ボタン」を用意してみましょう。解説文は、色や形、デザインなど、具体的に画像がイメージができるような内容がいいですね。▼のサンプルページを開いて、「解説」ボタンを押してみてください。

ガイドウインドウのサンプルページ

まず、以下の部分を、素材を置くページの～タグの中に書いてください。

（執筆者：浅野 今日子） 前へ 1 2 はてなブックマーク Yahoo!ブックマーク livedoor クリップ newsing アメーバブログ はてなダイアリー Yahoo!ブログ livedoor Blog あわせて読みたい 視覚障害者に優しいWebサイトを創ろう パワーポイントで使える画像素材 松兼功さんに聞くバリアフリーのコツ　トイレリフォームは自分仕様で 終電、混雑度……通勤がラクな沿線は？ 小学生だっておそばが打てる！　水回し編　9歳の手打ちそば 1/6 この記事の担当ガイド 浅野 今日子 FA機器メーカーでシステムエンジニアとして従事した後、現在はパソコン教室にインストラクタとして勤務。… 続きを読む 関連キーワード[PR] 写真素材 イラスト 素材 web素材　無料 画像 素材 動画 素材 イラストレーター 講習 マネしたくなるアイデア住宅 住まいには、人の個性がよく現れるもの。同じ空間をどのように使うかで、雰囲気も、快適さも大きく変わってくる。ここでは、「建築家と家を建てる」ガイド の川畑博哉氏が厳選した10軒を紹介し、建築家それぞれのこだわりのポイントを紹介しよう。建築のプロたちが考え出した、マネしたくなるアイデアが満載！ さぁ、いますぐチェック！ For M タブレット版アプリvol.18配信中！ 絶対着たい涼感ジャケット20選 楽しく痩せるスポーツアイテム メンズファッションニュース 人気Web素材ランキング Powered by 価格.com デジタル関連コミュニティ 愛用の北欧モノ 北欧好きが、愛用の北欧モノを見せ合うコミュニティ 関連キーワード[PR] 写真素材 イラスト 素材 web素材　無料 画像 素材 動画 素材 イラストレーター 講習 Web素材 イラスト素材 写真素材 フォント・音などの素材 ルール・マナー・検索サイト Web素材リンク集 関連キーワード[PR] 1写真素材 2イラスト 素材 3web素材　無料 4画像 素材 5動画 素材 6イラストレーター 講習 メルマガ登録 【デジタルメルマガ】オトナのオトコなら知っておきたい、PCやデジモノに関する情報をお届けします。 おすすめ厳選サイト 音素材を探す 写真素材を探す フォントを探す ブログ用素材・ブログパーツ 素材を購入する 似顔絵を描いてもらおう オンラインでカンタン素材作り 季節特集 紫外線対策 スマートハウス 結婚式お呼ばれ　 結婚式準備　 夏までにダイエット もっと、もっとトルコ 特集一覧へ ショッピングカタログ All About ウェブマガジン 女性向け 雨が楽しくなる！レイングッズ15 最新特集へ 男性向け マネしたくなるアイデア住宅 最新特集へ All Aboutスタイルストア ファッション インテリア雑貨 収納・掃除用品 厳選アウトレット ものづくり市場 ものづくりの裏側 COCOMO ココロのこもった贈り物。 誕生日プレゼント 出産祝い 結婚祝い 内祝い 引き出物 入学祝い 専門家を探せる、相談できる。 パソコン教室のQ&A パソコン教室のコラム パソコン教室のレッスン パソコン講師を探す All About モバイル All Aboutがケータイで読める！ オススメ記事をメールでチェック 詳細はこちら All About › デジタル › インターネット・パソコン活用 › Web素材 › Web素材関連情報 › 素材サイトのバリアフリー このページの上へ 会社概要 投資家情報 ガイドへの仕事・取材依頼 広告掲載 ガイド募集 プライバシーポリシー 著作権/商標/免責事項 当サイトの情報についての注意 ヘルプ Copyright(c) All About, Inc. All rights reserved. 掲載の記事・写真・イラストなど、すべてのコンテンツの無断複写・転載・公衆送信等を禁じます