Banner role - 一番上に来るアレ

APG 見るより、W3Cの勧告見た方がわかりやすいのでは？

APG の Index が role毎にサンプルまとめてくれていたので、これ見たら理解が捗るかと思いきや、あまりに実例に寄りすぎて、肝心のこのroleって何なん？てのを明確に教えてくれない。

roleに関して言えば、先にW3Cの Definition of Roles で見た方がイメージが掴めると思う。

というわけでまずはW3Cのページで Banner role の定義確認

Banner role とは

A landmark that contains mostly site-oriented content, rather than page-specific content.

Site-oriented content typically includes things such as the logo or identity of the site sponsor, and a site-specific search tool. A banner usually appears at the top of the page and typically spans the full width.

直接ページとは関係なく、サイト全体に関した内容を含むランドマークである。と。

よくあるのは、ロゴとかスポンサーを提示するものだったり、サイト検索のツールだったりする部分のこと。
バナーは得てしてページの最上部に全幅で鎮座してたりするよ。とのこと。

百聞は一見

の最上部青いとこ

の最上部青いとこ

の最上部緑いとこ

の最上部黒いとこ

こやつらはHTMLの構成要素的には、<header> になるんだけど、直接ページとは関係ないし、
navigationでもないし、、、みたいなものにつける免罪符的な役割だと理解した

<header role="banner">
    <p>Google Pixel 8 発売中！</p>
</header>
<nav>
    ...
</nav>
<main>
    ...

必要なインタラクション

は特にないみたい

その他・気になるもの・語句メモ

W3Cの方に個別のroleで利用できるaria-x属性が網羅されているが、
roleを使う際は必ず特定のaria-x属性を伴っていないといけないroleてのは意外と少なくて
今のところ全部で11roleしかないようだった

• checkbox
• combobox
• heading
• meter
• menuitemcheckbox
• option
• radio
• scrollbar
• separator
• slider
• switch

大体はinputのようなcontrolするやつで、異色なとこだと
heading, meter, separator あたりか、何がなんで必要なんだろ？
そのあたりは該当するroleを調べた際にでも気にかけよう