【アクセシビリティ】アクセシビリティを意識したパンくずリストの作り方

## はじめに
![](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/390720/70d2c8ee-d1a9-d97e-6dc6-656beabd7b69.png)
みなさんアクセシビリティを意識して開発できていますか？

必要なところに`role属性`を記述したり、`tabキー`でフォーカスができるようにしたりなど、意識しないといけないことも多いです。
そのため、アクセシビリティを完璧にやろうとするのは一苦労です。

ただ、コンポーネントごとに区切って、アクセシビリティを理解しておけば、実装するタイミングに思い出しやすく、アクセシビリティも意識しやすいと思います。

そのため、この記事では「**パンくずリスト**」に焦点を当てて、アクセシビリティを意識したパンくずリストの実装方法とパンくずリストで意識した方がいいアクセシビリティを解説しようと思います。

## アクセシビリティを意識したパンくずリストの仕様
### ⚪︎ パンくずリストとは？
パンくずリストとは、親ページへのリンクを階層順並べたものです。
ユーザーがWebサイト内で自分の場所を見つけるのに役立ちます。

またパンくずリストは、ページのメインコンテンツの前に水平に配置されます。

### ⚪︎ キーボードインタラクション
キーボード操作は必要ありません。

### ⚪︎ WAI-ARIA の役割、状態、プロパティ

+ パンくずリストは、`<nav>`のランドマーク領域に含まれる
+ ランドマーク領域は、`aria-label` or `aria-labeledby`でラベルを設定する
+ 現在のページへのリンクには、`aria-current="page"`を設定する
  + 現在のページがリンクではない場合、`aria-current="page"`は任意

## アクセシビリティを意識したパンくずリストの完成形
<p class="codepen" data-height="500" data-default-tab="result" data-slug-hash="MWZdoBW" data-editable="true" data-user="sp_degu" style="height: 500px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;">
  <span>See the Pen <a href="https://codepen.io/sp_degu/pen/MWZdoBW">
  Alert and Message Dialogs Accessibility</a> by でぐぅー | Qiita (<a href="https://codepen.io/sp_degu">@sp_degu</a>)
  on <a href="https://codepen.io">CodePen</a>.</span>
</p>
<script async src="https://cpwebassets.codepen.io/assets/embed/ei.js"></script>

## アクセシビリティを意識したパンくずリストの作り方
### 1. HTMLを実装する
```sample.html
<nav aria-label="Breadcrumb" class="breadcrumb">
  <ol>
    <li><a herf="https://qiita.com/degudegu2510">Qiita</a></li>
    <li><a herf="https://qiita.com/degudegu2510">degudegu2510</a></li>
    <li><a herf="https://qiita.com/degudegu2510/items/****" aria-current="page">【アクセシビリティ】アクセシビリティを意識したパンくずリストの作り方</a></li>
  </ol>
</nav>
```

### ２. CSSを実装する
```sample.css
body {
  background-color: #212529;
  color: #fff;
  display: grid;
  gap: 24px;
  height: calc(100vh - 40px);
  margin: 0;
  padding: 20px 0;
  place-items: center;
  width: 100vw;
}

.breadcrumb {
  background-color: rgb(128 128 128 / .3);
  border-radius: 100px;
  color: #ffffff;
  padding: 8px;
  position: relative;
  background-blend-mode: luminosity;
  backdrop-filter: blur(15px);
}

.breadcrumb::before {
  background: linear-gradient(135deg, rgb(255 255 255 / .4) 0, rgb(255 255 255 / 0) 40%, rgb(255 255 255 / 0) 60%, rgb(255 255 255 / .1) 100%);
  border: 1.4px solid transparent;
  border-radius: 100px;
  content: "";
  inset: 0;
  position: absolute;
  -webkit-mask: linear-gradient(#fff 0 0) padding-box, linear-gradient(#fff 0 0) border-box;
  -webkit-mask-composite: destination-out;
  mask: linear-gradient(#fff 0 0) padding-box, linear-gradient(#fff 0 0) border-box;
  mask-composite: exclude;
  z-index: -1;
}

.breadcrumb ol {
  margin: 0;
  padding-left: 0;
  list-style: none;
  display: flex;
}

.breadcrumb li {
  align-items: center;
  justify-content: center;
  display: flex;
}

.breadcrumb li + li::before {
  align-items: center;
  justify-content: center;
  display: inline-flex;
  font-family: "Material Symbols Outlined";
  font-variation-settings:
    'FILL' 0,
    'wght' 400,
    'GRAD' 0,
    'opsz' 24;
  content: "arrow_forward_ios";
  width: 24px;
  height: 24px;
}

.breadcrumb a {
  border-radius: 100px; 
  cursor: pointer;
  max-width: 200px;
  overflow: hidden;
  padding: 8px 16px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.breadcrumb a:hover {
  background: radial-gradient(101.08% 100% at 50% 100%, rgba(94, 94, 94, 0.32) 0%, rgba(94, 94, 94, 0.00) 73.85%), radial-gradient(100.02% 100% at 50% 100%, rgba(255, 255, 255, 0.12) 0%, rgba(255, 255, 255, 0.00) 68.75%), linear-gradient(0deg, rgba(94, 94, 94, 0.18) 0%, rgba(94, 94, 94, 0.18) 100%), rgba(255, 255, 255, 0.06);
  background-blend-mode: color-dodge, normal, color-dodge, lighten;
}
```

## まとめ
この記事では、「**パンくずリスト**」に焦点を当てて、アクセシビリティを意識したパンくずリストの実装方法とパンくずリストで意識した方がいいアクセシビリティを解説しました。

ぜひこの記事をストックして、パンくずリストを実装する時にアクセシビリティについて思い出してもらえると嬉しいです。

Advent Calendar 2023では、他のコンポーネントにも焦点を当てて、アクセシビリティについても解説しているので、ぜひ購読していてください。

https://qiita.com/advent-calendar/2023/degudegu2510

---

最後まで読んでくださってありがとうございます！

普段はデザインやフロントエンドを中心にQiitaに記事を投稿しているので、ぜひQiitaのフォローとX(Twitter)のフォローをお願いします。

https://twitter.com/degudegu2510