Breadcrumbsとは?

Webコンテンツ階層のコンポーネントを表示します.
親カテゴリへの迅速な移動を支援します.

Webアクセス性

リンク
「ネットワークの力は普遍的で、どんな障害が発生しても、誰もがそれにアクセスできることが最も重要です.」
チームバスマネージャ、W 3 Cコントローラ、およびWrold Wide Webの作成者
Webアクセス性とは、Webサイト、ツール、およびテクノロジーが障害のあるユーザーのために設計および開発されることを意味します.

Webアクセスガイド

コンポーネント固有のWebアクセスについて

Webアクセス用のBreadcrumbの作成

Breadcrumbs設計モードドキュメントを参照してコンポーネントを作成します.
まず、補助機能を見てみましょう

リンクセットは、ol(秩序セット)を使用して構成される.

navユニットにbreadcrumbラベルが貼られている場合、スクリーンリーダーはユニットを「移動パス」(breadcrumb trail)と識別します.

cssを使用して、スクリーンリーダーが

リンク間のビジュアルシンボル("/")を読み取ることを防止します.
-各要素は視覚的な表現です

各経路はolでli認識可能

である.

リンク要素はaria-currentプロパティを使用します.(主にpage)

式の例では、次のCSS(Boorder)を使用してpathを区別するのが興味深い.
コンテンツは「」ですが、傾斜/です.

nav.breadcrumb li + li::before {
  display: inline-block;
  margin: 0 0.25em;
  transform: rotate(15deg);
  border-right: 0.1em solid currentColor;
  height: 0.8em;
  content: "";
}

サンプルを開く

詳細コードは、対応するリンクで表示できます.

指摘すべき部分は.

1. cssネストは和許可(parent select)のみ.
   
   これは継承のようで、両親は私を知らないで、私は両親を知ることができます.br/>
   つまり、親のcssに触る必要はありません.開放閉鎖の原則を思い出す.

const CrumbWrapper = styled.li`
  display: inline;
  --spacing: 12px;
  &:not(:first-of-type) {
    margin-left: var(--spacing);
    &::before {
      content: "";
      display: inline-block;
      margin: 0 0.25em;
      transform: rotate(15deg);
      border-right: 0.1em solid currentColor;
      height: 0.8em;
      margin-right: var(--spacing);
    }
  }
`; 

2. React-Routerを使用しますが、navの下にaタグを使用します.
   
   React-RouterのNavLinkはARIAをよくサポートしているので、例でソースコードを使用することは意味がありません.