ブログ

ドロップダウンメニューを段階的にアクセシブルにする：「動けばいい」からの脱却

2025.12.04

この記事ではクリックで開閉するドロップダウンメニューを「動けばいい」実装から、アクセシブルな実装へと段階的に改善していく過程を解説しています。

筆者自身がアクセシビリティを学ぶ過程で感じた「どこから手をつければいいのか」「なぜこの対応が必要なのか」といった疑問に応えられるよう、各ステップでの考え方と実装方法をコードレベルで記述しました。

本記事のコードは筆者の観点と判断で改善したものであり、正式なWEBアクセシビリティ診断において合格したものではありません。あらかじめご了承ください。

Step 1: 最小限の実装（動けばいい版）

まずは「とりあえず動く」最小限のドロップダウンメニューを作成してみます。以下のデモはマウスでクリックすれば問題なく動作しますが、ユーザビリティとアクセシビリティの観点では多くの問題を抱えています。

左にロゴ、右にグローバルメニューが配置された、よく見かけるヘッダーレイアウトです。三角形のアイコンがある「メニューB」と「メニューC」が、クリックで展開するドロップダウンメニューになっています。

ドロップダウンメニューのHTMLの次のとおりです。

1
<li class="l-header__nav-item c-dropdown js-dropdown">
2
  <div class="l-header__nav-text c-dropdown__toggle" data-dropdown="toggle">
3
    <span class="c-dropdown__toggle-text">メニューB</span>
4
  </div>
5
  <div class="c-dropdown__menu" data-dropdown="menu">
6
    <div class="c-dropdown__inner">
7
      <ul class="c-dropdown__list">
8
        <li class="c-dropdown__item"><a href="/">子メニューB-1</a></li>
9
        <li class="c-dropdown__item"><a href="/">子メニューB-2</a></li>
10
        <li class="c-dropdown__item"><a href="/">子メニューB-3</a></li>
11
        <li class="c-dropdown__item"><a href="/">子メニューB-4</a></li>
12
      </ul>
13
    </div>
14
  </div>
15
</li>

ヘッダーで表示されるトグルボタンと、そのボタンをクリックした際に展開されるサブメニューをそれぞれ設置しています。

JavaScriptのコードは次の通りです。

1
const initDropdown = () => {
2
  const dropdownItems = document.querySelectorAll(".js-dropdown");
3

4
  dropdownItems.forEach((dropdown) => {
5
    const toggle = dropdown.querySelector('[data-dropdown="toggle"]');
6
    const menu = dropdown.querySelector('[data-dropdown="menu"]');
7

8
    toggle.addEventListener("click", () => {
9
      toggle.classList.toggle("is-active");
10
      menu.classList.toggle("is-open");
11
    });
12
  });
13
};
14

15
document.addEventListener("DOMContentLoaded", initDropdown);

わずか15行のコードで、一見問題なく動作するドロップダウンメニューが完成しました。ボタンクリック時にトグルボタンにis-activeクラス、サブメニューにis-openクラスを付与することで開閉を実現しています。

CSSでは、これらのクラスに応じてスタイルを切り替えています。

1
// トグルボタンの三角アイコンを回転
2
.c-dropdown__toggle {
3
  --_toggle-angle: 0; // 下向きの状態
4
}
5

6
.c-dropdown__toggle-text::before {
7
  content: "";
8
  width: 10px;
9
  height: 5px;
10
  clip-path: polygon(0 0, 50% 100%, 100% 0);
11
  background-color: currentColor;
12
  position: absolute;
13
  top: 50%;
14
  right: 0;
15
  transform: translateY(-50%) rotate(var(--_toggle-angle));
16
  transition: transform 0.3s;
17
}
18

19
.c-dropdown__toggle.is-active {
20
  --_toggle-angle: 180deg; // 上向きに変化
21
}
22

23
// サブメニューの表示/非表示
24
.c-dropdown__menu {
25
  display: grid;
26
  grid-template-rows: 0fr; // 閉じている状態
27
  transition: grid-template-rows 0.4s ease-out;
28
}
29

30
.c-dropdown__menu.is-open {
31
  grid-template-rows: 1fr; // 開いている状態
32
}

動作を確認する

実際に上記のデモで以下を試してみてください。

メニューBをクリック：サブメニューが表示される ✅
続けてメニューCをクリック：メニューBは開いたまま、メニューCも開く ❌
Tabキーを押す：ドロップダウンメニューのボタンにフォーカスできない ❌
さらにTabキーを押す：非表示のサブメニューにフォーカスが当たる ❌
Escキーを押す：何も起こらない ❌

マウスでクリックして開く分には問題ありませんが、実際に使ってみると不便なことが分かります。

この実装の問題点

ユーザビリティとアクセシビリティの観点から、以下のような問題があると考えます。

問題点	詳細
排他制御が機能していない	複数のメニューを同時に開けてしまい、画面が散らかる。
キーボード操作への対応が不十分	ドロップダウンメニューのボタンにTabキーでフォーカスできない。非表示のサブメニュー内の要素にもTabキーでフォーカスできてしまう（tabIndex制御がない）。 Escキーでサブメニューを閉じられない。
スクリーンリーダーでの読み上げへの対応が不十分	スクリーンリーダーのユーザーに、ボタンの役割が伝わらない。スクリーンリーダーのユーザーに、メニューの開閉状態が伝わらない。
その他のユーザビリティ向上機能がない	スクロールした際にメニューが閉じない。他の要素にフォーカスが移ってもメニューが閉じない。

この記事ではこれらの問題を、段階的に解決していきたいと思います。

Step 2: 排他制御の追加

まずは使いやすさを改善するために、排他制御を導入します。

現在の実装では、メニューBを開いた後にメニューCをクリックすると、両方のメニューが同時に表示されてしまいます。さらに、メニューCがメニューBに少し重なって表示され、見づらくなっています。

上の動画のように、複数のメニューが重なって表示されると使いにくいと思います。

サブメニューの表示は一つに限定した方が自然だと思うので、メニューをクリックしたらその他のメニューは閉じる処理を追加していきます。

JavaScriptにcloseOthers関数を追加します。この関数は、クリックされたドロップダウンメニュー以外のすべてのメニューを閉じる処理を行います。具体的には、他のメニューのトグルからis-activeクラスを、メニュー本体からis-openクラスを削除します。

1
const initDropdown = () => {
2
  const dropdownItems = document.querySelectorAll(".js-dropdown");
3

4
  // 他のメニューを閉じる関数
5
  const closeOthers = (current) => {
6
    dropdownItems.forEach((dropdown) => {
7
      if (dropdown !== current) {
8
        const toggle = dropdown.querySelector('[data-dropdown="toggle"]');
9
        const menu = dropdown.querySelector('[data-dropdown="menu"]');
10
        if (!toggle || !menu) return;
11

12
        toggle.classList.remove("is-active");
13
        menu.classList.remove("is-open");
14
      }
15
    });
16
  };
17

18
  // ドロップダウンメニュークリック時の処理
19
  dropdownItems.forEach((dropdown) => {
20
    const toggle = dropdown.querySelector('[data-dropdown="toggle"]');
21
    const menu = dropdown.querySelector('[data-dropdown="menu"]');
22

23
    toggle.addEventListener("click", () => {
24
      closeOthers(dropdown);
25

26
      toggle.classList.toggle("is-active");
27
      menu.classList.toggle("is-open");
28
    });
29
  });
30
};
31

32
document.addEventListener("DOMContentLoaded", initDropdown);

下の動画のように、メニューBを開いた後にメニューCをクリックすると、メニューBが自動的に閉じるようになりました。またその逆も確認できます。

これで、常に1つのメニューだけが表示されるようになり、サブメニューの重なりが解消されました。

↓ここまでのコードとデモです。

Step 3: キーボード操作への対応

次にキーボードでも問題なく操作できるようにしていきます。現状ではクリック（タップ）で操作可能なことが確認できますが、キーボード操作への対応は不十分です。

適切なフォーカス管理

現状では次の動画のように、「メニューB」と「メニューC」にうまくフォーカスが移りません。

動画では少しわかりにくいですが、ロゴ → メニューA → 子メニューB-1から子メニューB-4 → 子メニューC-1から子メニューC-4 → メニューDの順番にフォーカスが移動しています。

つまり次の2つの問題があることがわかります。

ドロップダウンメニューのトグルボタンにフォーカスが当たらない
非表示のサブメニュー内の要素にフォーカスが当たる

これらの問題を解決してきます。

トグルボタンにフォーカスが当たるようにする

トグルボタンにフォーカスがあたらない原因は明確です。トグルボタンをdivでマークアップしているからです。

divタグからより適切なbuttonタグへと変更します。

1
<li class="l-header__nav-item c-dropdown js-dropdown">
2
  <button class="l-header__nav-text c-dropdown__toggle" data-dropdown="toggle">
3
    <span class="c-dropdown__toggle-text">メニューB</span>
4
  </button>
5
  <div class="c-dropdown__menu" data-dropdown="menu">
6
    <div class="c-dropdown__inner">
7
      <ul class="c-dropdown__list">
8
        <li class="c-dropdown__item"><a href="/">子メニューB-1</a></li>
9
        <li class="c-dropdown__item"><a href="/">子メニューB-2</a></li>
10
        <li class="c-dropdown__item"><a href="/">子メニューB-3</a></li>
11
        <li class="c-dropdown__item"><a href="/">子メニューB-4</a></li>
12
      </ul>
13
    </div>
14
  </div>
15
</li>

すると次の動画のように「メニューB」と「メニューC」にもフォーカスが移動するようになりました。

またbuttonに変更することで、スペースキーまたはエンターキーを押すことでメニューが展開するようになりました。

フォーカスの動作には関係しませんが、buttonタグのユーザーエージェントのスタイルを打ち消すため、以下のCSSを追加しています。

1
button {
2
  padding: 0;
3
  border: none;
4
  font: inherit;
5
  color: inherit;
6
  background: none;
7
  touch-action: manipulation;
8
}

非表示のサブメニュー内の要素にフォーカスがあたらないようにする

現状では展開していないドロップダウンメニューの内のリンク要素（子メニューB-1など）へもフォーカスが移動してしまいます。これは不自然な動きで混乱を招きかねないため改善します。ここではtabindex属性を操作します。

tabindex属性を操作するためのupdateTabIndex関数を追加します（22-27行目）。この関数ではサブメニューと真偽値を引数として受け取り、真偽値に応じてサブメニュー内のリンク要素のtabindex属性を動的に変化させています。それぞれ適切な箇所でupdateTabIndex関数を実行します（16, 35, 44行目）。

1
const initDropdown = () => {
2
  const dropdownItems = document.querySelectorAll(".js-dropdown");
3

4
  // 他のメニューを閉じる関数
5
  const closeOthers = (current) => {
6
    dropdownItems.forEach((dropdown) => {
7
      if (dropdown !== current) {
8
        const toggle = dropdown.querySelector('[data-dropdown="toggle"]');
9
        const menu = dropdown.querySelector('[data-dropdown="menu"]');
10
        if (!toggle || !menu) return;
11

12
        toggle.classList.remove("is-active");
13
        menu.classList.remove("is-open");
14

15
        // 他のメニューを閉じる時にtabIndexを-1に
16
        updateTabIndex(menu, true);
17
      }
18
    });
19
  };
20

21
  // tabIndexを制御する関数
22
  const updateTabIndex = (menu, isHidden) => {
23
    const links = menu.querySelectorAll("a");
24
    links.forEach((link) => {
25
      link.tabIndex = isHidden ? -1 : 0;
26
    });
27
  };
28

29
  // ドロップダウンメニュークリック時の処理
30
  dropdownItems.forEach((dropdown) => {
31
    const toggle = dropdown.querySelector('[data-dropdown="toggle"]');
32
    const menu = dropdown.querySelector('[data-dropdown="menu"]');
33

34
    // 初期状態でtabIndexを-1に設定
35
    updateTabIndex(menu, true);
36

37
    toggle.addEventListener("click", () => {
38
      closeOthers(dropdown);
39

40
      const isOpen = toggle.classList.toggle("is-active");
41
      menu.classList.toggle("is-open");
42

43
      // 開閉に応じてtabIndexを更新
44
      updateTabIndex(menu, !isOpen);
45
    });
46
  });
47
};
48

49
document.addEventListener("DOMContentLoaded", initDropdown);

tabindex="-1"の要素はTabキーでのフォーカス移動の対象外になるので、以下のように状態に応じて変化させています。

状態	tabindex属性
初期状態（非表示）	全てのサブメニュー内のリンク： -1
メニューBを開く	メニューBのリンク： 0
メニューCを開く	メニューBのリンク： -1 メニューCのリンク： 0
メニューCを閉じる	メニューCのリンク： -1

動きを確認すると次の動画のように、ロゴ → メニューA → メニューB → メニューC → メニューDへとスムーズにフォーカスが移動するようになりました。

またドロップダウンメニュー展開時にはサブメニュー内のリンク要素にフォーカスで移動できることが確認できます。

これで、Tabキーでの移動が自然になりました。↓ここまでのコードとデモです。

Escキーでメニューを閉じる

現状ではメニュー展開時にEscキーを押下しても変化は起きません。Escキー押下でメニューを閉じる方が自然だと思うので、その機能を実装します。

JavaScriptを次のように変更します。

1
const initDropdown = () => {
2
  const dropdownItems = document.querySelectorAll(".js-dropdown");
3

4
  // 他のメニューを閉じる関数
5
  const closeOthers = (current) => {
6
    dropdownItems.forEach((dropdown) => {
7
      if (dropdown !== current) {
8
        const toggle = dropdown.querySelector('[data-dropdown="toggle"]');
9
        const menu = dropdown.querySelector('[data-dropdown="menu"]');
10
        if (!toggle || !menu) return;
11

12
        toggle.classList.remove("is-active");
13
        menu.classList.remove("is-open");
14

15
        updateTabIndex(menu, true);
16
      }
17
    });
18
  };
19

20
  // tabIndexを制御する関数
21
  const updateTabIndex = (menu, isHidden) => {
22
    const links = menu.querySelectorAll("a");
23
    links.forEach((link) => {
24
      link.tabIndex = isHidden ? -1 : 0;
25
    });
26
  };
27

28
  // Escキー押下時の処理
29
  const onKeydownEsc = (e) => {
30
    if (e.key === "Escape") {
31
      const activeToggle = document.querySelector(
32
        '[data-dropdown="toggle"].is-active'
33
      );
34
      closeAll();
35
      if (activeToggle) activeToggle.focus();
36
    }
37
  };
38

39
  // すべてのメニューを閉じる関数
40
  const closeAll = () => {
41
    dropdownItems.forEach((dropdown) => {
42
      const toggle = dropdown.querySelector('[data-dropdown="toggle"]');
43
      const menu = dropdown.querySelector('[data-dropdown="menu"]');
44
      if (!toggle || !menu) return;
45

46
      toggle.classList.remove("is-active");
47
      menu.classList.remove("is-open");
48

49
      updateTabIndex(menu, true);
50
    });
51
  };
52

53
  // ドロップダウンメニュークリック時の処理
54
  dropdownItems.forEach((dropdown) => {
55
    const toggle = dropdown.querySelector('[data-dropdown="toggle"]');
56
    const menu = dropdown.querySelector('[data-dropdown="menu"]');
57

58
    updateTabIndex(menu, true);
59

60
    toggle.addEventListener("click", () => {
61
      closeOthers(dropdown);
62

63
      const isOpen = toggle.classList.toggle("is-active");
64
      menu.classList.toggle("is-open");
65

66
      updateTabIndex(menu, !isOpen);
67
    });
68
  });
69

70
  // Escキーのイベントリスナーをdocumentに登録
71
  document.addEventListener("keydown", onKeydownEsc);
72
};
73

74
document.addEventListener("DOMContentLoaded", initDropdown);

Escキー押下時の処理を定義したonKeydownEsc関数を追加します（29-37行目）。この関数では、Escキーが押されたときに全てのメニューを閉じ、閉じる前に開いていたメニューのトグルボタンにフォーカスを戻します。これにより、ユーザーは現在どこにいるのかを見失わずに済みます。

またonKeydownEsc関数の中で使用する、closeAll関数を追加します（40-51行目）。この関数は、すべてのドロップダウンメニューからアクティブなクラスを削除し、各メニュー内のリンクのtabindexを-1に設定します。これにより、すべてのメニューが確実に閉じた状態になります。

最後にkeydownでonKeydownEsc関数が実行されるようにイベントリスナーを設定します（71行目）。

以上のJavaScriptを適用すると次の動画のように、Escキー押下でメニューが閉じるようになります。またメニューが閉じた際にフォーカスがトグルボタンに移動していることが確認できます。

これで、キーボードでの基本的な操作に対応できました。次はスクリーンリーダーユーザーのために、読み上げを改善していきます。

↓ここまでのコードとデモです。

Step 4: スクリーンリーダーによる読み上げへの対応

現在の実装ではスクリーンリーダーで「メニューB」へと移動すると以下のように「メニューB、ボタン」と読み上げられます（※読み上げの確認にはmacOSのVoiceOverを使用しています）。

「ボタン」と読み上げられるので押すことができるのはわかりますが、押すとどのようなアクションが発生するのが不明です。モーダルが開くのか、ページが遷移するのか、それともフォームが送信されるのか何もわからない状況です。親切な説明とは言えませんので改善してきます。

ボタンの役割を伝える

まずはボタンがどのような役割を持っているのかを伝えられるようにします。

ドロップダウンメニューのHTMLを次のように変更します。

1
<li class="l-header__nav-item c-dropdown js-dropdown">
2
  <button class="l-header__nav-text c-dropdown__toggle" data-dropdown="toggle" aria-haspopup="true">
3
    <span class="c-dropdown__toggle-text">メニューB</span>
4
  </button>
5
  <div class="c-dropdown__menu" data-dropdown="menu">
6
    <div class="c-dropdown__inner">
7
      <ul class="c-dropdown__list">
8
        <li class="c-dropdown__item"><a href="/">子メニューB-1</a></li>
9
        <li class="c-dropdown__item"><a href="/">子メニューB-2</a></li>
10
        <li class="c-dropdown__item"><a href="/">子メニューB-3</a></li>
11
        <li class="c-dropdown__item"><a href="/">子メニューB-4</a></li>
12
      </ul>
13
    </div>
14
  </div>
15
</li>

buttonタグにaria-haspopup="true"を追加します。すると先ほどと違って次のように「メニューB、メニューポップアップ、ボタン」と読み上げられるようになりました。

スクリーンリーダーでメニューB、メニューポップアップ、ボタンと読み上げられたスクリーンショット

aria-haspopup属性は、このボタンを押すと何か（メニューやダイアログなど）がポップアップすることを伝える役割があります。trueの他にもmenu、dialogなどの値を指定できますが、ここでは下層メニューがあることを伝えるだけなのでシンプルにtrueを使用しています。

これで「展開すればメニューが表示されるボタン」であることが認識できるようになりました。

ボタンの開閉状態を伝える

ボタンの役割を伝えられるようになりましたが、現在開いているのか閉じているのかの状態がわからない状況です。ボタンの状態を伝えるためにaria-expanded属性を追加します。

1
<li class="l-header__nav-item c-dropdown js-dropdown">
2
  <button class="l-header__nav-text c-dropdown__toggle" data-dropdown="toggle" aria-haspopup="true" aria-expanded="false">
3
    <span class="c-dropdown__toggle-text">メニューB</span>
4
  </button>
5
  <div class="c-dropdown__menu" data-dropdown="menu">
6
    <div class="c-dropdown__inner">
7
      <ul class="c-dropdown__list">
8
        <li class="c-dropdown__item"><a href="/">子メニューB-1</a></li>
9
        <li class="c-dropdown__item"><a href="/">子メニューB-2</a></li>
10
        <li class="c-dropdown__item"><a href="/">子メニューB-3</a></li>
11
        <li class="c-dropdown__item"><a href="/">子メニューB-4</a></li>
12
      </ul>
13
    </div>
14
  </div>
15
</li>

これで次のように「メニューB、メニューポップアップ下位項目が折りたたまれました、ボタン」と表示され、現在ポップアップが閉じていることがわかるようになりました。

スクリーンリーダーでメニューB、メニューポップアップ下位項目が折りたたまれました、ボタンと読み上げられたスクリーンショット

aria-expanded="false"によって下位項目の状態を認識できるようになりましたが、このままではずっと閉じた状態が伝えられるので、aria-expandedの値を動的に変化させます。

JavaScriptを次のように変更します。

1
const initDropdown = () => {
2
  const dropdownItems = document.querySelectorAll(".js-dropdown");
3

4
  // 他のメニューを閉じる関数
5
  const closeOthers = (current) => {
6
    dropdownItems.forEach((dropdown) => {
7
      if (dropdown !== current) {
8
        const toggle = dropdown.querySelector('[data-dropdown="toggle"]');
9
        const menu = dropdown.querySelector('[data-dropdown="menu"]');
10
        if (!toggle || !menu) return;
11

12
        toggle.classList.remove("is-active");
13
        toggle.setAttribute("aria-expanded", "false");
14
        menu.classList.remove("is-open");
15

16
        updateTabIndex(menu, true);
17
      }
18
    });
19
  };
20

21
  // tabIndexを制御する関数
22
  const updateTabIndex = (menu, isHidden) => {
23
    const links = menu.querySelectorAll("a");
24
    links.forEach((link) => {
25
      link.tabIndex = isHidden ? -1 : 0;
26
    });
27
  };
28

29
  // Escキー押下時の処理
30
  const onKeydownEsc = (e) => {
31
    if (e.key === "Escape") {
32
      const activeToggle = document.querySelector(
33
        '[data-dropdown="toggle"].is-active'
34
      );
35
      const activeToggle = document.querySelector(
36
        '[data-dropdown="toggle"][aria-expanded="true"]'
37
      );
38
      closeAll();
39
      if (activeToggle) activeToggle.focus();
40
    }
41
  };
42

43
  // すべてのメニューを閉じる関数
44
  const closeAll = () => {
45
    dropdownItems.forEach((dropdown) => {
46
      const toggle = dropdown.querySelector('[data-dropdown="toggle"]');
47
      const menu = dropdown.querySelector('[data-dropdown="menu"]');
48
      if (!toggle || !menu) return;
49

50
      toggle.classList.remove("is-active");
51
      toggle.setAttribute("aria-expanded", "false");
52
      menu.classList.remove("is-open");
53

54
      updateTabIndex(menu, true);
55
    });
56
  };
57

58
  // ドロップダウンメニュークリック時の処理
59
  dropdownItems.forEach((dropdown) => {
60
    const toggle = dropdown.querySelector('[data-dropdown="toggle"]');
61
    const menu = dropdown.querySelector('[data-dropdown="menu"]');
62

63
    updateTabIndex(menu, true);
64

65

66
   toggle.addEventListener("click", () => {
67
      closeOthers(dropdown);
68

69
      // 現在の aria-expanded の値を取得
70
      const expanded = toggle.getAttribute("aria-expanded") === "true";
71
      // 現在の値と逆の状態（次の状態）を算出
72
      const willExpand = !expanded;
73
      // aria-expanded を次の状態に更新
74
      toggle.setAttribute("aria-expanded", willExpand);
75
      // willExpand（次の状態）に応じてクラスを付け外し
76
      menu.classList.toggle("is-open", willExpand);
77

78
      // 第二引数に willExpand の反対のbooleanを渡す
79
      updateTabIndex(menu, !willExpand);
80
    });
81
  });
82

83
  // Escキーのイベントリスナーをdocumentに登録
84
  document.addEventListener("keydown", onKeydownEsc);
85
};
86

87
document.addEventListener("DOMContentLoaded", initDropdown);

69-79行目では、クリック時の処理をaria-expanded属性ベースに変更しています。現在のaria-expandedの値を取得し、その反対の状態に更新することで、開閉を切り替えています。updateTabIndex関数も、このaria-expandedの値に基づいて動作するよう変更しました。

これまではトグルの状態管理にはis-activeクラスを使用していましたが、それらを全てaria-expanded属性に変更しています（13、36、51行目）。

これでスクリーンリーダーの読み上げもメニューの状態に応じて変化するようになりました。開いている状態では次のように「メニューB、メニューポップアップ字間広く、ボタン」と読み上げられます。

スクリーンリーダーでメニューB、メニューポップアップ字間広く、ボタンと読み上げられたスクリーンショット

「下位項目が表示されました」の方がストレートでわかりやすいですが、「字間広く」と読み上げられるのはVoiceOverの日本語訳の問題のようです（英語では”expanded”と読み上げられます）。スクリーンリーダーによって表現は異なりますが、メニューが展開していることが認識できるようになりました。

CSSもis-activeクラスからaria-expanded属性ベースに変更します。これにより、aria属性が真の状態管理となり、CSSもその状態に基づいてスタイルを適用するようになります。

1
// アクティブ時
2
.c-dropdown__toggle.is-active {
3
  --_toggle-angle: 180deg;
4
}
5

6
.c-dropdown__toggle[aria-expanded="true"] {
7
  --_toggle-angle: 180deg;
8
}

↓ここまでのコードとデモです。残念ながらCodePenはスクリーンリーダーでの読み上げ対象外のようです。

サブメニューの読み上げをコントロールする

トグルボタンの読み上げは改善できましたが、サブメニューの読み上げにはまだ課題があります。

メニューBが閉じている状態で読み上げを一つ次へ進めると、以下のように「リスト4項目、レベル2」と読み上げられます。このリスト4項目とは子メニューB-1〜子メニューB-4を指します。メニューBが閉じている状態では、これらのサブメニューをアクセシビリティツリーから非表示にするべきです。

要素の読み上げを制御するために、サブメニューの親要素にaria-hidden属性を追加します。初期値はtrueで、要素が読み上げられないようにします。

1
<li class="l-header__nav-item c-dropdown js-dropdown">
2
  <button class="l-header__nav-text c-dropdown__toggle" data-dropdown="toggle" aria-haspopup="true"
3
    aria-expanded="false">
4
    <span class="c-dropdown__toggle-text">メニューB</span>
5
  </button>
6
  <div class="c-dropdown__menu" data-dropdown="menu" aria-hidden="true">
7
    <div class="c-dropdown__inner">
8
      <ul class="c-dropdown__list">
9
        <li class="c-dropdown__item"><a href="/">子メニューB-1</a></li>
10
        <li class="c-dropdown__item"><a href="/">子メニューB-2</a></li>
11
        <li class="c-dropdown__item"><a href="/">子メニューB-3</a></li>
12
        <li class="c-dropdown__item"><a href="/">子メニューB-4</a></li>
13
      </ul>
14
    </div>
15
  </div>
16
</li>

メニューBが閉じている状態で読み上げを次へ進めると、以下のように「４の３」と読み上げられるようになりました。４の３とはグローバルメニューの「メニューC」を指します。サブメニューが読み上げ対象外になっていることを確認できます。

それでは次にaria-expandedと同じように、aria-hiddenの値もメニューの開閉状態に合わせて動的に変化するようにします。

JavaScriptを次のように変更します。

1
const initDropdown = () => {
2
  const dropdownItems = document.querySelectorAll(".js-dropdown");
3

4
  // 他のメニューを閉じる関数
5
  const closeOthers = (current) => {
6
    dropdownItems.forEach((dropdown) => {
7
      if (dropdown !== current) {
8
        const toggle = dropdown.querySelector('[data-dropdown="toggle"]');
9
        const menu = dropdown.querySelector('[data-dropdown="menu"]');
10
        if (!toggle || !menu) return;
11

12
        toggle.setAttribute("aria-expanded", "false");
13
        menu.classList.remove("is-open");
14
        menu.setAttribute("aria-hidden", "true");
15

16
        updateTabIndex(menu, true);
17
      }
18
    });
19
  };
20

21
  // 中略
22

23
  // すべてのメニューを閉じる関数
24
  const closeAll = () => {
25
    dropdownItems.forEach((dropdown) => {
26
      const toggle = dropdown.querySelector('[data-dropdown="toggle"]');
27
      const menu = dropdown.querySelector('[data-dropdown="menu"]');
28
      if (!toggle || !menu) return;
29

30
      toggle.setAttribute("aria-expanded", "false");
31
      menu.classList.remove("is-open");
32
      menu.setAttribute("aria-hidden", "true");
33

34
      updateTabIndex(menu, true);
35
    });
36
  };
37

38
  // ドロップダウンメニュークリック時の処理
39
  dropdownItems.forEach((dropdown) => {
40
    const toggle = dropdown.querySelector('[data-dropdown="toggle"]');
41
    const menu = dropdown.querySelector('[data-dropdown="menu"]');
42

43
    updateTabIndex(menu, true);
44

45
    toggle.addEventListener("click", () => {
46
      closeOthers(dropdown);
47

48
      const expanded = toggle.getAttribute("aria-expanded") === "true";
49
      const willExpand = !expanded;
50
      toggle.setAttribute("aria-expanded", willExpand);
51
      menu.classList.toggle("is-open", willExpand);
52
      menu.setAttribute("aria-hidden", expanded);
53

54
      updateTabIndex(menu, !willExpand);
55
    });
56
  });
57

58
  // Escキーのイベントリスナーをdocumentに登録
59
  document.addEventListener("keydown", onKeydownEsc);
60
};
61

62
document.addEventListener("DOMContentLoaded", initDropdown);

これまではサブメニューの状態管理にはis-openクラスを使用していましたが、それらを全てaria-hidden属性に変更します（14、32、52行目）。

52行目では、aria-hiddenにexpanded（開閉前の状態）を渡すことで、aria-expandedとは逆の値になるようにしています。つまり、メニューが開く時にはaria-hidden="false"となり、閉じる時にはaria-hidden="true"となります。

aria-expandedとaria-hiddenの関係性をまとめると次のようになります。トグルボタンとサブメニューで、常に逆の状態を保ちます。

現在のドロップダウンの状態	aria-expanded（トグルボタン）	aria-hidden（サブメニュー）
閉じている	false	true
開いている	true	false

CSSもis-openクラスからaria-hidden属性ベースに変更します。

1
// アクティブ時
2
.c-dropdown__menu.is-open {
3
  grid-template-rows: 1fr;
4
}
5

6
.c-dropdown__menu[aria-hidden="false"] {
7
  grid-template-rows: 1fr;
8
}

以上でサブメニューの読み上げのコントロールは完了です。

メニューBが「閉じている」時に次へ進める → 「４の３」（メニューCに移動）
メニューBが「開いている」時に次へ進める → 「リスト4項目、レベル2」（子メニューに移動）

これで、メニューの状態に応じて適切な読み上げがされるようになりました。

↓ここまでのコードとデモです。

要素を関連づける

次にトグルボタンとサブメニューの紐付けを行います。

現在の状況ではメニューBがどのコンテンツを制御できるのか識別できない状況です。aria-controlsを使用して関連性を明示していきます。

HTMLに直書きでも問題ないのですが、コピペ漏れやID重複のリスクを考慮して、JavaScriptで自動的に設定するようにします。JavaScriptを次のように変更します。

1
const initDropdown = () => {
2
  const dropdownItems = document.querySelectorAll(".js-dropdown");
3

4
  // 中略
5

6
  // aria初期化
7
  const initAria = (toggle, menu) => {
8
    if (!menu.id) {
9
      const id = `dropdown-${Math.random().toString(36).slice(2, 9)}`;
10
      menu.id = id;
11
    }
12

13
    toggle.setAttribute("aria-controls", menu.id);
14
  };
15

16
  // ドロップダウンメニュークリック時の処理
17
  dropdownItems.forEach((dropdown) => {
18
    const toggle = dropdown.querySelector('[data-dropdown="toggle"]');
19
    const menu = dropdown.querySelector('[data-dropdown="menu"]');
20

21
    updateTabIndex(menu, true);
22
    initAria(toggle, menu);
23

24
    toggle.addEventListener("click", () => {
25
      closeOthers(dropdown);
26

27
      const expanded = toggle.getAttribute("aria-expanded") === "true";
28
      const willExpand = !expanded;
29

30
      toggle.setAttribute("aria-expanded", willExpand);
31
      menu.setAttribute("aria-hidden", expanded);
32

33
      updateTabIndex(menu, !willExpand);
34
    });
35
  });
36

37
  // Escキーのイベントリスナーをdocumentに登録
38
  document.addEventListener("keydown", onKeydownEsc);
39
};
40

41
document.addEventListener("DOMContentLoaded", initDropdown);

initAria関数を追加し（7-14行目）、各ドロップダウンの初期化時にその関数を呼び出します（22行目）。

initAria関数では以下の処理を行います:

サブメニューにID属性があるか確認
なければ「dropdown-」＋7桁のランダムな文字列を生成してIDに設定（例: dropdown-a1b2c3d）
そのIDをトグルボタンのaria-controlsにセット

これにより、HTMLでIDを手動で設定する手間が省け、ID重複のリスクも回避できます。

次のようにトグルボタンのaria-controlsとサブメニューのID属性が一致していることが確認できます。

これでトグルボタンとサブメニューの紐付けは完了です。ただ残念ながらaria-controlsは、VoiceOverをはじめとしたほとんどのスクリーンリーダーでの読み上げに影響しません。

一部のスクリーンリーダー（NVDA、JAWSなど）では、フォーカス中に特定のキー操作（Insert + Alt + M など）で、aria-controlsで紐付けられた要素に直接ジャンプできる機能があります。ただし、この機能を知っているユーザーは少ないのが現状です。

では、aria-controlsは不要なのか？というと、そういうわけではありません。

実用性は現時点では限定的ですが、W3Cのガイドラインでは推奨されており、将来的により広く活用される可能性があります。実装コストも低いため、ベストプラクティスとして含めておくことをお勧めします。

↓ここまでのコードとデモです。

以上でスクリーンリーダーによる読み上げへの対応は完了です。だいぶ形になってきました。

Step 5: 使いやすさ向上のための追加機能

前章まででアクセシビリティ的にはほとんどの場合で対応できるものが完成しました。次はもう少し使いやすくなるような工夫をしていきます。

必須ではありませんが、プロジェクトによってはあった方が良いと思われる機能を追加していきます。

スクロール時に閉じる

現在の実装ではドロップダウンメニューを開いた状態で垂直方向にスクロールしても、メニューは閉じません。ヘッダーを上部に固定している場合では、コンテンツ視認の妨げとなる可能性があるので、スクロール時にはメニューが閉じるようにします。

JavaScriptを次のように変更します。

1
const initDropdown = () => {
2
  const dropdownItems = document.querySelectorAll(".js-dropdown");
3

4
  // 中略
5

6
  // Escキーのイベントリスナーをdocumentに登録
7
  document.addEventListener("keydown", onKeydownEsc);
8

9
  // スクロール時にメニューを閉じるイベントリスナー
10
  window.addEventListener(
11
    "scroll",
12
    () => {
13
      const existsOpenedMenu = document.querySelector(
14
        '.js-dropdown [data-dropdown="toggle"][aria-expanded="true"]'
15
      );
16

17
      if (existsOpenedMenu) {
18
        closeAll();
19
      }
20
    },
21
    { passive: true }
22
  );
23
};
24

25
document.addEventListener("DOMContentLoaded", initDropdown);

スクロール時にメニューを閉じるイベントリスナーを追加しました（10-22行目）。

イベントハンドラではaria-expandedの値がtrueのトグルボタンが存在する場合に、全てのメニューを閉じるcloseAll関数を呼び出しています。

第三引数のオプションにはpassive: trueを指定しています。これにより、イベントハンドラ内でpreventDefault()を呼ばないことをブラウザに伝え、スクロール処理と並行してハンドラーを実行できるようになります。結果として、スクロールのパフォーマンスが向上します。

これで次のようにスクロールでメニューが閉じるようになりました。

↓ここまでのコードとデモです。

フォーカスアウト時にメニューを閉じる

次にフォーカスアウト時の動きを変更します。

現状では次の動画のように子メニューB-4からメニューCにフォーカスが移動しても、メニューBは開いたままです。

メニューからフォーカスが外れた時には、そのメニューを閉じた方が自然だと思うので改善します。

JavaScriptを次のように変更します。

1
const initDropdown = () => {
2
  const dropdownItems = document.querySelectorAll(".js-dropdown");
3

4
  // 中略
5

6
  // ドロップダウンメニュークリック時の処理
7
  dropdownItems.forEach((dropdown) => {
8
    const toggle = dropdown.querySelector('[data-dropdown="toggle"]');
9
    const menu = dropdown.querySelector('[data-dropdown="menu"]');
10

11
    updateTabIndex(menu, true);
12
    initAria(toggle, menu);
13

14
    // メニュー全体からフォーカスが外れたらメニューを閉じる処理
15
    dropdown.addEventListener("focusout", (e) => {
16
      // 次のフォーカス先がこのドロップダウン内でなければ閉じる
17
      if (!dropdown.contains(e.relatedTarget)) {
18
        toggle.setAttribute("aria-expanded", "false");
19
        menu.setAttribute("aria-hidden", "true");
20
        updateTabIndex(menu, true);
21
      }
22
    });
23

24
    // 中略
25
  });
26

27
  // 中略
28
};
29

30
document.addEventListener("DOMContentLoaded", initDropdown);

メニュー全体からフォーカスが外れたらメニューを閉じる処理を追加しました（15-22行目）。

17行目のe.relatedTargetは次にフォーカスが移動する先の要素を指します。dropdown.contains(e.relatedTarget)で「次のフォーカス先が現在のドロップダウン内か」を判定し、外に移動する場合のみメニューを閉じる処理を実現しています。

これにより、ドロップダウン内の要素間（トグルボタン → 子メニュー項目）でフォーカスが移動する際には、メニューが閉じないようになります。

これで次のようにフォーカスアウト時にメニューが閉じるようになります。

↓ここまでのコードとデモです。

以上でユーザビリティ改善の実装は完了です。他にも以下のような追加機能が考えられます。

メニュー外クリックで閉じる: 背景やメニュー外の領域をクリックした時に閉じる
閉じるボタン: メガメニューのような大きなメニューの場合に有効
ホバーでの開閉: デスクトップ環境での利便性向上

プロジェクトの要件に応じて、これらの機能を追加することも検討する必要がありそうです。

リファクタリング

JavaScriptが長くなったので、リファクタリングを行います。機能は変えずに、コードの可読性と保守性を向上させます。

リファクタリング後のコードは次の通りです。

1
const initDropdown = () => {
2
  // セレクタの定義
3
  const SELECTOR = {
4
    wrapper: ".js-dropdown",
5
    toggle: '[data-dropdown="toggle"]',
6
    menu: '[data-dropdown="menu"]',
7
  };
8

9
  const dropdownItems = document.querySelectorAll(SELECTOR.wrapper);
10

11
  // ===================================
12
  // ヘルパー関数
13
  // ===================================
14

15
  // dropdown要素からtoggleとmenuを取得
16
  const getParts = (dropdown) => ({
17
    toggle: dropdown.querySelector(SELECTOR.toggle),
18
    menu: dropdown.querySelector(SELECTOR.menu),
19
  });
20

21
  // tabIndexを制御
22
  const updateTabIndex = (menu, isHidden) => {
23
    menu
24
      .querySelectorAll("a, button, input, select, textarea, [tabindex]")
25
      .forEach((el) => {
26
        el.tabIndex = isHidden ? -1 : 0;
27
      });
28
  };
29

30
  // aria-controlsを設定
31
  const initAria = (toggle, menu) => {
32
    if (!menu.id) {
33
      menu.id = `dropdown-${Math.random().toString(36).slice(2, 9)}`;
34
    }
35
    toggle.setAttribute("aria-controls", menu.id);
36
  };
37

38
  // 他のドロップダウンを閉じる
39
  const closeOthers = (current) => {
40
    dropdownItems.forEach((dropdown) => {
41
      if (dropdown === current) return;
42

43
      const { toggle, menu } = getParts(dropdown);
44
      toggle.setAttribute("aria-expanded", "false");
45
      menu.setAttribute("aria-hidden", "true");
46
      updateTabIndex(menu, true);
47
    });
48
  };
49

50
  // すべてのドロップダウンを閉じる
51
  const closeAll = () => {
52
    dropdownItems.forEach((dropdown) => {
53
      const { toggle, menu } = getParts(dropdown);
54
      toggle.setAttribute("aria-expanded", "false");
55
      menu.setAttribute("aria-hidden", "true");
56
      updateTabIndex(menu, true);
57
    });
58
  };
59

60
  // Escキー押下時の処理
61
  const handleEscKey = (e) => {
62
    if (e.key === "Escape") {
63
      const activeToggle = document.querySelector(
64
        `${SELECTOR.toggle}[aria-expanded="true"]`
65
      );
66
      closeAll();
67
      if (activeToggle) activeToggle.focus();
68
    }
69
  };
70

71
  // ===================================
72
  // 初期化
73
  // ===================================
74

75
  dropdownItems.forEach((dropdown) => {
76
    const { toggle, menu } = getParts(dropdown);
77

78
    // 初期状態を設定
79
    updateTabIndex(menu, true);
80
    initAria(toggle, menu);
81

82
    // クリックイベント
83
    toggle.addEventListener("click", () => {
84
      closeOthers(dropdown);
85

86
      const expanded = toggle.getAttribute("aria-expanded") === "true";
87
      const willExpand = !expanded;
88

89
      toggle.setAttribute("aria-expanded", willExpand);
90
      menu.setAttribute("aria-hidden", !willExpand);
91
      updateTabIndex(menu, !willExpand);
92
    });
93

94
    // フォーカスアウトイベント
95
    dropdown.addEventListener("focusout", (e) => {
96
      if (!dropdown.contains(e.relatedTarget)) {
97
        toggle.setAttribute("aria-expanded", "false");
98
        menu.setAttribute("aria-hidden", "true");
99
        updateTabIndex(menu, true);
100
      }
101
    });
102
  });
103

104
  // グローバルイベント
105
  document.addEventListener("keydown", handleEscKey);
106

107
  window.addEventListener(
108
    "scroll",
109
    () => {
110
      const hasOpenMenu = document.querySelector(
111
        `${SELECTOR.toggle}[aria-expanded="true"]`
112
      );
113
      if (hasOpenMenu) closeAll();
114
    },
115
    { passive: true }
116
  );
117
};
118

119
document.addEventListener("DOMContentLoaded", initDropdown);

リファクタリングで変更した主なポイントは次の通りです。

項目	改善内容
セレクタ管理	定数`SELECTOR`にまとめて一元管理
重複コード	`getParts`関数で toggle/menu 取得を共通化
コード構造	ヘルパー関数と初期化処理を明確に分離
フォーカス制御	aタグ以外にもサブメニュー内のすべてのフォーカス可能要素に対応
可読性	関数名と変数名をより分かりやすく命名

機能は変わっていませんが、今後の機能追加や修正がしやすくなりました。

最初の動けばいい版では15行程度のJavaScripのコードでしたが、ユーザビリティとアクセシビリティを意識するとやはりコード量はどうしても長くなってしまいます。

↓最終的なコードとデモです。

ドロップダウンメニューを段階的にアクセシブルにする：「動けばいい」からの脱却

Step 1: 最小限の実装（動けばいい版）

動作を確認する

この実装の問題点

Step 2: 排他制御の追加

Step 3: キーボード操作への対応

適切なフォーカス管理

トグルボタンにフォーカスが当たるようにする

非表示のサブメニュー内の要素にフォーカスがあたらないようにする

Escキーでメニューを閉じる

Step 4: スクリーンリーダーによる読み上げへの対応

ボタンの役割を伝える

ボタンの開閉状態を伝える

サブメニューの読み上げをコントロールする

要素を関連づける

Step 5: 使いやすさ向上のための追加機能

スクロール時に閉じる

フォーカスアウト時にメニューを閉じる

リファクタリング

参考サイト