【Webアクセシビリティ奮闘メモ】マークアップ編（超基礎） #HTML

勉強しないといけないと思いつつも、なかなか手を出せていなかったWebアクセシビリティ。
去年、Accessibility Step Vol.6に参加して、色んな方たちのお話聞いて、「あぁこれはちゃんと勉強しないと駄目なやつだわ」と実感。
だけど、いきなりやれと言われても難しい…そんなしっかり知識があるわけでもないし。。。

ということで。
ちまちまと調べたことをメモとして残していきます。

セマンティックなマークアップはSEOに効果があるだけじゃないよ

まずはマークアップです、基礎の基礎。
SEO内部施策で「セマンティックなマークアップを！」みたいなことを言うけど、セマンティックなマークアップはSEOだけでなく、アクセシビリティにもよいのですな。

HTMLで定義された要素を利用したマークアップ

<header> / <footer>
<main> / <aside>
<aritcle> / <section>
<h1> / <h2>などの見出し
<p> / <a> / <img>
<ul> / <ol> / <dt>などリスト系

などを利用して、文書構造を意識しながら、よりセマンティックなマークアップしていくことが大事。
例えば、<nav>を使うと、VoiceOverなどの読みあげ機能で「ナビゲーション」って感じで読みあげてくれる。

あと、Webアクセシビリティのイベントで、「これ今後に期待！」みたいな要素もありました。
知らなかったのでメモ。

ダイアログ要素（`<dialog>`）

その名の通り、モーダルやダイアログ的意味合いのものに利用する。
一部のブラウザ（ChromeやEdge）しか利用できない。

<dialog>
    ダイアログメッセージが入ります
    <button type="button">閉じる</button>
</dialog>

詳細折りたたみ要素（`<datails>`）／概要明示要素（`<summary>`）

この2つの要素は一緒に利用する。

<details>
    <summary>質問が入ります</summary>
    <p>質問の答えが入ります</p>
</details>

<summary>要素をクリックすると、<details>要素の開閉状態を切り替える。
つまりは、JSとか使わずとも、トグルボックスみたいな実装ができる。
ただし、これも一部のブラウザ（ChromeやEdge）しか利用できない。

WAI-ARIAを利用したマークアップ

W3Cによって定められた仕様で、大きく3つある。

【Role】ランドマーク（目印。それがどういう役割なのか）を定義
【Property】性質を定義
【State】状態を定義

これを利用することで、よりセマンティックなマークアップを行うことが可能。
たとえば、<h1>をWAI-ARIAのルールに則って書くとこうなる。

 <div role="heading" aria-level="1">h1見出し</div>

WAI-ARIAロールについて

改めて、WAI-ARIAロールってのは、ランドマーク（目印）のこと。
「これは、このページ（サイト）ではこういう役割なんですよー」ってのを示すことができる。
role属性を指定することで、その要素が何の役割なのかが分かるが、HTML5には、このrole属性の意味合いが含まれているものがある。

HTML5要素	要素の説明
`<header>`	ロゴ、会社名、検索アイコン、スローガンなどを含めた要素群。 `role="banner"`と同じ意味を持つ。
`<footer>`	著作権情報、ナビゲーションリンク、個人情報保護方針など、サイトの最後に繰り返される情報。 `role="contentsinfo"`と同じ意味を持つ。
`<nav>`	ウェブサイトまたはページをナビゲートするために使用されるリンクの集まり。 `role="navigation"`と同じ意味を持つ。
`<main>`	メインコンテンツ。 `role="main"`と同じ意味を持つ。
`<aside>`	メインコンテンツに関連する補足情報。 `role="complementary"`と同じ意味を持つ。

WAI-ARIAを利用するにあたっての注意

WAI-ARIAを利用すれば、よりセマンティックなマークアップが可能だが、これは補助的に利用するものであり、ブラウザによっては未サポートなaria属性が存在する ¹ ため、既にネイティブなHTML要素・属性が存在している場合は、積極的にそれを利用することが推奨されている。

<!-- この書き方は非推奨 -->
<div role="banner">
    <div role="heading" aria-level="1">h1見出し</div>
</div>

<!-- 上記は、header要素／h1要素に置き換えることができるので、下記のように書くことができる -->
<header>
    <h1>h1見出し</h1>
</header>

例として、aria-labelledbyはIEでは未サポート。 ↩

【Webアクセシビリティ奮闘メモ】マークアップ編（超基礎）