こんにちは、道洋行東京支店Web制作スタッフのT.Y.です。
Webアクセシビリティ達成基準の初っ端は「1.1.1 非テキストコンテンツの達成基準」です。
もうこの用語だけで「訳が分からない」「面倒」とお手上げになってしまう方も多いのではないでしょうか。
今回はアクセシビリティの中でも基本中の基本「1.1.1 非テキストコンテンツの達成基準」について解説します。
もくじ
テキスト以外の、画像や動画、アイコンなどを「非テキストコンテンツ」と呼びます。私たちが普段つくるWebサイトには、文字だけじゃなくて、いろんなビジュアル要素が含まれていますよね。
でも、これらって実は「見えない人」「聞こえにくい人」「操作が難しい人」にとっては、情報が伝わりづらいことがあります。
たとえば、画像に何が写っているかがわからないと、内容が理解できません。
そんな時に大切なのが、「代わりになる情報(=テキスト)」をきちんと用意しておくことです。
Webアクセシビリティには、国際的なルールがあります。それが「WCAG(Web Content Accessibility Guidelines)」です。
その中でも一番最初に出てくるのが「1.1.1 非テキストコンテンツ」という基準です。
「画像や動画など、文字じゃないものには、ちゃんと意味が伝わるようにテキスト情報をつけておきましょう!」
ということです。
これがなぜ大事かというと、スクリーンリーダーという音声読み上げツールを使っている方にも、内容をきちんと伝えるため。
つまり、見えなくても聞こえなくても、誰もが情報にアクセスできるようにするのがこのルールなのです。
画像にはHTMLのalt
属性を使って、代替テキスト(説明)を付けましょう。
例:
alt="A社製商品の正面写真"
alt="道洋行ロゴマーク"
alt="検索"
ちなみに、ただの飾りの画像には alt=""
(空のalt)を入れるのが正解。スクリーンリーダーが無駄に読まないようにするためです。
たとえば、会社紹介の動画なら、「この動画では、道洋行の業務内容と社員インタビューを紹介しています」といった説明を先に出してあげると親切です。
グラフや図表は、数字の傾向や注目ポイントをテキストで伝えてあげると、視覚に頼らない人にも伝わります。
例:
「この棒グラフは、2022年から2024年にかけての売上推移を示しています。2023年に大きな伸びが見られます。」
2024年に改正された「障害者差別解消法」では、企業も合理的配慮を求められるようになりました。
特に行政向けのWebサイトをつくる場合、アクセシビリティ対応は「やって当たり前」になりつつあります。
中小企業でも「うちは関係ない」と思わずに、今のうちから対応しておくことで、行政との仕事のチャンスも広がるかもしれません。
実は、alt属性はGoogleの検索エンジンにも評価されます。画像検索の対象にもなりますし、アクセシビリティの向上はユーザビリティ(使いやすさ)全体の向上にもつながります。
また、高齢のユーザーや、スマホだけでアクセスする人にも優しいサイトになります。
「非テキストコンテンツ」への対応は、Webアクセシビリティの第一歩。
難しそうに見えて、実は「伝えたいことを、ちゃんとテキストでも伝える」だけでOKです。
すべての人にとって「わかりやすい」「使いやすい」Webサイトは、会社や自治体の信頼を高め、結果的にビジネスにもプラスになります。
これを機に、みなさんのWebサイトもアクセシビリティ対応、はじめてみませんか?
当社サービスに関するご相談・お見積もりなど、お気軽にお問い合わせください。