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

はじめに

みなさんアクセシビリティを意識して開発できていますか？

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

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

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

アクセシビリティを意識したパンくずリストの仕様

⚪︎ パンくずリストとは？

パンくずリストとは、親ページへのリンクを階層順並べたものです。
ユーザーがWebサイト内で自分の場所を見つけるのに役立ちます。

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

⚪︎ キーボードインタラクション

キーボード操作は必要ありません。

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

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

アクセシビリティを意識したパンくずリストの完成形

See the Pen Alert and Message Dialogs Accessibility by でぐぅー | Qiita (@sp_degu) on CodePen.

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

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では、他のコンポーネントにも焦点を当てて、アクセシビリティについても解説しているので、ぜひ購読していてください。

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

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