HTMLとWebアクセシビリティを見つめなおす―『HTML解体新書』発売によせて
6.8K Views
May 19, 22
スライド概要
GAAD Japan 2022
https://gaadjp.connpass.com/event/244731/
関連スライド
HTML解体新書ができるまで
中村直樹
1.5K
各ページのテキスト
HTMLとWebアクセシビリティ を見つめなおす ―『HTML解体新書』発売に よせて GAAD Japan 2022 2022-05-19 中村 直樹（ミツエーリンクス）
自己紹介 所属とか経歴とか
自己紹介／所属 中村 直樹（なかむら なおき） ミツエーリンクス アクセシビリティ部 所属 アクセシビリティ エンジニア（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
今日お話しすること📢 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/
HTML Standard日本語訳 👉CHAPTER 1-7 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/
ウェブページは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
ページタイトルの指針 👉p.100
WCAG 2.1 達成基準 2.4.2（再掲） 適切なtitle要素を提供することで、 自動的にこの達成基準を満たすことができる！ 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解体新書という書籍をはじめて知った方は、 是非一度お手にとっていただければと思います🙏 このセッションのスライドは、ここでおわりです。