📖

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

2022/11/18に公開約2,800字

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

<header>サイト上部</header><!-- role="banner" -->
<main><!-- role="main" -->
    <header>ページ上部</header>
    <section aria-labelledby="..."><!-- role="region" -->
        <article>ページ本文</article><!-- role="article" -->
    </section>
    <footer>ページ下部</footer>
</main>
<footer>サイト下部</footer><!-- role="contentinfo" -->

リーダービュー

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

このとおり Firefox が、よく文章主体のページを読むときに使わせてくれる。Google Chrome にも簡易表示というユーザー補助機能がある。

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

私はその「一部のページ」が何かを知るために、時々思いついたようにリーダービューのことを検索していました。文章主体の自分のサイトもリーダービューに切り替えたかったのです。しかし、どうやら文章主体の、文字数が多いだけのページでは、切り替えの対象にはならないようでした。2万字あっても駄目でした。

ランドマーク

先日また思いついたようにランドマークを実装した。動機としては Accessibility & Material Designregion を見かけた。

恥を忍んで言うと、それまでも認識はしていたが、理解してはいなかった。HTML 要素には暗黙の ARIA ロールがあって、たとえば <header>banner だったりそうでもなかったりする、という程度の。

よって、なんとなく(ざっくり)このような構成にしていた。

<header>サイト上部</header><!-- role="banner" -->
<main><!-- role="main" -->
    <header>ページ上部</header>
    <article>ページ本文</article><!-- role="article" -->
    <footer>ページ下部</footer>
</main>
<footer>サイト下部</footer><!-- role="contentinfo" -->

あんまり間違っていなかったのではないかとも思っている(信じていたい)けれど、region は取り入れていなかった。だから、正しくもなかったのだろう。

<header>サイト上部</header><!-- role="banner" -->
<main><!-- role="main" -->
    <header>ページ上部</header>
    <section aria-labelledby="..."><!-- role="region" -->
        <article>ページ本文</article><!-- role="article" -->
    </section>
    <footer>ページ下部</footer>
</main>
<footer>サイト下部</footer><!-- role="contentinfo" -->

このように、ざっくり記述を改めてみたら(なぜか)私のサイトの文章主体ページでリーダービュー(と簡易表示)が使えるようになっていました。検証はしていません。

よくよく調べてみたところ 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.

Discussion

ログインするとコメントできます