Webアクセシビリティ達成基準「1.1.1 非テキストコンテンツ」の話

そもそも、非テキストコンテンツって？

テキスト以外の、画像や動画、アイコンなどを「非テキストコンテンツ」と呼びます。私たちが普段つくるWebサイトには、文字だけじゃなくて、いろんなビジュアル要素が含まれていますよね。

でも、これらって実は「見えない人」「聞こえにくい人」「操作が難しい人」にとっては、情報が伝わりづらいことがあります。
たとえば、画像に何が写っているかがわからないと、内容が理解できません。

そんな時に大切なのが、「代わりになる情報（＝テキスト）」をきちんと用意しておくことです。

WCAGってなに？「1.1.1」の達成基準をざっくり説明！

Webアクセシビリティには、国際的なルールがあります。それが「WCAG（Web Content Accessibility Guidelines）」です。
その中でも一番最初に出てくるのが「1.1.1 非テキストコンテンツ」という基準です。

簡単に言うと…

「画像や動画など、文字じゃないものには、ちゃんと意味が伝わるようにテキスト情報をつけておきましょう！」

ということです。

これがなぜ大事かというと、スクリーンリーダーという音声読み上げツールを使っている方にも、内容をきちんと伝えるため。
つまり、見えなくても聞こえなくても、誰もが情報にアクセスできるようにするのがこのルールなのです。

よくある非テキストコンテンツと、その対応方法

画像にはalt属性を忘れずに！

画像にはHTMLのalt属性を使って、代替テキスト（説明）を付けましょう。

例：

• 商品画像 → alt="A社製商品の正面写真"
• ロゴ → alt="道洋行ロゴマーク"
• アイコン（検索ボタンなど） → alt="検索"

ちなみに、ただの飾りの画像には alt=""（空のalt）を入れるのが正解。スクリーンリーダーが無駄に読まないようにするためです。

動画や音声にはテキストで補足を

• 動画 → 字幕やナレーションのスクリプトを添える
• 音声だけのコンテンツ → テキスト要約や全文の書き起こしを用意する

たとえば、会社紹介の動画なら、「この動画では、道洋行の業務内容と社員インタビューを紹介しています」といった説明を先に出してあげると親切です。

図表・グラフには一言でいいので説明を

グラフや図表は、数字の傾向や注目ポイントをテキストで伝えてあげると、視覚に頼らない人にも伝わります。

例：
「この棒グラフは、2022年から2024年にかけての売上推移を示しています。2023年に大きな伸びが見られます。」

対応することで得られるメリット

法律対応にもつながります

2024年に改正された「障害者差別解消法」では、企業も合理的配慮を求められるようになりました。
特に行政向けのWebサイトをつくる場合、アクセシビリティ対応は「やって当たり前」になりつつあります。

中小企業でも「うちは関係ない」と思わずに、今のうちから対応しておくことで、行政との仕事のチャンスも広がるかもしれません。

SEOやユーザビリティにもプラス！

実は、alt属性はGoogleの検索エンジンにも評価されます。画像検索の対象にもなりますし、アクセシビリティの向上はユーザビリティ（使いやすさ）全体の向上にもつながります。

また、高齢のユーザーや、スマホだけでアクセスする人にも優しいサイトになります。

ちょっとした工夫で、みんなにやさしいWebサイトに！

「非テキストコンテンツ」への対応は、Webアクセシビリティの第一歩。
難しそうに見えて、実は「伝えたいことを、ちゃんとテキストでも伝える」だけでOKです。

すべての人にとって「わかりやすい」「使いやすい」Webサイトは、会社や自治体の信頼を高め、結果的にビジネスにもプラスになります。

これを機に、みなさんのWebサイトもアクセシビリティ対応、はじめてみませんか？