リーダービューに切り替える

ランドマークを実装していたらリーダービューに切り替えられるようになっていました。

リーダービュー

Firefoxが、ページの記事を読みやすくするために使わせてくれる機能です。

リーダービューは、ページの記事を読みやすくするFirefoxの機能です。記事本文とは関係ないボタンや広告、背景画像、動画を取り除き、レイアウトやテーマを変更して、読みやすい表示にカスタマイズできます。

Google Chrome にも簡易表示というユーザー補助機能があります。

一部のページは、記事の内容に焦点を当てた簡易表示で読むことができます。

どちらも文章主体のページで使わせてもらえるように感じていましたが、使えないページもありました。2万字あっても駄目なときは駄目でした。

ランドマーク

そこでランドマークの登場です。特にリーダービューとは関係ありませんでしたが、実装してみたらリーダービューが使えるようになっていました。

<header>role=banner</header>
<main aria-label="role=main">
    <section aria-label="role=region">
        <article>role=article</article>
    </section>
</main>
<footer>role=contentinfo</footer>

それまでも認識はしていたのですが、HTML要素には暗黙のARIAロールなるものがあり、たとえば<header>はrole="banner"かもしれない、程度のものでした。

<header>role=banner</header>
<main aria-label="role=main">
    <article>role=article</article>
</main>
<footer>role=contentinfo</footer>

あまり違いがないようで、以前のHTMLではrole="region"が抜けています。

よくよく調べてみたところregionロールは重要なコンテンツを含むランドマークであるそうです。もしかしたらウェブブラウザが記事を探すときは、regionロールを当てにしている部分もあるのかもしれません。

A landmark containing content that is relevant to a specific, author-specified purpose and sufficiently important that users will likely want to be able to navigate to the section easily and to have it listed in a summary of the page. Such a page summary could be generated dynamically by a user agent or assistive technology.