きっかけ
現在、ハローメンターで自分の書いたコードが仕事獲得にも通用するレベルになるよう、日々鍛錬を重ね、最終目標としてWeb制作に関わる仕事に就きたいと努力しているところです。
ハローメンターと契約して1ヶ月と経たない頃。
課題提出後にサンプルコードを確認していて、あまりにも拙い自分のコードに落ち込み、なんとか改善していかなくては！と自分を奮い立たせコード模写をしている際に気がついたこと。
imgタグ内のalt属性…、こんなに事細かに写真の説明をしなければならないの？？？
ということがありました。
今はできるだけ詳細に書くように心がけていますが、改めてどうしてalt属性を詳細に書かなければならないのか、もっと効率的に書く書き方はないのか、考えていきます。
alt属性を書く必要性
どの業界にもものづくりをする上で「標準」が必要になるわけですが（例えばJIS規格とか…）、Web技術の場合の標準は「W3C」。
で、ここのイメージチュートリアル冒頭にある文言を和訳すると
画像には、その画像によって表現される情報や機能を説明する代替テキストが必要です。
これにより、さまざまな障害を持つ人々が画像を使用できるようになります。
とあり、その後に、なぜ重要なのかを示しています。
その後、alt属性の内容がどんな場面で有益かということが記されてます。
- スクリーンリーダーを使用している人
- 代替テキストを読み上げたり、点字として表示することができる
- 音声入力ソフトウェアを使用している人
- ボタンやリンク画像にフォーカスを合わせることがでる
- 音声対応ウェブサイトを閲覧している人
- 代替テキストの読み上げが可能になる
- モバイルウェブユーザー
- 特にデータローミングの場合、画像をオフにすることができる
- 検索エンジン最適化
- 画像は検索エンジンにインデックスされる
ものすごーーーーく簡潔に述べるならば、どんな人でも情報への平等なアクセス権を！といったところでしょうか。
写真を詳細にテキスト化する難しさ
それにしても、いざ！写真を見ながらalt属性を詳細に書くぞ！となった時、コーディングしている方は絶対に一度は思ったことがあるはず…。
写真内の情報を詳細にテキスト化するって難しい…（´-`）.｡oO
写真が多いページをコーディングするとなるとなかなかの量になるのはもちろんのこと、そもそも写真に映っている情報を改めて詳細にテキスト化して相手に伝えることはなかなか大変…。
この部分を現代の科学技術でもう少し楽にできないか…とネットの海を彷徨って最近見つけたのがこちらのサイト。
ahrefsの 無料のAI画像代替テキストジェネレーター
画像をドロップするとテキストを考えてくれる！？ということで検証してみました。
無料AI画像代替テキストジェネレーターの検証
まずは左の写真をジェネレーターに入れてみました。
画面上での手順は下記のように。
『正式』を選択して生成されたテキストは…
男性と女性が小さな犬を抱えている。
良さげなテキストが生成された！
こんな画像もいれてみると
女性がパソコンで作業しており、ペンとカラーパレットが置かれています。
画像に沿ったテキストがいい感じに出力されることがわかりました。
何回か試してみたところ、たまに「緑の草地に座る女性。彼女は笑顔で本を読んでいます。」という、トンチンカンなテキストも生成されましたが、画像を入れ直すか、『修正』ボタンを押すと変更されるよう。
最後に
無料のAI画像代替テキストジェネレーターが100％完璧に画像のテキスト化をしてくれるわけではないものの、高い確率でよさそうな画像テキストを出力してくれるようです。
出力されたテキストを写真と比較して、問題なさそうであればalt属性にコピー&ペーストし、作業の効率化を進めることができるのではないかと考えます。
