Zenn
🌐

アクセシビリティを考慮したパンくずリストの実装と解説

2024/07/03に公開
CSS
HTML
アクセシビリティ
tech

結論（全コード）

HTML

index.html
<nav class="breadcrumb" aria-label="現在のページ階層">
	<ol class="breadcrumb__list-wrapper">
		<li class="breadcrumb__list">
			<a class="breadcrumb__link" href="../../">
				トップページ
			</a>
		</li>
		<li class="breadcrumb__list">
			<a class="breadcrumb__link" href="../">
				記事一覧
			</a>
		</li>
		<li class="breadcrumb__list">
			<a class="breadcrumb__link" href="./" aria-current="page">
				記事
			</a>
		</li>
	</ol>
</nav>

CSS

style.css
/* リセットCSS */
*,
::before,
::after {
	box-sizing: border-box;
	border-style: solid;
	border-width: 0;
	min-width: 0;
}

html {
	line-height: 1.15;
	-webkit-text-size-adjust: 100%;
	-webkit-tap-highlight-color: transparent;
}

body {
	margin: 0;
}

ul,
ol {
	margin: 0;
	padding: 0;
	list-style: none;
}

a {
	background-color: transparent;
	text-decoration: none;
	color: inherit;
}

/* パンくずリストのスタイル */
.breadcrumb {
	padding: 16px;
	background-color: #f8f9fa;
}

.breadcrumb__list-wrapper {
	display: flex;
	gap: 8px;
}

.breadcrumb__list {
	position: relative;
	padding-right: 16px;
}

.breadcrumb__list::after {
	content: '';
	position: absolute;
	right: 0;
	top: 50%;
	translate: 0 -50%;
	rotate: 45deg;
	border: solid #6c757d;
	border-width: 2px 2px 0 0;
	display: inline-block;
	padding: 3px;
}

.breadcrumb__list:last-child::after {
	content: none;
}

.breadcrumb__link {
	font-size: 1rem;
	color: #004494;
	transition: color 0.3s ease;
}

@media (any-hover:hover) {
	.breadcrumb__link:hover {
		color: #000000;
	}
}

.breadcrumb__link:focus-visible {
	color: #000000;
}

.breadcrumb__link[aria-current="page"] {
	font-weight: bold;
	color: #333333;
}

解説

HTML - navとdivの実装の比較

index.html
<nav class="breadcrumb" aria-label="現在のページ階層">

navタグを利用して、ナビゲーションであることを明示し、スクリーンリーダーからの検索を可能にします。

navタグで実装した場合

スクリーンリーダーでの検索の例。「現在のページ階層、ナビゲーション」と表示され、この通りに読み上げられる。

divタグで実装した場合

スクリーンリーダーでの検索の例。何も表示されず、読み上げられない。

HTML - aria-labelの有無を比較

index.html
<nav class="breadcrumb" aria-label="現在のページ階層">

aria-label属性でナビゲーションの命名を明確にし、スクリーンリーダーでの読み上げ・検索性を向上させています。また、ヘッダー、パンくず、フッターなど、ナビゲーションが複数あるときに判別を可能にします。

aria-labelを実装した場合

スクリーンリーダーでの検索の例。ヘッダー部分「ページ内リンク一覧、ナビゲーション」・パンくずリスト部分「現在のページ階層、ナビゲーション」・フッター部分「外部リンク一覧、ナビゲーション」と表示され、この通りに読み上げられる。

aria-labelを実装しない場合

スクリーンリーダーでの検索の例。ヘッダー部分「ナビゲーション、ナビゲーション」・パンくずリスト部分「ナビゲーション、ナビゲーション」・フッター部分「ナビゲーション、ナビゲーション」と表示され、この通りに読み上げられる。

HTML - パンくずリストの各項目はolタグで実装

index.html
<ol class="breadcrumb__list-wrapper">
	<li class="breadcrumb__list">
		<a class="breadcrumb__link" href="../../">
			トップページ
		</a>
	</li>
	<!-- 上記の形でliタグを実装していく -->
</ol>

今回のパンくずリストの表示は、ページの階層構造を表しているため、階層の順番に則ってolタグで実装する。

HTML - aria-currentで現在のページを表す

index.html
<li class="breadcrumb__list">
	<a class="breadcrumb__link" href="./" aria-current="page">
		記事
	</a>
</li>

今開いているページが「記事」ページ(./)の際、該当リンクにaria-currentを付与し、どのリンクが現在のページであるか明確にすることで、スクリーンリーダーでの読み上げを向上させる。

aria-currentを実装している場合の読み上げ例

リンク　記事

aria-currentを実装していない場合の読み上げ例

現在のページ　リンク　記事

CSS - パンくずのリストの仕切りをCSS変形で表現する

style.css
.breadcrumb__list::after {
	content: '';
	position: absolute;
	right: 0;
	top: 50%;
	translate: 0 -50%;
	rotate: 45deg;
	border: solid #6c757d;
	border-width: 2px 2px 0 0;
	display: inline-block;
	padding: 3px;
}

画像やcontent: ">"で実装すると、単語から単語へ移動する動作の際に、スクリーンリーダーが読み上げる可能性がある。リストのスムーズな読み上げの為に、仕切りをCSS変形で実装し読み上げないようにする。

仕切りをCSS変形で実装した際のリンクからリンクへ単語移動するときの読み上げ例

リンク　トップページ　リンク　記事一覧

仕切りをcontent: ">"で実装した際のリンクからリンクへ単語移動するときの読み上げ例

リンク　トップページ　より大きい　リンク　記事一覧

CSS - 色のコントラスト比を整える

文字色と背景色、文字色とホバー時の文字色など、判別できるようにコントラスト比を4.5:1以上になるように調整する。

コントラスト比はWCAGのガイドラインのAA基準をもとにしています
Web Content Accessibility Guidelines (WCAG) 2.2 (日本語訳) - 達成基準 1.4.3 コントラスト (最低限)

コントラスト比の確認は、Google拡張機能であるWCAG Color contrast checkerを利用して行っています
WCAG Color contrast checker

WCAG Color contrast checkerを利用した例

WCAG Color contrast checkerを利用した例。各テキストのコントラスト比、文字の大きさ、要素数、タグ名などの情報が表示されている。画像では、リンク部分「8.84 small 2 a」・現在のページのリンク部分「11.99 small 1」・見出し部分「a 21 large 1 h1」が表示。

感想

最近、アクセシビリティの勉強を始めたので、備忘録の意味も込めて記事を作成しました。今後も、勉強次第記事を上げていきたいと思います。
ご意見・ご指摘などありましたら、コメントいただけますと幸いです。
最後に勉強に利用した参考リンクも記載しますので、必要に応じて参照下さい。
ご覧いただき、ありがとうございました。

リンク集

W3Cの実践的なプラクティス集
ARIA Authoring Practices Guide | APG | WAI | W3C

W3Cの実践的なプラクティス集（パンくずリスト）
Breadcrumb Example | APG | WAI | W3C

WCAGのアクセシビリティガイドライン
Web Content Accessibility Guidelines (WCAG) 2.2

aria-label解説
ARIA8: リンクの目的を示すために aria-label を使用する | WCAG 2.0 達成方法集

aria-current解説
Element: ariaCurrent プロパティ - Web API | MDN

Discussion