HTML・ARIAリファレンス

ページのルート要素です。lang属性でページの主な言語を指定すると、スクリーンリーダーが正しい音声と発音で読み、ブラウザーも適切なフォントやハイフネーションを使います。

タブに表示され、ページを開いたときに最初に読み上げられるページ名です。ページごとに固有にし、具体的な部分を先に書きます（「お支払い – Fern & Fold」）。

文字コード、ビューポート、説明文などのメタデータです。ビューポートにmaximum-scale=1やuser-scalable=noを指定しないでください。モバイルで拡大表示できなくなります。

ロゴやナビゲーションなどの導入部分です。<article>、<aside>、<main>、<nav>、<section>の中にないときだけbannerランドマークになり、その中ではその部分の見出し部分にすぎません。

主要なナビゲーションリンクのまとまりです。1ページに複数あるときは、それぞれaria-labelで名前を付けます（「メイン」「フッター」など）。「ナビゲーション」という語はスクリーンリーダーが読むので含めません。

検索や絞り込みのフォームを囲み、searchランドマークにします。formにrole="search"を付ける必要がなくなります。

ページの主な内容です。1ページに1つだけ置きます（ほかは非表示にする必要があります）。スクリーンリーダーの利用者はここへ直接移動でき、スキップリンクの行き先にもなります。

通常は見出しを持つ、テーマごとのまとまりです。名前（見出しを指すaria-labelledbyなど）を持つときだけregionランドマークになります。

投稿、コメント、商品カードなど、単独でも意味が通る独立した内容です。見出しから始めます。

レベル付きの見出しです。スクリーンリーダーの利用者は見出しを一覧にして移動するので、<h1>を1つ置き、下る方向でレベルを飛ばさず、大きさではなく構造でレベルを選びます。

サイドバーなど、ページに関連するが主な内容とは別の部分です。complementaryランドマークになります。複数あるときは名前を付けます。

著作権、連絡先、規約へのリンクなどの末尾部分です。<article>、<aside>、<main>、<nav>、<section>の中にないときだけcontentinfoランドマークになります。

順序のない項目のリストです。Safari と VoiceOver では、<nav>の外でlist-style: noneを指定するとリストとして扱われなくなります。項目数を伝えたい場合はrole="list"を付けます。

手順など、順序に意味があるリストです。スクリーンリーダーは項目数と現在の位置を伝えます。

<ol>、<ul>、<menu>の項目です。それらの直接の子でないと、リストの項目として数えられません。

仕様や用語集など、用語と説明の組のリストです。直下には<dt>、<dd>、それらを囲む<div>だけを置きます。

画像、グラフ、コード例など、まとまった内容です。通常は<figcaption>で名前を付けます。キャプションは画像のaltの代わりにはなりません。

<figure>のキャプションで、最初か最後の子として置きます。図のアクセシブル名になります。

別のページや場所へのリンクです。hrefがあるときだけリンクになり、TabキーとEnterキーで操作できます。リンクテキストで行き先がわかるようにします。ページ上の操作には<button>を使います。

略語です。title属性は確実には読まれず、タッチ画面では表示されないので、初出時に本文で正式名称を書きます。

ルビ注記です。漢字の読みを示すふりがななど、文字の上や横に小さな文字を付けます。読み上げ方はスクリーンリーダーによって異なり、親文字とルビの両方を読むことがよくあります。

検索に一致した語など、参照のために強調表示するテキストです。多くのスクリーンリーダーは読み分けないので、強調表示だけで情報を伝えないでください。

元の価格など、正しくなくなった、または関係なくなったテキストです。スクリーンリーダーは取り消し線を読まないことが多いので、必要なら「旧価格」などの言葉を添えます。

編集の記録として、文書から削除されたテキストです。多くのスクリーンリーダーは既定では読み分けないので、変更が重要なら言葉で伝えます。

編集の記録として、文書に追加されたテキストです。多くのスクリーンリーダーは既定では読み分けません。

画像です。altは必須です。画像が伝える内容を書くか、装飾の画像ならalt=""にしてスクリーンリーダーに読み飛ばさせます。altがないと、ファイル名を読むスクリーンリーダーが多くあります。

イメージマップ内のクリック領域です。hrefがあるとリンクになり、altがリンクテキストになるので必須です。

インラインのSVG図形です。意味のある画像にはrole="img"を付け、aria-labelか<title>で名前を付けます。装飾ならaria-hidden="true"を付けます。

スクリプトで描画する領域です。描いた内容は支援技術に伝わらないので、同じ情報を代替コンテンツか近くのテキストで提供します。

地図や動画プレーヤーなど、別のページを埋め込みます。内容を表すtitleを付け、スクリーンリーダーの利用者が中に入るかどうか判断できるようにします。

動画プレーヤーです。controls、<track>による字幕、音声解説か文字起こしを付けます。音声付きで自動再生しないでください。

音声プレーヤーです。controlsを付け、文字起こしを用意します。3秒を超えて自動再生する音声には、止める方法が必要です。

<video>に字幕や音声解説を付ける仕組みで、WebVTTファイルの種類をkindで指定します。音声のある収録済み動画には、字幕が必要です（WCAG 1.2.2）。

データ表です。スクリーンリーダーは各セルを見出しとともに読みます。行と列のデータに使い、レイアウトには使いません。<caption>を付けます。

表のタイトルで、最初の子として置きます。表の名前になり、スクリーンリーダーの利用者はセルを読む前に内容がわかります。

列または行の見出しセルです。scope="col"かscope="row"で向きを明示します。複雑な表ではheadersを使います。

データセルです。スクリーンリーダーは、<th>またはheaders属性から求めた行と列の見出しとともに読みます。

入力欄を送信するフォームです。Enterキーでの送信はこの中でだけ動きます。名前を持つときだけformランドマークになります。

ラジオボタンの組や住所など、関連する入力欄を<legend>の問いのもとにまとめます。スクリーンリーダーは入力欄とともに<legend>を読みます。

<fieldset>のキャプションで、最初の子として置きます。スクリーンリーダーによってはグループ内の入力欄ごとに繰り返すので、短くします。

入力欄の見える名前です。forと入力欄のidで結び付けるか、入力欄を囲みます。入力欄にフォーカスすると読まれ、クリックすると入力欄にフォーカスが移ります。

typeで種類が決まる入力欄です（text、email、checkbox、radio、number、dateなど）。どれにもラベルが必要です。適切なtypeとautocompleteで、合ったキーボードと自動入力が使えます。

複数行の入力欄です。ほかの入力欄と同じくラベルが必要です。広さが必要になる場合に備え、サイズ変更を禁止しないでください。

選択肢から選ぶリストで、キー操作とスクリーンリーダー対応が組み込まれています。ラベルを付け、選択の変更だけで送信やページ移動をしないでください。

<select>の関連する選択肢をラベルの下にまとめます。多くのスクリーンリーダーは選択肢とともにそのラベルを読みます。

<input>の入力候補で、入力欄のlist属性で結び付けます。候補以外も入力できます。候補の読み上げはブラウザーによって異なります。

ページ上で何かを実行するボタンです。標準でフォーカスでき、EnterキーとSpaceキーで動きます。フォームの中では既定で送信するので、それ以外の操作にはtype="button"を付けます。

合計など、計算や操作の結果です。statusのライブリージョンなので、変更がスクリーンリーダーで読まれることがあります。

アップロードなど、作業の進み具合です。ラベルを付けます。valueがないと、進行中であることだけを示し、どれだけ進んだかは示しません。

パスワードの強さのような、決まった範囲の中の測定値で、スクリーンリーダーは値とともに読み上げます。ラベルを付け、強さは色だけでなく文字でも示します（WCAG 1.4.1）。作業の進み具合には<progress>を使います。

<summary>を押すと内容を開閉する折りたたみウィジェットです。キー操作とスクリーンリーダー対応が組み込まれています。同じnameのものは一度に1つだけ開きます。

<details>の常に表示されるラベルで、開閉を切り替えます。多くのブラウザーは展開状態付きのボタンのようなコントロールとして伝えますが、ロールはブラウザーによって異なります。中にほかの操作できる要素を入れないでください。

ダイアログです。showModal()で開くとモーダルになり、フォーカスが中に移り、ページのほかの部分が操作できなくなり、Escキーで閉じます。見出しから名前を付けます。

要素の内容の言語を指定し、スクリーンリーダーが正しい音声で読み、ブラウザーが正しく改行・翻訳できるようにします。ページ全体は html 要素に（WCAG 3.1.1）、別の言語の部分にはその部分に指定します（WCAG 3.1.2）。

文字の方向を指定します。アラビア語やヘブライ語など右から左に書く文字には rtl を、方向が事前に分からない利用者の投稿には auto を使います。

マウスを重ねたときにツールチップとして表示される補足情報です。キーボードやタッチの利用者には表示されず、スクリーンリーダーの読み上げもまちまちなため、頼りにしません。確実に役立つのは iframe に名前を付けるときだけです。

要素をすべての利用者から隠します。表示されず、フォーカスもできず、スクリーンリーダーにも読まれません。until-found を指定すると、ブラウザーのページ内検索で見つかり、見つかったときに表示されます。

要素とその中身すべてを操作できなくします。表示はされたままですが、フォーカス、クリック、スクリーンリーダーでの移動ができません。独自に作ったモーダルの背後のページや、表示はしているがまだ使えない内容に使います。

要素がキーボードフォーカスを受け取るかを決めます。0 はソース順でTabキーの順序に加え、-1 はTabキーの順序に入れずにスクリプトからだけフォーカスできるようにします。正の値は、その要素を他のすべてより先にするため、使いません。

ページやダイアログが開いたときに、その要素へフォーカスを移します。ダイアログの最初の入力欄など、利用者が操作を始めると予想できる場所だけに使います。それ以外では、スクリーンリーダー利用者がまだ聞いていない内容を飛ばしてしまいます。

要素にキーボードショートカットを割り当てます。スクリーンリーダー、ブラウザー、OSのショートカットと衝突し、修飾キーもブラウザーごとに異なり、存在も利用者に伝わらないため、使用は避けます。

要素の内容をその場で編集できるようにします。ブラウザーは編集可能なテキスト領域として伝えますが、名前はないため、aria-labelledby や aria-label でラベルを付け、複数行を入力する場合は aria-multiline も付けます。

ワンタイムコードに数字キーパッドを出すなど、表示するスクリーンキーボードの種類を選びます。type="number" のような検証や増減ボタンは付きません。

要素にARIAロールを与え、それが何であるかを支援技術に伝えます。変わるのは読み上げだけで、動作は変わりません。そのロールを持つHTML標準の要素があれば、そちらを使います（下のARIAロールを参照）。

要素を最前面に表示するポップオーバーにし、popovertarget を持つボタンで開きます。auto のポップオーバーはEscapeキーや外側のクリックで閉じます。フォーカスを閉じ込めず、背後も操作できるため、モーダルダイアログではありません。

meta 要素をHTTPヘッダーのように働かせます。遅延付きの http-equiv="refresh" は避けます。自動で再読み込みやリダイレクトをすると、読み終える前にページが変わってしまいます（WCAG 2.2.1）。

リンク先のURLです。href のない a 要素はリンクではなく、フォーカスもできません。href="#" や javascript: でリンクをボタンとして使うことはしません。

リンクを開く場所を指定します。_blank は新しいタブやウィンドウで開き、利用者が戸惑ったり戻るボタンが効かなくなったりするため、必要な場合だけ使い、リンクテキストでそのことを伝えます。

画像のテキストによる代替で、その文脈で画像が伝える内容を書きます（WCAG 1.1.1）。装飾だけの画像には alt="" を指定して、スクリーンリーダーに読み飛ばさせます。alt を省くと、多くのスクリーンリーダーがファイル名を読み上げます。

ブラウザー標準の再生コントロールを表示します。キーボードとスクリーンリーダーで操作できるため、同等にアクセシブルな独自プレーヤーを作る場合以外は残します。

再生できるようになり次第、再生を始めます。3秒を超えて自動で流れる音声には一時停止や消音の手段が（WCAG 1.4.2）、動く映像には一時停止の手段が必要です（WCAG 2.2.2）。自動再生はしないのが最善です。

メディアを音声なしで開始します。ブラウザーは消音した動画の自動再生を許可しますが、動きがあれば一時停止の手段は必要です。

メディアの再生が終わると最初から再生します。自動で始まり5秒を超えて動き続けるループ動画には、一時停止の手段が必要です（WCAG 2.2.2）。

テキストトラックの種類です。聴覚障害のある視聴者向けに会話と効果音を書き起こしたものは captions（WCAG 1.2.2）、音声は聞こえても言葉が分からない人向け（翻訳など）は subtitles、テキストによる音声解説は descriptions にします。

テキストトラックの言語で、subtitles では必須です。利用者が分かる言葉で言語を示す label と組み合わせます。

このテキストトラックを最初から有効にします。ページの言語の字幕に付けると、利用者が設定を探さなくても字幕が表示されます。

見出しセルが列、行、またはそのグループのどれの見出しかを示し、スクリーンリーダーが各データセルとともに正しい見出しを読めるようにします。

このセルに対応する見出しセルの id のリストで、scope で表せない複雑な表に使います。まず表を単純にすることを検討します。

見出しセルのテキストの短縮形で、見出しが長いときに使います。スクリーンリーダーの対応はまちまちなので、見える見出し自体もなるべく短くします。

セルがまたがる列の数です。スクリーンリーダーは結合を伝えますが、結合セルが多いと表が分かりにくくなるため、可能なら複雑な表は分割します。

セルがまたがる行の数です。colspan と同様、セルを順にたどれるよう、結合は最小限にします。

label 要素を、その id を持つコントロールに関連付けます。コントロールにアクセシブル名が付き、ラベルをクリックするとコントロールにフォーカスしたり切り替えたりできます。

<optgroup>や<track>に名前を付けます。optgroupの名前は、多くのスクリーンリーダーが選択肢とともに読み上げます。trackの名前は字幕メニューに表示されるので、利用者が分かる言語名にします。

ラジオボタンをグループにまとめ、矢印キーで移動でき、スクリーンリーダーが選択肢の数を伝えるようにします。アクセシブル名ではないため、ラベルは別に必要です。

input 要素ではコントロールの種類（text、email、checkbox、date など）を決め、ロール、キーボード、検証が変わります。button 要素では submit、reset、button のどれかで、フォームを送信しないボタンには type="button" を指定します。

入力欄が集める個人情報の種類を示し、ブラウザーやパスワード管理ツールが自動入力できるようにします。利用者自身に関する入力欄には対応するトークンが必要で（WCAG 1.3.5）、運動機能や記憶に障害のある人の入力の手間も減らします。

空の入力欄に表示される例示のテキストです。ラベルではありません。入力を始めると消え、コントラストが低いことも多く、読み上げも確実ではありません。説明は表示されたラベルやヒントに書きます。

入力欄を必須にします。ブラウザーは未入力での送信を止め、スクリーンリーダーは「必須」と読み上げます。必須であることは表示されたラベルでも示し、色や説明のない「*」だけに頼りません。

フォームコントロールを無効にします。Tabキーの順序から外れ、操作できず、送信もされません。フォーカスできないため、利用者が気づかなかったり、無効の理由が分からなかったりします。フォーカスを残す場合は aria-disabled を使います。

入力欄の値を変更できなくしますが、フォーカス、読み上げ、送信はできます。disabled と違い、利用者は移動して文字を選択することもできます。

入力欄を<datalist>に結び付け、候補の表示とキー操作をブラウザーに任せます。自由な入力もできます。候補の見た目を変える必要がなければ、スクリプトで作るコンボボックスより簡単です。

details 要素の内容を表示するか、dialog 要素を表示します。ダイアログは open を付けるのではなく showModal() で開くと、モーダルになり、フォーカスも中に移ります。

ボタンで、その id を持つポップオーバーを開く、閉じる、または切り替えます。ブラウザーがボタンの展開状態を伝え、閉じるときにフォーカスがポップオーバー内にあれば、開く前の位置（通常はボタン）にフォーカスを戻します。

スクリプトを使わずに、ボタンで<dialog>やポップオーバーを開閉します。show-modalはshowModal()と同じく、ダイアログをモーダルで開き、フォーカスを中に移して、背後のページを操作できなくします。

ボタンのコマンドで操作するダイアログやポップオーバーを、idで指定します。スクリプトがなくても、読み込まれる前でも、ボタンが動きます。

押すと操作を実行するものです。ロールを付けた場合は、tabindex="0"を加え、EnterキーとSpaceキーで動くように自分で作る必要があります。それをすべて備えた<button>を優先してください。

実行すると別の場所へ移動する参照です。ロールを付けた場合は、フォーカスとEnterキーを自分で加える必要があり、ブラウザーのリンク機能も失われます。<a href>を優先してください。

オン、オフ、またはaria-checked="mixed"で一部オンになるチェックボックスです。aria-checked、フォーカス、Spaceキーでの切り替えが必要です。<input type="checkbox">を優先してください。

一つだけ選べる選択肢の一つです。aria-checkedが必要で、radiogroupの中に置き、組の中では矢印キーで移動して選択します。<input type="radio">を優先してください。

すぐに反映される設定のような、オンとオフを切り替えるコントロールです。aria-checked（"true"か"false"）が必要です。ロールを付ける土台には<button>が最も簡単です。

listbox内の選択できる項目です。listbox（またはその中のgroup）に含まれている必要があり、ARIA 1.2ではaria-selectedが必須です（選択中の項目はtrue、ほかはfalse）。

menu または menubar の中の操作です。menu、menubar、またはその中のgroupに含まれている必要があり、項目間のフォーカスは矢印キーで移動します。

「グリッドを表示」のように、オンとオフを切り替えられるメニュー項目です。aria-checkedが必要で、実行すると状態が切り替わり、通常メニューは開いたままです。

並び順のように、一つだけ選べるメニュー項目の組の一つです。aria-checkedが必要で、組はrole="group"や区切り線でまとめます。

tablist内のラベルの一つで、対応するtabpanelを表示します。aria-selectedと、パネルを指すaria-controlsを付け、タブ間は矢印キーで移動します。

タブが表示する内容です。タブを指すaria-labelledbyで名前を付け、表示していないパネルは非表示にします。

自由に文字を入力する欄です。aria-multiline="true"で複数行になります。<input>や<textarea>を優先し、contenteditableの要素にはロールと名前が必要です。

検索語を入力するテキスト欄です。このロールを持つ<input type="search">を優先し、検索フォームはsearchランドマークの中に置きます。

つまみを動かして範囲から値を選びます。aria-valuenowと名前、値を変える矢印キーの操作が必要です。<input type="range">を優先してください。

上下の矢印キーで値を増減できる数値の欄です。値があるときはaria-valuenowを付けます。数量には<input type="number">を優先してください。

処理の進み具合を示します。名前とaria-valuenow（aria-valueminとaria-valuemaxも）を付け、進み具合が分からないときはaria-valuenowを省きます。<progress>を優先してください。

tree内の項目です。子を持つ項目にはaria-expandedを付けます。treeまたはその中のgroupに含まれている必要があります。

grid または treegrid のセルで、フォーカスを受けたり編集したりできます。grid内のrowに含まれている必要があり、セル間は矢印キーで移動します。

候補のlistbox、grid、tree、dialogを開く入力欄です。aria-expandedと、ARIA 1.2ではポップアップを指すaria-controlsが必要です。強調中の候補はaria-activedescendantで示します。

一つ、またはaria-multiselectableで複数を選ぶ選択肢の一覧です。名前とoptionが必要で、矢印キーで選択を動かします。合う場合は<select>を優先してください。

アプリケーションのメニューのような、操作や設定の一覧です。サイトのナビゲーションリンクには使いません。スクリーンリーダーはメニュー用の動きに切り替わり、矢印キーでの操作を期待します。

デスクトップアプリのように常に表示されるメニューの列です。左右の矢印キーで項目間を移動します。menuと同じく、Webサイトのナビゲーションには使いません。

一組のラジオボタンを一つの名前でまとめます。名前を付けてください。HTML標準のラジオボタンなら、<fieldset>と<legend>で同じことができます。

タブの組を入れる要素です。tabを含む必要があり、名前を付けます。タブを縦に並べる場合はaria-orientation="vertical"を付けます。

フォルダーのように、開閉できる項目の一覧です。名前とtreeitemが必要で、矢印キーで項目を移動し、開閉します。

メールのスレッド一覧のように、行をtreeのように開閉できるgridです。行にaria-expandedとaria-levelを付けます。

カレンダーや表計算のように、矢印キーでセル間を移動する表です。Tab順に入るのは一つのセルだけです。中に操作できるものがなければ、通常の表を使います。

セクションの見出しで、スクリーンリーダーの利用者は見出し間を移動します。aria-levelが必要です（省略すると、ブラウザーは通常レベル2として扱います）。<h1>〜<h6>を優先してください。

項目の一覧で、項目数とともに読まれます。listitemを含む必要があります。<ul>や<ol>を優先し、list-style: noneなどのCSSでSafariがリストと扱わなくなる場合だけロールを付け直します。

リストの項目の一つで、listに含まれている必要があります。<li>を優先してください。

操作できない、行と列のデータです。<table>を優先してください。このロールは他の要素で作った表のためのもので、中にrowとcellが必要です。

table、grid、treegridのセルの行です。それらの中、またはその中のrowgroupに置く必要があります。<tr>を優先してください。

表の見出し部分や本体のような行のまとまりです。<thead>、<tbody>、<tfoot>を優先してください。

列の見出しで、その下の各セルと一緒に読まれます。<th scope="col">を優先してください。並べ替えできる表ではaria-sortを付けます。

行の見出しで、その行の各セルと一緒に読まれます。<th scope="row">を優先してください。

静的な表のセルで、rowに含まれます。<td>を優先してください。CSSグリッドで組んだ表では、displayの変更で失われる表の構造をロールで補えます。

インラインSVG、絵文字、アイコンフォントのように、複数の部品からなることもある一つの画像です。aria-labelまたはaria-labelledbyが必要で、子要素は読まれません。

図、グラフ、コード例のような独立した内容で、通常キャプションが付きます。<figure>と<figcaption>を優先してください。

関連するフォーム項目やメニュー内の区分のように、ランドマークではない関連要素のまとまりです。まとまりに意味があるなら名前を付けます。フォーム項目には<fieldset>を優先してください。

文字の書式ボタンのような、コントロールの組です。複数あるときは名前を付けます。Tab順に入るのは一つだけで、コントロール間は矢印キーで移動します。

セクションやメニューの区分の区切りです。<hr>を優先してください。フォーカスできる区切りはペインの大きさを変えるウィジェットになり、aria-valuenowが必要です。

持ち主の要素にフォーカスやポインターがあるときに出る短い説明です。ツールチップ自身はフォーカスを受けません。持ち主がaria-describedbyでこれを指し、Escapeキーで隠せるようにします。

手順の横のヒントのように、本文を補足する注記です。

投稿、コメント、商品カードのような、それだけで完結する内容です。<article>を優先してください。

最後まで進むと続きを読み込む、スクロールする記事の一覧です。記事にaria-posinsetとaria-setsizeを付け、追加中はフィードにaria-busyを設定します。

ディスク使用量やパスワードの強さのように、決まった範囲内の値です。進み具合には使いません。aria-valuenowと名前が必要です。<meter>を優先してください。

レイアウト用の表のように、要素自身のロールを取り除き、内容は残します。フォーカス可能な要素やグローバルなARIA属性を持つ要素では無視されます。presentationと同じです。

noneの古い名前で、要素のロールを取り除き、内容は残します。フォーカス可能な要素やグローバルなARIAを持つ要素では無視されます。<img alt="">はすでにこのロールを持ちます。

スクリーンリーダーにすべてのキーをページへ渡させ、読み上げ用のキーを止めます。ほとんどの場合は誤りです。すべてのキーを自分で処理し、読む必要のないウィジェットだけに使います。

ロゴや主なナビゲーションを含む、サイト共通のヘッダーで、1ページに一つです。article、aside、main、nav、sectionの中にない<header>を優先してください。

サイト内やページ内を移動するためのリンクの組です。複数あるときはそれぞれに名前を付け、名前に「ナビゲーション」は含めません。<nav>を優先してください。

サイトやページの検索を含む領域です。<search>を優先し、古いブラウザーに対応する場合は<form>にロールを付けます。

ページの主な内容で、スキップリンクやスクリーンリーダーのショートカットの移動先です。表示されるのは1ページに一つです。<main>を優先してください。

ランドマークの一覧に載せるほど重要なセクションです。名前があるときだけランドマークになります。aria-labelledbyを付けた<section>がこのロールを持ちます。

フォームを含む領域です。名前があるときだけランドマークになるため、見つけてほしいフォームには名前を付けます。aria-labelかaria-labelledbyを付けた<form>を優先してください。

関連リンクのように、本文を補い、それだけでも意味の通る内容です。複数あるときは名前を付けます。<aside>を優先してください。

著作権表示やポリシーへのリンクを含む、サイト共通のフッターで、1ページに一つです。article、aside、main、nav、sectionの中にない<footer>を優先してください。