現在地を示すパンくずリスト。olとaria-labelで意味づけし、区切り記号はCSSの擬似要素で入れるためHTMLが汚れません。
プレビュー枠は右下をドラッグすると高さを変えられます
書き換えるとプレビューに即反映されます。変更はこのページ内だけで、リロードすると元に戻ります。
順序付きリスト（ol）を display: flex で横並びにし、区切りの「/」は li + li::before の擬似要素で描画します。区切り記号をHTMLに書かないことで、スクリーンリーダーに余計な記号が読み上げられません。現在地は aria-current="page" で示し、リンクにはしません。
項目が長い場合は flex-wrap: wrap で折り返せます。省略したい場合は white-space / text-overflow の組み合わせも検討してください。
アクセシブルなパンくずリストをHTMLとCSSで作ってください。ol要素とaria-label、現在地にはaria-current="page"を使い、区切り記号はCSSの擬似要素で入れてください。