2019年12月12日TwitterFacebookGoogle+LinkedInPocketWebアクセシビリティ(Webのバリアフリー)対策にとても重要な「画像の代替えテキスト」の設定方法を、記事作成時の設定方法や既存の記事の改修方法についてできるだけ詳しく解説しました。「代替えテキスト」の入力がされていなかったり、意味のない「図1」などの入力だと視覚障害者向けの音声読み上げソフトなどで画像の情報を読み取れないだけでなく、SEO的にも不利益となります。ブログ記事作成時に実施すればさほどの手間なく設定できますが、後から改修しようとすると膨大な時間と労力が必要です。この記事では、まず記事作成時の代替えテキストの入力方法と入力で気をつけること。既存の記事の入力確認方法や対策についてなるべく具体的に紹介しています。利用者に提示されるすべての非テキストコンテンツには、同等の目的を果たすテキストによる代替が提供されている。ひとこと画像の代替えテキスト画像の代替えテキストとは、何らかの要因(リンク切れやネット速度不足など)で画像が表示されないときに、代わりに表示されるテキスト(文字)のことです。画像を挿入する時に設定できます(します)。この代替えテキストはスクリーンリーダーなどの読み上げソフトで読み上げられ、視覚障害者など画面を直接見ることができない人に画像の情報を知らせるテキストとなります。SEOに重要なクローラー(検索エンジンのプログラム)も画像情報としてこの代替テキストを読み取っています。この代替テキストに「図1」とか内容がわからない説明を入れると、スクリーンリーダーで読み上げられた時や画像が表示されない時に画像の情報が伝わりません。情報を伝える必要がある代替えテキストは内容がわかるよう入力します。画像の代替えテキストの設定方法Worepressでの代替えテキスト設定方法を紹介します。画像の挿入時に設定するよう習慣づけましょう。メディアを追加の画面で右側にある挿入画像の情報入力の欄で設定します。[代替テキスト]の欄に入力してください、「キャプション」や「説明」でも読み上げられたり表示されたりしますが、マシーン(読み取りソフト)が理解する情報の種類が異なります。代替えテキストの入力のコツ入力するテキストは画像の様子(状況)の説明ではなく、なるべく画像が伝えたい意味を説明します。意図を深く考えすぎる必要はありません(^^)、思いつかないときはどのような画像かをそのまま説明しましょう。全ての画像に代替えテキストが必要なわけではありません、以下の場合は入力しません。■画像のキャプション(表示される画像の説明)があり説明が入力されているその他にも、画像の代替えテキストについて以下のサイトに細かい設定方法が紹介されています情報バリアフリーポータルサイト既存の画像の代替えテキストの確認方法すでに作成済みのページについて、挿入している画像の代替えテキストを確認する方法です。画像を1つづつ確認する方法ブログの中で1該当の画像をクリックします2画像の四隅に「◻︎」が表示され画像が選択された状態になります3画像上部に表示されるメニューから「鉛筆マーク」をクリックします[画像詳細]という画面が表示されます。[代替テキスト]の欄を確認、必要なら入力します2変更した場合は画面右下の[更新]のボタンをクリックしますこの方法は、以下のチェックツールなどで見つかった画像の改修作業にも使います。まとめて代替テキストの設定を確認する画像がたくさん使用されている場合、全ての画像を一つづつ確認していくのは大変です、そこで代替えテキスト(alt属性)をチェックするツールやブラウザの機能を利用する方法があります。以下に示すのは一例です、チェックしようとするサイトや画像の量などを考慮して使いやすいツールを利用してください。代替えテキストはHTMLの記述で「alt=””」(オルト)という属性で記載されます、チェックはこの「alt属性」を検索チェックする方法が一般的です。■画像ALTチェッカーサイトの画像を一覧表示、ALT(代替えテキストを設定するタグ)設定の一覧を表示してくれます。<使い方>画像ALTチェッカーの専用ページを表示させます。viewer(Chromeの拡張機能)ブラウザChromeに拡張機能をインストールして利用します、各ページごとの画像のalt属性が確認できます。viewerのページを表示させます。viewer」のアイコンをクリックする、(ロード中)の表示が出る。Alt属性が入力されていない画像の個数が表示されるので、左端にある[∨]をクリックする。Altなし画像の一覧が表示される。この他にもたくさんのチェックツールやそれぞれのブラウザにチェック機能があります、是非便利なツールを見つけて日頃から豆なチェックをしてみてください。ひとこと画像の代替えテキストの入力方法と確認方法についてご紹介しました、ついつい面倒なので空白にしたり、簡単な数字で入力している場合が多いかと思います。「え!、いままでの画像全部に入力するのは大変だ!!!」となっている方も多いかと思いますが、まずはこれから(今日から)挿入する画像に説明を入力することを始めてください。既存の画像は余裕のあるときやがんばろうと思ったときにアクセス数の多いページや、キーとなるページから改修していって大丈夫です、それより今からつくるページに取り組むことが大事です(^^)。冒頭にお伝えしたように、視覚障害者のためのスクリーンリーダーのみならず、SEOのクローラーのためにもなります。代替えテキストが検索され、サイトへの訪問者が増える可能性が大いにあります、毎日のちょっとした「コツコツの作業」が大事です。え方で、「年齢や身体的条件を問わず、誰でもウェブで提供されている情報にアクセスして利用できること」を指します。具体的に言うと・小さい字が見えにくい・薄い(コントラストの低い)字は見えにくい・ボタンや、導線のわかりづらいページは操作ができない・マウスの操作は慣れていないといったごく普通のシニアの方がかかえる障害があっても、見てわかりやすい&操作がしやすいページを用意することです。*このブログではWeb作成上の具体的な内容をひとつづつご紹介しています。コメントをキャンセルメールアドレスが公開されることはありません。*ウェブサイトこの記事のトラックバックURLプロフィール訪問いただきありがとうございます。2016年4月岡山県真庭市に引っ越し、デザイン系講師のかたわらブログ制作&ネットビジネスを副業として収入を得ています。主な収入源は、HP作成・アフィリエイト・広告収入・法人メルマガの構築代行などです(^^)このブログは、ネットビジネスの始め方を噛み砕いて解説、内容を実践できるメルマガを配信、ゆとりあるシニアライフを目指す方を応援します。パソコンインストラクターや、コールセンターでのサポート経験を活かし、個々のスキルとスピードに合わせたサポートを心がけています。子育てを卒業!自分のために時間とお金を使える!!でも、「夢見るシニアじゃいられない」と感じているそんなあなたに伝えたい情報です。「ブログやアフィリエイトって、聞いたことあるけど若者(わかもの)や強者(つわもの)しか手を出してはいけない気がして」と思っていませんか?「頑張ってみたけど、若い人の勢いについていけず挫折し諦めた」それでも大丈夫!ちょっと勇気を出して扉をあけてみませんか。お手伝いできれば嬉しいです。rin_ngoりんごの田舎暮らしりんごのメインブログ、飾らない創らないをモットーにありのままの暮らしぶりを綴る。した心の持ち方で「ワンランクあっぷする日常」を提案SNSを活用しようFacebookやTwitterなど代表的な「SNS」の登録方法から活用ノウハウまでわかりやすく紹介しています。一緒にオリジナルなサイトを作成していきます。実際の作業がギュッと1つにまとめられています。ブログ初心者が「楽しんで稼ぎ続けられる」、そんな資産になるブログ作り方の教科書です。「アフィリエイト」の種類や仕組みを噛み砕いて解説、実践方法をやさしく案内しています。さんエンドウさま、コメントありがとうございます。お問い合わせの件、YahooIDはパソコンに依存しません。さんYahooIDを他のパソコンと共有するにはどうすればよいでしょうか。さんりんごさまお世話になっております。スマホの設定でアカウント画面まで表示され次え、が出てこなかった。アカウントと作成方法について[...りんごの一歩づつサポート「ブログ&メルマガを利用したネットビジネス」に取り組むことで「ワンランクアップした毎日」を目指す方を応援します(*^▽^*)ネットビジネス入門無料メルマガ人と人が繋がる暖かいコミュニケーションがテーマのネットビジネスです。この機会に触れてみてください。