フロントエンドエンジニアのWeb開発アクセシビリティ入門①｜HTML

初めに

記事を書いた人について

2022年3月からフロントエンドエンジニアとして働き始めました。
2024年5月現在、約2年ほどフロントエンドエンジニアとしての実務経験を積んでいます。

この記事について

上記の通り、約2年実務経験を積み、そろそろアクセシビリティについてしっかり学ばなければならないと感じました。
自分と同じようなフロントエンドエンジニアとしてアクセシビリティを学び始める方に向けて、自分が学んだことを以下の3つの記事に分けて公開します。

• フロントエンドエンジニアのWeb開発アクセシビリティ入門①｜HTML（この記事）
• フロントエンドエンジニアのWeb開発アクセシビリティ入門②｜CSS/JavaScript
• フロントエンドエンジニアのWeb開発アクセシビリティ入門③｜WAI-ARIA

そもそもアクセシビリティとは？

デジタル庁のウェブアクセシビリティ導入ガイドブックには以下の通り記載されています。

インターネットがごく一般的に利用できるようになったことで、情報へ触れる機会は大幅に増え、情報へのアクセスのしやすさ（アクセシビリティといいます）も既存メディアに比べて格段に高まったといえます。
（中略）
「ウェブアクセシビリティ」が整っていれば、多くの人が環境や状況に左右されずに、自由に情報へアクセスできるようになるのです。

出典：デジタル庁（ https://services.digital.go.jp/ ）

上記から、アクセシビリティとは情報へのアクセスのしやすさを意味し、多くの人が情報へアクセスできるようにするための活動が重要であることがわかります。

「多くの人」にどのような人が含まれるのか、もう少し具体的にしてみます。

視覚障害のある人に対して

• スクリーンリーダーを利用するユーザがいることを想定し、スクリーンリーダーでの読み上げに対応できるようにする
• 拡大機能を使うユーザがいることを想定し、サイトが拡大されることを考慮して実装する
• 色覚障害のある人を想定し、サイトに使うカラーやカラーコントラストを考慮する

聴覚障害のある人に対して

• サイト内の音声データや動画データに対して字幕を表示させる

運動機能に障害がある人に対して

• マウスを使わないユーザを想定し、キーボードでも操作可能な状態にする
• マウスを動かしづらいユーザを想定し、ユーザからの入力などを必要とする場合には以下を行う
  • 対象の要素の大きさを十分に確保する
  • 要素同士の余白を十分に確保する

このグループには一時的な怪我等で腕が動かしづらい人や、加齢によって運動機能が低下した人も含まれます。

認知障害のある人に対して

• テキストにはなるべく平易な言葉を使うようにし、専門用語などには説明を付与する
• なるべく同じレイアウトを心がける

まとめ

• アクセシビリティは障害のある人にとってだけでなく、あらゆる人によって利用できるようにすることを示します
• 100%すべての人をカバーするのは現実的に考えて不可能です
• しかしできる限りの努力はすべきです

HTML

HTMLでアクセシビリティを考慮するには、セマンティクスを意識することが重要です。
セマンティクスを意識することでマシンリーダブル（=スクリーンリーダーなどの機械からサイトの内容を正しく判別できるようになる）を実現できるからです。

主要なタグ

セマンティックなコーディングをするために、主要なタグを確認してみましょう。
なお、この章のタグは以下のページを参考にしています。

コンテンツ区分

以下のようなタグが含まれます。

<article>

雑誌や新聞の記事、ブログ記事などのコンテンツが含まれる

<footer>

ページのフッターが含まれる

<header>

ページのヘッダーが含まれる

<h1>,<h2>,<h3>,<h4>,<h5>,<h6>

見出しに使われる

<main>

文書の主要な部分を表す

<nav>

ナビゲーションリンクを提供するためのセクションを表す

<section>

文書の自立したセクションを表す
少数の例外を除いて、セクションには見出しタグを置くようにする

テキストコンテンツ

以下のようなタグが含まれます。

<dl>

説明リストを表す

<dt>

説明リストや定義リストの中で用いられ、用語を表す
普通は次に<dd>タグが続く

<dd>

説明リストや定義リストの中で用いられ、自身の前に記述されている
<dt>についての説明、定義、値などを示す

<menu>

インタラクションを含むリストを表す
子要素には<li>が入る

<ul>

項目の順序なしリストを表す
子要素には<li>が入る

<ol>

項目の順序ありリストを表す
子要素には<li>が入る

<li>

リストの項目を表すために用いられる

<p>

段落を表す

<blockquote>

引用文であることを表す

<figure>

キャプションがつけられる図要素を表す

<figcaption>

親要素の<figure>要素内にあるコンテンツを説明するキャプションを表す

インライン要素の意味づけ

以下のようなタグが含まれます。

<a>

href属性を用いてハイパーリンクを作成する
なお、リンクの場合の留意事項はリンクに記載しています

<abbr>

略語や略文字を表す

<dfn>

定義句や文の文脈の中で定義している用語を示す

<mark>

マークをつけた部分の関連性や重要性のために、参照や記述の目的で目立たせたり強調したりする文字列を表す

<q>

インラインの引用であることを表す
長文の引用は<blockquote>で表す

<small>

著作権表示や法的表記のような、注釈や小さく表示される文を表す

<em>

強調されたテキストを示す
この要素は入れ子にすることができ、入れ子の段階に応じてより強い程度の強調を表すことができる

<strong>

内容の重要性、重大性、または緊急性が高いテキストを表す

<data>

value属性に機械可読な形式を設定することで与えられたコンテンツと結び付けられる

<time>

特定の時の区間を表す
datetime属性を使用して、機械可読な形式の日付を記述することができる

<i>

慣用句、技術用語、分類学上の呼称など、他のテキストと区別されるテキストの範囲を表す

<br>

文中に改行を発生させる

<wbr>

任意で改行して良い位置を表す

画像とマルチメディア

以下のようなタグが含まれます。

<audio>

音声コンテンツを埋め込むために使用する

<img>

文書に画像を埋め込む

<video>

文書中に動画再生に対応するメディアプレイヤーを埋め込む

<area>

イメージマップの中でクリック可能な領域をあらかじめ定義する

<map>

イメージマップ（クリック可能なリンク領域）を定義するために使用する

埋め込みコンテンツ

以下のようなタグが含まれます。

<iframe>

現在のページに他のページを埋め込むことができる

<portal>

<iframe>と似ている
他のページのコンテンツのプレビューとして動作する

<object>

画像、内部の閲覧コンテキスト、プラグインによって扱われるリソースなどのように扱われる外部リソースを表す

<picture>

様々な画面や端末の条件に応じた画像を提供する

<source>

picture 要素、audio 要素、video 要素に対し、複数のメディアリソースを指定する

表コンテンツ

以下のようなタグが含まれます。

<table>

表データを表す

<caption>

表のキャプションまたはタイトルを表す

<thead>

列の見出しを定義する行のセットを表す

<tbody>

表の本体部分を表す

<tfoot>

列を総括する行のセットを表す

<tr>

表内でセルの行を定義する

<th>

表のセルのグループ用の見出しであるセルを定義する

<td>

表でデータを包含するセルを定義する

<colgroup>

表内の列のグループを定義する

<col>

表内の列を定義して、すべての一般セルに共通の意味を定義するために使用する

フォーム

以下のようなタグが含まれます。

<form>

webサーバーに情報を送信するための対話型コントロールを含むセクションを表す

<fieldset>

webフォーム内のいくつかのコントロールをグループ化するのに利用される

<legend>

親要素である<fieldset>のキャプションを表す

<progress>

タスクの進捗情報を表す

<button>

フォームを送信したり、ダイアログを開いたりするなどのアクションを実行するのに利用される

<label>

ユーザインターフェイスの項目のキャプションを表す

<input>

ユーザからデータを受け取るための、webベースのフォーム用の操作可能なコントロールを作成するために使用される

<textarea>

複数行のプレーンテキスト編集コントロールを表す

<select>

選択式のメニューを提供するコントロールを表す

<optgroup>

<select>内の<option>をグループ化するのに利用される

<option>

<select>、<optgroup>、<datalist>要素内で項目を定義するのに使われる

<datalist>

他のコントロールで利用可能な値を表現する一連の<option>要素を含む

<output>

サイトやアプリが計算結果やユーザ操作の結果を挿入することができるコンテナー要素を表す

インタラクティブコンテンツ

以下のようなタグが含まれます。

<dialog>

ダイアログボックスやサブウィンドウ等の対話的なコンポーネントを表す

<details>

ウィジェットが「開いた」状態になった時のみ情報が表示される折りたたみウィジェットを作成する

<summary>

details 要素の折りたたみボックスの要約、キャプション、説明、凡例を表す

実装時の留意事項

前の章ではセマンティックなタグを見てきました。
この章ではそれぞれのタグを使うメリットや留意事項を確認していきましょう。
なお、この章は主に以下のページを自分なりにわかりやすく解説した内容です。

https://developer.mozilla.org/ja/docs/Learn/Accessibility/HTML

ページレイアウト/テキストコンテンツ

コンテンツ区分やテキストコンテンツに記載のある通り、<div>タグだけで実装せず、コンテンツの目的・意味付けに応じて<header>,<nav>,<main>,<article>,<footer>,<p>,<ul>などのタグを利用するようにしましょう。

• <div>要素を入れ子にする構造と異なり、スクリーンリーダーの読み上げを妨げない
• スクリーンリーダーでの読み上げの際に見通しが良くなる
  • 見出しタグは一覧として取り出せたり、前の見出しや次の見出しにジャンプできる
• コードサイズの点で無駄がなくなる
  • コードの保守が容易になる
  • ユーザがダウンロードするファイルのサイズが小さくて済む

コンテンツ区分やテキストコンテンツのタグを利用したコード例

参考：株式会社ニジボックス企業サイト

<header>
    <nav>
        <menu>
            <li>
                <a href="/mission">ミッション</a>
            </li>
            <li>
                <a href="/mission">実績紹介</a>
            </li>
            <!-- 以下メニューが続く -->
        </menu>
    </nav>
</header>
<main>
    <h1>Grow All</h1>
    <section>
        <h2>ミッション</h2>
        <!-- ミッションセクションの内容がここに来る -->
    </section>
    <section>
        <h2>実績紹介</h2>
        <!-- 実績紹介の内容がここに来る -->
    </section>
</main>
<footer>
    <!-- フッターの内容がここに来る -->
<footer>

適切な表現を心がける

テキストの表現もアクセシビリティに影響を与えます。以下のような点に注意しましょう。

• 明確な言葉を使うようにする
• 不必要な専門用語や俗語は避ける
• 略語は少なくとも1,2回程度、省略せず記述し、<abbr>タグを使用して説明する

UIコントロール

UIコントロールはフォームに含まれるフォームコントロールやボタン、リンクが対象です。
適切なタグを利用することで以下のようなメリットが得られます。

• どのブラウザでも既定の状態でキーボード操作が可能
• どの要素にフォーカスが当たっているかがわかる
  • フォーカスが当たっている要素にはハイライトされた既定のスタイルが付与される
• エンター/リターンキーを押すと以下のような挙動になる
  • フォーカスが当たっているリンクに遷移する
  • フォーカスが当たっているボタンを押下する
  • テキスト入力欄にテキストを入力するためのタイピングを開始する

キーボードアクセシビリティ

<button>タグで実装すべきボタンを<div>で実装した場合、tabindex="0"属性を付与することで見せかけの<div>ボタンにフォーカスを当てることができます。
tabindexには以下の2種類のオプションがあります。

tabindex="0"

普通ならタブキーでの移動ができない要素をタブキーでの移動可能にする

tabindex="-1"

普通ならタブキーでの移動ができない要素に対してプログラム的にフォーカスさせたり、リンクのターゲットとしてフォーカスさせたりすることができる

tabindex属性は大きな混乱を発生させる可能性があるため、本当に必要な場合にのみ使用すべきです。

意味の通るテキストラベル

ボタンとリンクテキストはラベルが単体で意味をなすようにする必要があります。

<!-- 以下悪い例 -->
<p>
    ニジボックスについて知りたい方は
    <a href="https://www.nijibox.jp/">こちら</a>
    をご確認ください。
</p>

<!-- 以下適切な例 -->
<p>
    ニジボックスについて知りたい方は
    <a href="https://www.nijibox.jp/">ニジボックス企業サイト</a>
    をご確認ください。
</p>

フォームコントロールも同様に、ラベルとコントロールを一義的に関連づける必要があります。

<!-- 以下悪い例 -->
メールアドレスを入力してください：<input type="email" id="mail" name="mail">

<!-- 以下適切な例 -->
<label for="mail">メールアドレスを入力してください</label>
<input type="email" id="mail" name="mail">

アクセシブルなデータ表

表コンテンツに含まれるタグを利用すればデータ表を簡単に作成できます。ただし、スクリーンリーダーのユーザには行や列を関連づける方法がありません。
以下のような対応を行いましょう。

• 表の見出しに<th>要素を利用する
  • scope属性を利用することで見出しが行に対するものなのか列に対するものなのかを明らかにできる
• <caption>要素若しくは<table>要素のsummary属性を利用して表に対する代替テキストを表現する

See the Pen アクセシブルなデータ表 by msuzuna (@msuzuna) on CodePen.

代替テキスト

画像の中にテキストコンテンツを記載してはいけません。
スクリーンリーダーでアクセスできない上に選択できない、コピー&ペーストできないなどのデメリットがあることを認識しましょう。

画像を実装する際に最初に コンテンツの中で意味を持っているのか、純粋に視覚的な装飾で意味を持たないのか、 を考慮しましょう。

コンテンツの中で意味を持っている場合

コンテンツの中で意味を持っている画像の場合は、以下のいずれかで実装するようにしましょう。

• 1例目：alt属性に説明テキストを設定する
  • 簡潔なテキストにすることを心がける
  • 画像の中で伝えられる情報のうち、周囲のテキストと重複していないものを漏れなく記載する
• 2例目：alt属性に説明テキストを設定し、title属性に追加的な情報を設定する
  • 追加的な情報を提示したい場合に有用
• 3例目：alt属性を使わず、周囲の段落に説明テキストを設定する
  • 複数の画像に対して同じテキストをラベルとして使いたい時に有用
• 4例目：<figure>と<figcaption>を利用する
  • 何らかの種類の図を図の説明文と結びるけることができる

See the Pen 意味を持っている画像 by msuzuna (@msuzuna) on CodePen.

純粋に視覚的な装飾で意味を持たない場合

画像に意味を持たせないためにalt属性を空にするか、cssの背景画像として設定するようにしましょう。

See the Pen Untitled by msuzuna (@msuzuna) on CodePen.

リンク

<a>要素とhrefは使用方法によってアクセシビリティを向上させたり、害したりするので注意が必要です。
また、意味の通るテキストラベルで記述した通り、リンクを設定するテキストの表現にも注意しましょう。

スタイル付け

デフォルトではリンクは青で下線、閲覧済みでは紫で下線、キーボードフォーカスを受けるとfocus-ringがつきます。
色のみをリンクテキストと通常テキストを区別する唯一の方法にすべきではありません。

onclickイベント

hrefにjavascript:void(0)を設定してページの更新を回避し、onclickイベントで擬似ボタンを作ることがあります。
これは予期しない動作を発生させたり、正しくない意味づけを伝えることになるためボタンとしてaタグを使うのは避けるほうが良いでしょう。

<!-- 以下悪い例 -->
<a href="javascript:void(0)" onClick="openModal()">モーダルを開く</a>

<!-- 以下適切な例 -->
<button type="button" onClick="openModal()">モーダルを開く</button>

外部リンクとHTML以外のリソースへのリンク

target="_blank"によって新しいタブやウィンドウで開かれる場合やhref値がファイルリソースを指す場合、起こる動作に関する説明を記載する必要があります。

<a target="_brank" href="https://www.nijibox.jp/">ニジボックス企業サイト（別タブで開く）</a>

<a target="_brank" href="job-description.pdf">募集要項（PDF）</a>

スキップリンク

ページの上部からそれぞれのセクションに遷移できるような、ページ内リンクは支援技術を利用する人にとって特に有益です。

近接性

複数のリンクが視覚的に近い場合、それらを分離するために余白を確保する必要があります。

まとめ

この記事ではそもそもアクセシビリティとは？ということとHTMLについてアクセシビリティ観点で気をつけることをまとめました。

フロントエンドエンジニアのWeb開発アクセシビリティ入門②｜CSS/JavaScriptは以下の記事にまとめています。

https://qiita.com/msuzuna/items/5f5f33658d3a346e31fb

アクセシビリティ入門③｜WAI-ARIAは以下の記事にまとめています。

https://qiita.com/msuzuna/items/47d539c55d2b5757a302

参考サイト

本記事を執筆するに当たって勉強したものは以下の通りです。

• MDN-アクセシビリティ：https://developer.mozilla.org/ja/docs/Learn/Accessibility
• MDN-アクセシビリティとは：https://developer.mozilla.org/ja/docs/Learn/Accessibility/What_is_accessibility
• MDN-HTML: アクセシビリティの良き基本：https://developer.mozilla.org/ja/docs/Learn/Accessibility/HTML
  WCAG2.2：https://waic.jp/translations/WCAG22/

この記事を執筆するに当たって参考にしたものは以下の通りです。

• HTML Standard HTMLの要素：https://momdo.github.io/html/semantics.html#semantics
• MDN-HTML 要素リファレンス：https://developer.mozilla.org/ja/docs/Web/HTML/Element
• デジタル庁のウェブアクセシビリティ導入ガイドブック：https://www.digital.go.jp/assets/contents/node/basic_page/field_ref_resources/08ed88e1-d622-43cb-900b-84957ab87826/53f76eaa/20240329_introduction_to_weba11y.pdf