nav の中に ol で並べ、今いるページには aria-current="page" を付けています（リンクにしません）。区切りの矢印はCSSで描いているので、HTMLに記号を書く必要はありません。
NAVIGATION
パンくずリスト・ページ送りのCSS素材
ページの場所を示すパンくずや、一覧のページ送りです。WordPressの出力に合わせやすい、シンプルなHTMLで作っています。
10種類
nav の中に ol で並べ、今いるページには aria-current="page" を付けています（リンクにしません）。スマホで長くなったときは、折り返さずに横へスクロールします。
nav の中に ol で並べ、今いるページには aria-current="page" を付けています（リンクにしません）。ページの見出しの上に、横いっぱいの帯として置く形です。最初の「ホーム」は家のアイコンで、読み上げでは「ホーム」と読まれます。
nav の中に ol で並べ、今いるページには aria-current="page" を付けています（リンクにしません）。1つずつを矢羽根の形に切り抜いて、右向きにつないでいます。項目が多いときは折り返さずに横へスクロールします。
今のページには aria-current="page" を付けます。「前へ」「次へ」は矢印だけなので aria-label で名前を付けています。スマホでは今のページの前後以外の数字を隠します。
ページ数が多いときや、スマホで幅が足りないときに。最初と最後のページでは、使えない側の矢印を aria-disabled="true" の span にします。
記事の最後に置く、前後の記事へのリンクです。小さな写真は色の面なので <img> に差し替えてください。スマホでは縦に並びます。
記事の最初に置く目次です。details 要素なので、JavaScriptなしで「閉じる」「開く」ができます。番号はCSSが自動で振るので、項目を足しても書き直す必要はありません。
最初は3件だけ見せ、ボタンを押すと残りが出ます。隠しておく項目には hidden 属性を付けます（JSが動かない環境でも中身はHTMLにあります）。全部出し終わったらボタンは消えます。
フォームの上に置く「今どの段階か」の表示です。今の段階に aria-current="step"、終わった段階に cs-nv10__done を付けます。線と丸はCSSだけで描いています。