初めに

記事を書いた人について

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>: 段落を表す

初めに

記事を書いた人について

この記事について

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

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

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

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

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

まとめ

HTML

主要なタグ

コンテンツ区分

テキストコンテンツ

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

画像とマルチメディア

埋め込みコンテンツ

表コンテンツ

フォーム

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

実装時の留意事項

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

適切な表現を心がける

UIコントロール

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

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

アクセシブルなデータ表

代替テキスト

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

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

リンク

スタイル付け

`onclick`イベント

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

スキップリンク

近接性

まとめ

参考サイト

初めに

記事を書いた人について

この記事について

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

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

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

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

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

まとめ

HTML

主要なタグ

コンテンツ区分

テキストコンテンツ

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

画像とマルチメディア

埋め込みコンテンツ

表コンテンツ

フォーム

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

実装時の留意事項

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

適切な表現を心がける

UIコントロール

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

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

アクセシブルなデータ表

代替テキスト

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

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

リンク

スタイル付け

onclickイベント

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

スキップリンク

近接性

まとめ

参考サイト

`onclick`イベント