HTMLとWebアクセシビリティを見つめなおす​―『HTML解体新書』発売に​よせて

HTMLとWebアクセシビリティ を見つめなおす ―『HTML解体新書』発売に よせて GAAD Japan 2022 2022-05-19 中村 直樹（ミツエーリンクス）

• https://gaadjp.connpass.com/event/244731/

自己紹介 所属とか経歴とか

自己紹介／所属 中村 直樹（なかむら なおき）  ミツエーリンクス アクセシビリティ部 所属 アクセシビリティ エンジニア（2019年中途入社）  ウェブアクセシビリティ基盤委員会（WAIC） 翻訳作業部会 委員  HTML解体新書（共著）

宣伝：共著で書きました📖 重版がかかる程度には売れてます…！

宣伝：どんな本？  すでにHTMLという存在を知っている人を念頭に、もっとHTMLの知識を深 めたい、という人向けに書きました  最近のHTMLを取り上げて、HTMLを中心にした本です  教科書的な使い方もできますし、タグ辞典的な使い方もできると思ってい ます  Amazonで試し読みもできますのでぜひ手に取ってもらえれば  PDF版もあります。リフロー版が鋭意制作中です HTML解体新書-仕様から紐解く本格入門 | Amazon.co.jp https://www.amazon.co.jp/dp/4862465277 PDF版 HTML解体新書 https://www.borndigital.co.jp/book/26006.html

• https://www.amazon.co.jp/dp/4862465277
• https://www.borndigital.co.jp/book/26006.html

今日お話しすること📢  HTML解体新書の宣伝をしに来ました  スライドに、関連するCHAPTERやページを書いてます  詳しい説明は本に譲ります  とはいえ、GAADはアクセシビリティのイベントですので、  HTMLを少し詳しく見つつ、  HTMLとアクセシビリティの関係も見てみます  視聴者のみなさんが必ずしも技術的に詳しいとはかぎらないので、 なるべく難易度を下げたつもりです

HTMLってなんなんだ？ 知っている人も、詳しくない人も、まずはHTMLのおさらい

HTMLってなんなんだ  Hyper Text Markup Languageと呼ばれるもの  マークアップ言語と分類される。  HTMLはウェブページを記述するために利用  ウェブ（Web）は、おおまかにはHTTPとURLとHTMLの3つでできている  HTMLはウェブを構成する技術の1つ 👉CHAPTER 1-1

HTMLのルール  ウェブには、仕様書、あるいは単に仕様と呼ばれるものがある  端的にいえば、ルール  今日のお題である「HTML」にもルールが決められていて、仕様書なるも のが存在する  現在のHTMLのルールは「HTML Standard」という仕様書で定められてい る 👉CHAPTER 1-2

HTML Standard 👉CHAPTER 1-7 https://html.spec.whatwg.org/multipage/

• https://html.spec.whatwg.org/multipage/

HTML Standard日本語訳 👉CHAPTER 1-7 https://momdo.github.io/html/

• https://momdo.github.io/html/

余談：かつてのHTMLの仕様 HTML4やHTML5、XHTML 1.0は 現在では「廃止」という扱いに。 👉CHAPTER 1-3

HTMLの要素 終了タグ 開始タグ <h1>HTML解体新書</h1> 内容 要素 内容をタグで囲んで要素を形成する 上記のコード例はh1要素となる 👉CHAPTER 1-2、2-1

HTMLの要素（2） <h1>HTML解体新書</h1> 要素は「意味」（セマンティクス）を持つ h1要素は「見出し」の意味を持つ タグを付けて、テキストに意味をもたせていくのが HTMLということもできる 👉CHAPTER 1-2、3-3

実際のページのHTMLを覗いてみよう GAAD Japanのページ

GAAD Japan 2022 https://www.gaad.jp/

• https://www.gaad.jp/

ウェブページはHTMLを見ることができる 多くのブラウザーで[F12]キーを押すと「開発者ツール」などと呼ばれる ツールが起動し、このツールでHTMLを見ることができる

ページのタイトルに注目してみよう GAAD Japanのページタイトル

ページのタイトルをHTMLで書くには 👉p.99

ページのtitle要素に注目してみる <title>「アクセシビリティ」を考える一日。2022年5月19日（木）開催 - GAAD JAPAN 2022</title>

人間はHTMLを読むことができる HTML </> HTMLはヒューマンリーダブル（人間可読）である

title要素はどう使われるのか 👉p.99 実際に確かめてみよう

ブラウザーのタブに注目してみる ブラウザーはtitle要素を 解釈して、タブにページの タイトルを表示している <title>「アクセシビリティ」を考える一日。2022年5月19日（木）開催 - GAAD JAPAN 2022</title>

「GAAD Japan 2022」で検索してみる Googleがtitle要素を 読み取って表示している <title>「アクセシビリティ」を考える一日。2022年5月19日（木）開催 - GAAD JAPAN 2022</title>

機械がHTMLを読むことができる HTML </> HTMLはマシンリーダブル（機械可読）である 機械が解釈した結果を人間が見る

音声読み上げ… スクリーンリーダーの場合

スクリーンリーダーで見てみる NVDAで読み上げさせて、 スピーチビューアーで表示させたもの <title>「アクセシビリティ」を考える一日。2022年5月19日（木）開催 - GAAD JAPAN 2022</title>

機械がHTMLを読むことができる(2) HTML </> 機械が解釈した結果を人間が 聞くこともできる

WCAGの観点からは？ ページのタイトルってアクセシビリティガイドライン的にどうなのか

アクセシビリティのガイドライン 👉p.029

HTML解体新書でのWCAGの扱い CHAPTER 1-04 「ウェブアクセシビリティの基礎」 でアクセシビリティについての説明があります！ 👉p.030

ページタイトルとWCAG HTMLとWCAG 2.1の達成基準との結びつき、 理解のとっかかりがある 👉p.100

WCAG 2.1 達成基準 2.4.2 この達成基準を満たすために、 どのようにページタイトルを書けばよいのか？ https://waic.jp/docs/WCAG21/Understanding/page-titled.html

• https://waic.jp/docs/WCAG21/Understanding/page-titled.html

ページタイトルの指針 👉p.100

WCAG 2.1 達成基準 2.4.2（再掲） 適切なtitle要素を提供することで、 自動的にこの達成基準を満たすことができる！ https://waic.jp/docs/WCAG21/Understanding/page-titled.html

• https://waic.jp/docs/WCAG21/Understanding/page-titled.html

まとめ：title要素とアクセシビリティ  HTMLでページのタイトルは、title要素で提供できる  慣習に沿ったページのタイトルを提供することで、  人間がページの内容を理解できる  機械が解釈しやすいページタイトルにもなる  そして、アクセシビリティの担保にもなる  HTMLのルールに沿ったウェブページを作成することは、 ウェブアクセシビリティを担保するために必要なことであるといえる

リンクの場合 ウェブに欠かせないリンクとアクセシビリティの話

リンクとa要素 ウェブに欠かせない、ハイパーリンクを作成する要素。 👉p.160

GAAD Japanでのa要素の例 当日、アプリ「<a href="https://udtalk.jp/" target="_blank" title="https://udtalk.jp/">UDトーク</a>」の音声認識結果の誤変換を 編集するスタッフとしてお手伝いいただける方を募集します。…

a要素の「アクセシビリティの注意点」 見開き2ページにわたってアクセシビリティ上の注意点が記述 （a要素は5ページ説明されてて、おおよそ半分にあたる） 👉p.162、p.163

a要素の「アクセシビリティの注意点」(2) 👉p.162

リンク先を理解できるようにする 👉p.162

リンク先を理解できるようにする(2) 👉p.162

リンク先を理解できるようにする(3) 👉p.162

GAAD Japanでのa要素の例（再掲） 当日、アプリ「<a href="https://udtalk.jp/" target="_blank" title="https://udtalk.jp/">UDトーク</a>」の音声認識結果の誤変換を 編集するスタッフとしてお手伝いいただける方を募集します。…

まとめ：a要素とアクセシビリティ  HTMLでハイパーリンクは、a要素で提供できる  リンクテキストでどのようなリンクなのかを明確に示すことは アクセシビリティの担保につながる

全体のまとめ  HTML解体新書を紹介しつつ、HTMLのルールを簡単に紹介しました  ページのタイトルを表すtitle要素と、リンクを作成するa要素について 取り上げ、実際にウェブブラウザーなどでどのように利用されるのか について見てきました  HTMLとWCAGの関係についても触れました HTML解体新書という書籍をはじめて知った方は、 是非一度お手にとっていただければと思います🙏 このセッションのスライドは、ここでおわりです。