アクセシビリティ対応、タブオーダー可能なnav（ドロップダウンリストあり）の作成

前提・実現したいこと

アクセシビリティを考慮して、
タブオーダーで選択可能なnav（ドロップダウンあり）を作りたい。
IEでも他のブラウザと同じように稼働するものを作りたい。

発生している問題・エラーメッセージ

作成した内容で大丈夫だと思っていたところ、最後にIEで動作確認をしたところ、navの下層領域であるドロップダウンリストが全く表示されないことが判明。
結果、『focus-within』 がIEで使用できないことに後で気づいた。
この、『focus-within』 に変わる記述を行い、IEでも他のブラウザと同じように、タブオーダーで選択可能なnav（ドロップダウンあり）を作りたい。
CSSだけで解決できると嬉しい。不可能であれば、javascriptの記述内容を教えてほしい。

該当のソースコード

<html>
<head>
<meta charset="utf-8">
<title>無題ドキュメント</title>
<style>
	li {list-style-type: none;}
	.pb-5 {padding-bottom: 5px;}
	.flex-000 { 
	  display: flex;
	  justify-content: space-between;
	  margin: 0 auto;
	  text-align: center;
	}
	nav {
	  margin: 0 auto;
	  text-align: center;
	  font-size: 17px;
	}
	.nav-index { 
	  margin-top: 0px;
	  padding-top: 10px;
	  padding-bottom: 5px;
	}
	nav ul li {
	  flex: 1; /*nav ul liの幅を均等にする*/
	  border-right: solid 1px #666;
	}
	nav ul li:last-child {border-right: none;}
	nav ul li ul li a {
	  /*aタグのリンク範囲を親要素まで広げるため
		インライン要素からブロック要素に変更*/
	  display: block;
	}
	nav ul li ul li a:hover,nav ul li ul li a:focus {
	  background-color: #deffc2;
	  font-weight: bold;
	  font-size: 19px;
	}
	nav ul {
	  padding: 10px 0px 15px 0px;
	}
	nav img {
	  width: 65px;
	  margin: 0 auto;
	  display: block;
	  transition: 0.5s;
	}
	nav ul li ul {
	  position: absolute;
	  width: 30%;
	  display: none;
	  font-size: 15px;
	}
	nav ul li ul li {
	  display: block;
	  border-right: none;
	  margin: 0px 5px;
	}
	nav ul li ul li a {
	  background-color: #fff;
	  color: #666;
	}
	nav ul li ul li a:hover,nav ul li ul li a:focus {
	  background-color: #deffc2;
	}
	nav ul li:hover ul,nav ul li:focus-within ul {
	  display: block;
	}
</style>
</head>

<body>
<nav class="box-bc001 nav-index">
	<article class="main-box-big pb-5">
	<ul class="flex-000">
		<li>
			<a href="#">
			HOME
			<img src="" width="" height="" alt=""/>
			</a>
			<ul>
				<li><a href="#">高松支店</a></li>
				<li><a href="#">徳島事務所</a></li>
			</ul>
		</li>
		<li>
			<a href="#">
			ご挨拶
			<img src="" width="" height="" alt=""/>
			</a>
			<ul>
				<li><a href="#">〇〇〇挨拶</a></li>
				<li><a href="#">〇〇〇〇挨拶</a></li>
			</ul>		
		</li>
		<li>
			<a href="#">
			ご挨拶
			<img src="" width="" height="" alt=""/>
			</a>
			<ul>
				<li><a href="#">〇〇〇挨拶</a></li>
				<li><a href="#">〇〇〇〇挨拶</a></li>
			</ul>		
		</li>
	</ul>
	</article>	
</nav>	
</body>
</html>

試したこと

補足情報（FW/ツールのバージョンなど）

ここにより詳細な情報を記載してください。

Lhankor_Mhy

2020/07/28 06:30

ターゲットのバージョンは11でいいでしょうか？

行動規範の内容に同意します

回答1件

ベストアンサー

以下のようにしてはいかがでしょうか。

js
1     Array.prototype.forEach.call( document.querySelectorAll('nav ul li ul li a'), function(e){
2        e.addEventListener('focusin', function(){ e.parentElement.parentElement.parentElement.classList.add('test') });
3        e.addEventListener('focusout', function(){ e.parentElement.parentElement.parentElement.classList.remove('test') });
4     } );

css
1    nav ul li ul {
2      position: absolute;
3      width: 30%;
4      /* display: none; */
5      left: -9999px;
6      font-size: 15px;
7    }
8    nav ul li:hover ul,nav ul li:focus-within ul {
9      /* display: block; */
10        left: auto;
11    }
12    .test ul {
13        left: auto;
14    }
15

IE以外のブラウザでもそうですが、display:noneで非表示になっているとそもそもタブフォーカスしないので、left:-9999pxで画面外に隠しています。他に良い方法があるかもしれませんので、ご検討ください。

IE11で動作を確認していますが、たぶんIE10までは動くと思います。
IE9になると、classListがないのでポリフィルを使ってください。

投稿2020/07/28 09:15

Lhankor_Mhy

総合スコア36981

chie_123

2020/07/28 13:00

質問を頂いていたのにすぐにお返事できず申し訳ございません。そんな中でご回答くださりありがとうございます。早速、教えてくださった内容で修正したところ、思う通りの動作がIE11で確認できました。想定していたものはIE11でしたので、本当に満足しています。説明もとても分かりやすく、納得致しました。今後ともどうぞよろしくお願いいたします。

行動規範の内容に同意します