記事一覧の下に置くページ送りナビ。現在ページはaria-current="page"で示し、タップしやすい36px四方のリンクをgapで等間隔に並べます。
プレビュー枠は右下をドラッグすると高さを変えられます
書き換えるとプレビューに即反映されます。変更はこのページ内だけで、リロードすると元に戻ります。
ページ番号の並びは ul/li でマークアップし、nav の aria-label で「ページ送り」であることを伝えます。現在ページの見た目は専用クラスではなく aria-current="page" 属性セレクタで当てるのがポイントで、スタイルとアクセシビリティ情報が常に一致します。各リンクは display: grid + place-items: center で数字を中央に置き、min-widthと高さ36pxでタップしやすい大きさを確保しています。
省略(…)はリンクにせずaria-hiddenにします。前へ・次へは記号だけなのでaria-labelを忘れずに。
ページネーションを作ってください。ul/liとnav[aria-label]でマークアップし、現在ページはaria-current="page"属性セレクタでスタイリング、各リンクは36px四方以上でタップしやすくしてください。