できる限りのアリア。

アクセシブル

アクセシブルは「アクセスしやすい」という意味。
Webサイトのアクセシブル具合のことを「Webアクセシビリティ」と言って、Webコンテンツの「情報へのアクセスのしやすさ」のことを指します。
「情報にアクセスしやすい」状態とは、文字が読みやすくて、見分けやすい配色で、情報が整理されていて、すべての人にきちんと伝わるようデザインされている、ということ。
また、でんぱが悪くてもすばやくアクセスできたり、どんな端末（デバイス）でも正しく閲覧できたり、どんな状況でも手間なく操作できて、「すべての人が同じ感じに同じ情報をゲットできる」状態が望ましいです。

ブラウザはアクセシブル

実はブラウザは、マウスやタッチで操作する以外にも、キーボードだけでも操作できるし、スクリーンリーダーを使えば、Webコンテンツを音声で読み上げてもくれるし、点字ディスプレイに繋げば点字で出力もしてくれます。他にも、ブラウザを口や足や目の動きで操作する人のための「支援技術」が用意されていて、Webは、本当に“すべての人”が不便なく利用できる、優秀なメディアなんだなーって感じます。:)
しかもそれは、HTMLで素直にマークアップするだけで実装されるのだから、ブラウザってほんとすごいんです。

「素直にマークアップ」とは

その情報が持つ役割や意図に見合った「相応しいHTMLタグ」でマークアップすること。
例えば、そのページのメインコンテンツはmain要素にして、コラムやセクションはsection要素、タイトルならh1要素、段落ならp要素、強調したい単語やフレーズにはstrong要素やem要素を使ったり、ボタンにはbutton要素を使ったり、別ページへのリンクはa要素でhref属性を指定して、別サイトへのリンクにはtarget属性を指定したり、一覧はul要素、用語についての説明を箇条書きしたい時にはdl要素を使ったり……することです。

ブラウザは、「セマンティクスをしっかり明示する（コンテンツの意図がブラウザに伝わるように書く）」ようにすれば、スクリーンへの表示の仕方や、スクリーンリーダーの読み上げ方、マウスやキーボードで操作した時の反応を、意図した通りに実装してくれるんですね:)。HTMLを「マシンリーダブル」に書けば「アクセシブル」にも繋がるということです;)。マシンリーダぶればアクセシぶれるということです。

下サンプルは“素直なマークアップ”で作ったグローバルメニューです（別窓で開いてみてください）。
マウスやタッチ操作、キーボードやスクリーンリーダーでも操作できるのがわかります。

スクリーンリーダー（VoiceOver）の使い方

macOSならば、⌘＋F5を押せば、「VoiceOver」というスクリーンリーダーが使えます。（もう一回⌘＋F5を押せば終了します。）
VoiceOver利用中には以下のショートカットキーが使えます。

カーソルの位置からすべて読み上げ

control＋option＋A

すべて読み上げの一時停止/再生

control

次の項目へ進む

control＋option＋→

前の項目に戻る

control＋option＋←

ローターを表示する

control＋option＋U

ローターを閉じる

esc

control＋optionは、Caps Lockでも代用できます。

ローターは、Webページの内容を、分類ごとに俯瞰（ふかん）できるべんり機能。
下図のように、「ランドマーク」、「見出し」、「リンク」、「フォームコントロール」などの項目が索引（さくいん）されて、気になるコンテンツに素早くアクセスすることができます。

WAI-ARIA

「WAI（ウェイ）-ARIA（アリア）（以下、ARIA属性という）」は、素直なマークアップだけでは伝えることが難しい“UIの意図”をブラウザに正しく伝えるために、「HTMLのセマンティクスを補完する」ということをします。HTMLにある語彙だけでは伝えきれない思いを伝える、手助けしてくれる存在です。
セマンティクスを織り成す「役割（ロール）」と「プロパティと状態（ステート）」を、それぞれ、「role属性」と、「aria-**属性」を使って補完します。
role属性の値には、headingとかparagraphとかlinkとか、HTML要素の“役割”を決めるキーワードを指定します。
aria-**属性は、属性自体にaria-labelやaria-hiddenなど種類があって、値の指定の仕方もまちまちです。
キーワードにも指定する値にもすべて、事細かな決まりがあるので、詳しくは以下のページを参照のこと。

• Accessible Rich Internet Applications (WAI-ARIA) 1.2 日本語訳
• Supported States and Properties | Accessible Rich Internet Applications (WAI-ARIA) 1.0 日本語訳

そして、HTML要素にも、最初から暗黙的にセマンティクスが決まっています。<h1>の役割（ロール）はもともとheadingだし、<p>はparagraphで、<a href="">にはlinkという役割が、最初から決まっています。
なのでrole属性はよっぽどの時（ARIAにあってHTMLにない役割を伝えたい時）にしか使いません。
「UIのセマンティクスを補完する」という名目でARIA属性を利用する場合は、主にaria-**属性の方を使います。

HTML要素が最初から持ってる“暗黙的なセマンティクス”については、以下のページに事細かに載っています。

• ARIA in HTML 日本語訳

ここからは実際に、「とあるUI」のセマンティクスを補完してゆきます。
ここでは、Webサイトで割とよく見る、所謂（いわゆる）「ドロップダウンメニュー（カーソルを乗せると下層コンテンツへのリンクが現れるメニュー）」と、所謂「ドロワーメニュー（ボタンクリックで出したり隠したりできるグローバルメニュー）」を、できる限りアクセシブルにしてみます。
その前に、このUIの仕様と意図を解っておかないとです:)。

UIの仕様と意図

ドロップダウンメニューもドロワーメニューも、上サンプルのグローバルメニューを元に、ユーザビリティを底上げしたものを想定しています。上サンプルでは、メインページへのリンク（以下、メインリンクという）だけだったけれど、そこにさらに、下層ページへのリンク（以下、サブリンクという）も追加して、以下のように実装します。

ドロップダウンメニュー

メインリンクとサブリンクをいっぺんに表示するとヘッダーが盛（も）り盛（も）りになっちゃうので、サブリンクは隠しておいて、メインリンクにカーソルを乗せた時だけ表示されるようにします。

ドロワーメニュー

画面右上に固定した（三本線）ボタン（以下、ハンバーガーボタンという）をクリックすると、メニューが現れたり隠れたりするようにします。画面の右端から出たり入ったりするので、リンクはたて並びのレイアウトになります。

下層ページの存在も知らしめたいからサブリンクも載せる訳だけれど、サブリンクはメインリンクよりも控えめにレイアウトして、優劣を付けます。
また、サイト内のコンテンツを、メインリンクのタイトルで分類して、その内訳をサブリンクのタイトルで一覧することで、サイト全体を俯瞰できるようにする目的もあります。
グローバルメニューがサイトマップのような役割も担っている、欲張りナビゲーションの集大成です;)。

ひとまず、素直にマークアップしてみました！

レイアウトはレスポンシブに実装しているから、どんなデバイスでも問題なく表示されるはずです。
画面幅が広いデバイスでは「ドロップダウンメニュー」、画面幅が狭いデバイスでは「ドロワーメニュー」になるというわけです:)。
しかし、マウスやタッチでの操作を想定して作られているので、キーボード操作やスクリーンリーダーを使っての閲覧はからっきしです…:(。

補完、いってみましょう！

セマンティクス補完の手掛かり

とはいえ、どうすれば使いやすいのか基準がわからないと、どこをどうしたら良いのやら、さっぱり不安ですよね…。そんな時に確認するとよいのが以下のサイト。
ARIA属性の仕様や使用方法は事細かく決められていて、ここに詳しく指南されています。デザインパターンごとにサンプルが用意されているので、実装時のお手本になりますね。

• ARIA Authoring Practices Guide | APG | WAI | W3C

ただし、ここで紹介されているサンプルは、「ARIAを使って独自実装するとこんなに大変なんだよ」という例なので、全部が全部お手本通りにはしません。
あくまでARIA属性の使い処の参考として見ると良いです。
作りたいUIがお手本のサンプルのどれともマッチしない場合は、似たUIを組み合わせたり、アドリブを利かせて実装します。

この記事で実装するUIは、「ARIA Authoring Practices Guide」の中の、「Example Disclosure Navigation Menu with Top-Level Links」にとても近い感じがしますね。

「ディスクロージャ（開示）」という折りたたみ（非表示）と展開（表示）を可能にするパターンです。
ドロワーメニューも、このパターンに当てはまりそうです。
ともあれ、あくまでARIA属性の使い処だけ参考にして、作るUIの意図に沿って実装してゆくことになります。
ではいってみましょう！

キーボードを使って閲覧

前項のサンプルを、tabキーで、グローバルメニューを順にフォーカスしてゆくと、急にフォーカスがいなくなってしまうことがあります。どうやら、隠してるサブリンクにもフォーカスが移動してるみたいですね。
サブリンクにフォーカスした時にも、ドロップダウンすればよいでしょうか。

前項のサンプルでは:hover擬似クラスを使って、メインリンクにカーソルが乗った時にドロップダウンするようにしていたのだけれど、ここにさらに、:focus-within（フォーカス・ウィズイン）擬似クラスを使った指定も追加すれば、子要素にフォーカスしてる要素がある時にもドロップダウンするようになります。

/* カーソルを乗せたりフォーカスするとドロップダウンする */
@media (hover) {
	.l-header .nav_list li:hover .nav_sub,
	.l-header .nav_list li:focus-within .nav_sub {
		pointer-events: auto;
		clip-path: inset(0 -50vw);
	}
	.l-header .nav_list li:hover svg,
	.l-header .nav_list li:focus-within svg {
		color: #86c0de;
	}
}

フォーカスした時にも、メニューが展開するようになりました:)。

けどこれだと、UIの意図に背（そむ）いてる感じがしますね…。せっかく隠してるのに、tabキーでメインコンテンツに辿り着くまで、ぜんぶ開いて見てかなきゃいけないなんて本末転倒ですX(。
ドロップダウンは開きたい時に開くようにして、フォーカスするのはいま表示されている要素だけにした方が、理に適（かな）ってるはず！

a要素の中に入れてた（下向き矢印）を外に出して、新たにbutton要素として、a要素の隣に置きました。ドロップダウンの開閉は、このボタン（以下、ドロップダウンボタンという）の上でreturnキーを押下（おうか）して操作する手筈（てはず）です。
さらに、ドロップダウンの中のサブリンクにはtabindex属性を付けてフォーカスが移動しないようにしておきます。

<li>
	<a href="#company">企業情報</a>
	<button type="button"><svg width="8" height="8" viewBox="0 0 8 8" preserveAspectRatio="none"><title>ドロップダウン</title><path d="m7,1l-3,5.5L1,1" vector-effect="non-scaling-stroke"/></svg></button>
	<ul class="nav_sub">
		<li><a href="#" tabindex="-1">メッセージ</a></li>
		<li><a href="#" tabindex="-1">ビジョン</a></li>
		<li><a href="#" tabindex="-1">会社概要</a></li>
	</ul>
</li>

そして、ドロップダウンした時には、JavaScriptでtabIndexの値を切り替えて、フォーカスできるようにします。

dropdown(button) {
	button.isOpen = true;
	button.parentNode.classList.add('is-active');
	
	const subNav = button.parentNode.querySelector('.nav_sub');
	
	// タブ移動できるようにする
	for (const item of subNav.children) {
		item.firstChild.tabIndex = 0;
	}
	⋮
}

また、ドロワーが開いてる時に、ドロワーの外にフォーカスが移動してしまうと、フォーカス迷子の原因になりそうなので、ドロワーが開いてる時にはフォーカスをメニュー内から出さないようにします。
メニュー最後のリンク上でtabキーを押下した時は、ハンバーガーボタンへフォーカスを戻して、ハンバーガーボタン上でshift＋tabを押下した時には、最後のリンクへフォーカスさせます。

// フォーカスをメニューの中に閉じ込める
this.navToggle.addEventListener('keydown', (e) => {
	if (this.isOpen && e.shiftKey && e.code === 'Tab') {
		e.preventDefault();
		this.navList.lastElementChild.firstChild.focus();
	}
});
this.navList.lastElementChild.firstChild.addEventListener('keydown', (e) => {
	if (this.isOpen && !e.shiftKey && e.code === 'Tab') {
		e.preventDefault();
		this.navToggle.focus();
	}
});

キーボードでも、マウスと同じ感じで操作できるようになりましたね:D！

音声を聞きながら閲覧

上のサンプルを別窓で開いたらば、おもむろに⌘＋F5を押して「VoiceOver」を起動します。
tabキーでクリック可能な項目を移動してゆくと、以下のような感じに読み上げられます。

VoiceOverが言うように、ドロップダウンボタン上でcontrol＋option＋spaceを押せばドロップダウンしてtab移動できるようにもなるし、問題なさそう:)。

VoiceOverでは、control＋option＋→で、クリック可能に関わらず項目を読み進めることもできます。上と同じ範囲を読み進めると、以下のような感じに読み上げられます。

すごくぜんぶ読み上げてくれますね…！
しかも、tabキーの時と違い、ドロップダウンの中身まで読み上げられてしまいました…。

スクリーンリーダーが読み上げる内容は「アクセシビリティツリー」で確認することができます。
アクセシビリティツリーは、スクリーンリーダーなどの支援技術で使用される筋書き（プロット）のようなもの。
ブラウザは、HTMLやCSS、JavaScriptによって生成されたWebページの内容を解析して、伝えるべき内容（シナリオ）を組み立ててくれてるんです。

アクセシビリティツリーについて詳しくは下記ページを参照のこと。

• Accessibility tree (アクセシビリティツリー) - MDN Web Docs 用語集: ウェブ関連用語の定義 | MDN

HTMLやCSS、JavaScriptだけでは、伝えきれないUIの意図を補完してくれる役割を担うのがARIA属性です。ARIA属性で指定した値は、アクセシビリティツリーに影響を与えます。ブラウザが組み立てる筋書きを、意図して変えることができるんですね:D。
例えば、tabindex属性では伝えきれなかった「隠しているということ」は、aria-hidden属性で伝えることができます。
ARIA属性を指定すれば、スクリーンリーダーでの読み上げに、ドロップダウンメニューの表示/非表示の状態を反映することができるってわけです;)！

上サンプルでブラウザに伝わっていなかった、「サブリンクを隠していること」、「ドロップダウンボタンで開閉できること」、「画面幅が狭い時はメニューが隠れること」、「ハンバーガーボタンで開閉できること」。
この4つの想いをブラウザに伝えるために使うARIA属性は以下の通り。

前述でaria-**属性は「プロパティと状態」を補完するのだけれど、上の4つの中では、aria-controlsとaria-labelは「プロパティ」を補完します。
「プロパティ」は、資産とか特性とか効能とかいう意味を持つ言葉で、aria-controlsはその要素に「どの要素を制御するのか」という効能を付与して、aria-labelはその要素に「その名前で読まれる」という特性を付与している感じ。

一方、aria-expandedとaria-hiddenは「状態」を補完します。
その要素が隠れたり現れたりするたびに、要素の状態は変化するので、逐一ブラウザに状態の変化を報告しないといけません。UIを操作するたびに、JavaScriptで属性の値を書き換える必要があるんです。
そんな理由（わけ）で、ARIA属性は、最初からJavaScriptで付けてゆきます:D。

ariaInit() {
	this.navToggle.setAttribute('aria-controls', 'nav');
	this.navToggle.ariaLabel = 'メインメニュー';
	this.navToggle.ariaExpanded = false;
	
	this.navList.id = 'nav';
	this.navList.ariaLabel = 'メニュー';
	this.navList.ariaHidden = true;
	⋮

	⋮
	let count = 0;
	for (const item of this.navList.children) {
		if (item.querySelector('button') !== null) {
			const main = item.querySelector('a');
			const button = item.querySelector('button');
			const subNav = item.querySelector('.nav_sub');
			count++;
			
			button.setAttribute('aria-controls', `sub-${count}`);
			button.ariaLabel = `${main.textContent}のメニュー`;
			button.ariaExpanded = false;
			
			subNav.id = `sub-${count}`;
			subNav.ariaLabel = `${main.textContent}`;
			subNav.ariaHidden = true;
		}
	}
}

あとは、ドロワーメニュー、ドロップダウンメニューの開閉時に、aria-expanded属性とaria-hidden属性の値を書き換えます。

open() {
	⋮
	this.navToggle.ariaExpanded = true;
	this.navList.ariaHidden = false;
	⋮
}
close(anim) {
	⋮
	this.navToggle.ariaExpanded = false;
	this.navList.ariaHidden = true;
	⋮
}

dropdown(button) {
	button.isOpen = true;
	button.parentNode.classList.add('is-active');
	button.ariaExpanded = true;
	⋮
	subNav.ariaHidden = false;
	⋮
}
dropup(button) {
	button.isOpen = false;
	button.parentNode.classList.remove('is-active');
	button.ariaExpanded = false;
	⋮
	subNav.ariaHidden = true;
	⋮
}

スクリーンリーダー（VoiceOver）でも、UIの意図を汲んだ感じで操作できるようになりました;D！