h1要素の普及に努めたい

2024年1月9日 掲載

あけましておめでとうございます。

アクセシビリティの改善に長年取り組む中で、代替テキストをつけてほしいこと、単語内のスペースをなくしてほしいこと、「こちら」へのリンク設定をやめてほしいことを言い続けてきました。今年はh1要素の正しい普及に取り組みたいと思っています。

新NISAのスタートに当たりSBI証券へ

NISAが新しくなるのだそうです。これを機に、これまでの積み立て内容を見直してみたいと思い、SBI証券のウェブサイトを閲覧しました。ずらーっと続くグローバルナビゲーションに恐れおののき、耳慣れない金融用語や商品名も手伝って、久しぶりに私はページ内で迷子になりました。

SBI証券で「NISA」というワードを追っていくと

SBI証券のトップページから「NISA」というワードを追って自分の目的を果たそうとすると、SBI証券で新しいNISAをなんとかしようという人全員に向けての情報が大変なボリュームで展開されます。私が求めていたページはただ一つ。これまでのNISAの設定状況がわかるページにたどり着ければよかったのですがなかなか見つかりません。

結局のところ、あちこちぐちゃぐちゃ動いて目的のページにたどり着くことはできました。たどり着いてしまえばこれまでの設定の見直しと新たな設定は簡単。商品ページのフォームはわかりやすくできていて、ここで戸惑わせないところはさすがだと感じました。

新しいNISAのために、もしも視覚障害者がSBI証券のウェブサイトを音声で操作するときは、「NISA」というワードを追いながら慎重に確認や設定をするといいと思います。自分には必要のない情報が大量に聞こえてくると思いますが、必要なページへの案内も埋もれていますのでがんばって聞き取ってみてください。

悔しかったのでページの逆探索を試みました

それにしても、そのページへの案内がわかりにくい。悔しいので、どうしたら目的のページにすんなりとたどり着けたのかを確かめてみることにしました。

私の場合は、トップページの「取引」→「投資信託」と進み、「投信(積立買付)」というページが開ければよかったようです。ところが、「取引」→「投資信託」と進むと、開くページは「投資信託(金額指定買付)」というページなのです。

このことはそれほど悪いことではありません。よくないのは、「金額買付」以外に「口数買付」と「積立買付」があり、それぞれに切り替えられることになかなか気づけなかったことです。その理由は、最初に開くページの「投資信託(金額指定買付)」という見出し以降に、私の耳に切り替えるためのリンクが聞こえてこなかったからです。

切り替えるリンクがどこにあったかというと、「SBI証券(オンライン総合証券最大手)-オンライントレードで株式・投資信託・債券を-」というh1要素と、「投資信託(金額指定買付)」というh2要素の間でした。

SBI証券の「投資信託(金額指定買付)」画面のスクリーンショット:最上部のロゴはh1要素で、ページ主題に当たる「投資信託(金額指定買付)」はh2要素で記述されている

いろいろなh1要素

どんなページも、h1要素には主題が書かれていてほしいし、そのページの内容は見出し以降に展開していってほしいところですが、そうでないページやサイトはたくさんあります。

私は、見出しのレベルや位置がめちゃくちゃでも、慣れや工夫で閲覧できてしまうことが多々あります。今回のSBI証券のページも経験をしてわかってしまったので、次回からはまったく迷わないと思うのです。

見出しに関して有名なところでは、楽天市場のウェブサイトがめちゃくちゃです。商品ページの商品名に見出しがありません。ですからとても使いにくいのですが、そんなことに負けていてはお買い物が一生できませんので、見出しでないところをたよりに閲覧します。たとえば、私はフォームやリンクをキーボードショートカットやジェスチャで引っ掛けるなどの工夫をして閲覧しています。

また、発信者がどんなに気をつけてページをつくっても、どうしてもおかしなところにおかしなレベルの見出しができちゃうというしくみもあるようです。SNSやブログやECサイトのしくみを作る人には、このようなところに気をつけて設計してもらえるとうれしいです。

見える人は見出しを利用していないのですか?

このようなわけで、音でウェブメディアを操る私は、キーボード操作でもジェスチャでも見出しをひょいひょいっと引っ掛けて便利に情報収集をしているのですが、見えるみなさんはどうしているのですか。

周辺の人々に「見えるみんなも見出しに飛ぶの?」と聞いてみたら「そんなことはしていない」ということでした。「SBI証券みたいにグロナビいっぱいのページはどうしているの?」と聞いてみたら「スクロールでがんばっている」ということでした。私の周辺だけでしょうか。

もしも、見えるみなさんがスクロールで一生懸命やっているとしたら、私がお願いするh1要素への意識はみなさんに受け入れられにくいのかしら。メリットがなさすぎるのかな。それとも、見出しのレベルに応じてフォントが変わるとか、見出しがちゃんとしているとSEO的によきよきとかでそれなりのメリットを感じているのでしょうか。

見出しをひょいひょいっとひっかける方法

私は、スマホやタブレットをiOSのVoiceOverを利用して操作しています。そこに「ローター」という操作メニューがあって、その項目をいつも「見出し」に設定しています。すると1本指で上下にスワイプすることで見出しに飛べるのです。

必要な項目をローターに置いておくと、2本指でくるっと回すジェスチャでその項目が選択できるようになります。リンクを選択すれば、見出しではなくリンクに飛べるようになるということです。2本指でくるっと回すのにコツが必要でちょっと面倒くさいのですが、使えるとかなり便利です。

iOSの端末をお使いの方は、VoiceOverをオンにすれば試すことができると思います。ひょっとしたらオンにしなくてもできるのかな?ご興味がありましたらどうぞ。