こんにちは。デザイン事業部でデザイナーをやっております金沢です。
現在、iret.mediaではテーマ別ブログリレーを実施中です！
私はデザインチームとして、こちらの記事をお届けします。
これまで「【A11y】そろそろちゃんと」シリーズで
デザイン編、WCAG編の記事を書いてきました。
3部作構成にする、と意気込んで今回が最後のマークアップ編になります。
この記事ではアクセシビリティに対応したマークアップを行うために、どのような対応をすれば良いのか紹介していきます。
普段の業務でコーディングを行うことはほぼないのですが、既存サイトのアクセシビリティをチェックする際にアクセシビリティに配慮したコーディングがされているかコードをチェックする場面が多々あります。
今回はこのチェック作業を実施する中でデザイナーの私が勉強になったことを抜粋して紹介していきたいと思います。
アクセシビリティに配慮したコーディングを行う第一歩としてお読みいただけたら幸いです！
alt属性
alt属性とは簡単にいうと、画像につける代替テキストのことです。
今回はロゴ、バナー、写真の場面を取り上げてそれぞれどのようなaltを記載すれば良いか確認します。
ロゴ
企業ロゴやサービスのロゴを画像で表示しているwebサイトは多くあります。
例えば「InClue」という会社(架空の会社)のwebサイトに以下のような企業ロゴがあったとします。
この場合、altに記述するテキストは「InClue」となります。
img src="logo.png" alt="InClue"
「InClueの企業ロゴ」とは書かないで良いということです。
社名が「株式会社InClue」だった場合はalt="株式会社InClue"と、このままaltに書きます。
「（株）InClue」とaltに記載してしまうとスクリーンリーダーでうまく読めないこともあるため「株式会社」と書いた方が適切です。
バナー
続いてバナーのaltについて説明します。
以下のようなバナーがあったとき、どのようなaltをつけるのが良いでしょうか。
（Chat GPTで作成したバナーのため文字化けはご愛嬌ください）
このようなバナーの場合、altは画像に記載されている内容と同じ文言を記載するのが望ましいです。
一方で画像に書かれているテキスト全てをaltに記載するとなると非常に長くなりますよね。
加えて、alt内のテキストは最大でも80文字程度に収めるのが良いとされています。
これらを踏まえると以下のようなaltが適切と考えられます。
<img src="a11yws0620.jpg" alt="すべての人に優しいWebを作る 開催日：2025年6月20日(金)14:00-16:00 オンライン開催(Zoom) 参加費：無料（申し込み）">
このバナーがどこに配置されるかによってもaltの内容は変わってきます。
例えばこのバナーのすぐ近くに全く同じ内容がテキストで表示されている場合、このバナーは装飾目的となるのでaltは空（alt=""）とするのが適切です。
参考：
altディシジョンツリー
ウェブアクセシビリティ導入ガイドブック
写真
続いて写真の場合についてです。
写真には人物が写っている写真もありますし、人が写っていない風景のみの写真もあり、非常に様々です。
そのため写真のaltの設定は個人的に最も難しいと感じています。
写真のaltの付け方を大まかに説明すると
文末を「〜写真」「〜風景」「〜の様子」などと括り可能な限り写真に写っているものを説明します。
例えば以下のような写真があったとします。
この写真の場合以下のようなaltが考えられます。
alt="トロフィーを掲げた優勝者と仲間たちが歓喜するステージ上の写真"
alt="スポーツ大会で優勝チームと敗者が健闘を称え合う表彰式の様子"
alt="ステージで挑戦者が集まり勝利を祝う、スポーツ大会の表彰式風景"
このように様々なレパートリーが考えられます。
バナーと同様、altの設定値は写真が登場する文脈にも影響してくるため、よく検討することが重要です。
参考：ウェブアクセシビリティ事例集|事例５. 写真＜人物写真＞のalt属性値のつけ方
ラベルの付与
適切にラベルを設定し、入力欄が何のためのものか、スクリーンリーダーでもわかるようにすることが重要です。例えば、フォームの入力フィールドにを使って、ユーザに明確な指示を提供します。
<label for="email">メールアドレス</label> <input id="email" type="email" />
もしくは以下の書き方も可能です。
<label> メールアドレス <input type="email" id="email"> </label>
WAI-ARIA（ウェイアリア）を使用する
WAI-ARIAとはHTMLだけでは伝えきれない「役割」や「状態」を、属性を使って補うことで、スクリーンリーダーなどに意味を伝える仕組みです。
このWAI-ARIAは大きく分けてロール、プロパティ、ステートの3つの機能に分かれています。
ロールはその要素に役割を与え、プロパティは要素の性質を定義して、ステートはその要素の状態を示すことができます。
| 種類 | 属性例 | 目的 |
|---|---|---|
| ロール | role="dialog" |
役割を伝える |
| プロパティ | aria-label="閉じる" |
名前をつける |
| ステート | aria-expanded="true" |
状態を伝える |
ロールは名の通りrole属性を指しています。
aria-の形で始まる属性ではないですがWAI-ARIAの仕様に含まれています。
参考：WAI-ARIA の基本
以下WAI-ARIAのプロパティに分類されるaria-labelを用いて具体例を挙げます。
例えばボタンに虫眼鏡のアイコンだけの時、見た目にはアイコンしかなくとも、aria-label="検索する"があるとスクリーンリーダーが「検索するボタン」と読み上げてくれます。
このような状況の時に使用すると非常に便利です。
<button aria-label="検索する"> <img src="search.svg" alt="" /> </button>
今回、一例としてaria-label を用いましたが、そのほかにもプロパティ、ステートを含むARIA属性もWAI-ARIAロールも、種類がとても豊富です。
参考：ARIA の状態とプロパティ、WAI-ARIA ロール
WAI-ARIAの属性の種類が非常に豊富だったことが確認できたかと思います。
そのため取っ掛かりのための最初に覚えておきたいWAI-ARIA表をChat-GPTで作成いたしました。
ご参考までにご覧ください。
| 種類 | 名前 | 何を伝える？ | よく使う場面 |
|---|---|---|---|
aria-label |
ラベル | 見た目に文字がないけど「これは何か」を伝える | アイコンボタン、フォーム |
aria-hidden |
非表示にする | 見えてるけど読ませたくない | 装飾、アイコン |
aria-expanded |
開いているかどうか | メニューやアコーディオンなどの状態 | ナビゲーション、FAQ |
aria-disabled※ |
無効かどうか | ボタンなどが押せない状態を伝える | 非アクティブボタン |
role="button" |
役割：ボタン | divなどをボタンとして扱う |
カスタムボタン |
role="dialog" |
役割：モーダル | モーダルが開いたときに「これはダイアログ」と伝える | モーダルウィンドウ |
※aria-disabledについて、HTMLにはdisabled属性があり、こちらを優先して使用するのでdisabled属性が使えないタグに対して使う認識をしていただければと思います。
ちなみに、HTMLタグで意味が伝わる時には基本WAI-ARIAの記述は必要ありません。
前提としてセマンティックなHTMLを記述することは非常に重要ですのでそこは念頭に置いておきましょう。
まとめ
今回は、alt属性・label要素・WAI-ARIAという、アクセシビリティ対応についてを紹介しました。
altやlabelはHTMLだけで対応できる基本要素ですが、WAI-ARIAは、複雑なUIをより使いやすくするための補助的・応用的な技術です。
まずはセマンティックなHTMLをしっかり書くことが、アクセシビリティ対応の第一歩になります。
普段はデザイン業務が中心の私ですが、既存サイトのアクセシビリティチェックを通じて、「マークアップのちょっとした工夫が、見えない・操作しづらい人にとって助けになる」という気づきを得ることができました。
この記事を読んで、少しでもwebアクセシビリティ対応の理解が進んだ、という方がいれば嬉しいです。
最後までお読みいただき、ありがとうございました！
簡単30秒