関連記事
- 【0.気持ち整理編】
- 【1.導入編】
- 【2.キーボード操作】
- 【2-1.キーボード操作改善＋スクリーンリーダー編】
- 【3.スクリーンリーダーでの読み上げ改善編】ここから始めようWebアクセシビリティ
- 最終回 いまここ 【4.ランドマークをみて改善編】ここから始めようWebアクセシビリティ
振り返りと概要
前回の記事ではスクリーンリーダーで適切な読み上げがされるように修正しました。
さてみなさん、Webサイトを見る時、すべてのコンテンツに目を通しますか？
全部見る人もいるかもしれませんが、おそらくヘッダーやサイドバーは頻繁には見ないし、
最初に見るのはおそらくメインコンテンツで、しかもその中の見出しなどを見て自分が見たいものがありそうならそこから読むことも多いかと思います。
ナビゲーションを見たい時、メインコンテンツを見たい時、のように、読みたい部分がグルーピングされていると目的のコンテンツに辿り着きやすいですよね。
スクリーンリーダーにはランドマークという機能が備わっています。
この記事ではランドマークの表示方法や操作方法、そしてちょっとした改善を行います。
ランドマーク
本当はWindowsでよく使われているスクリーンリーダーで説明した方がいいとは思いますが、
この記事ではMacで開発している方を対象とし、VoiceOverでの操作方法を説明します。
- 前回対応したページでまずVoiceOverを起動しましょう。
- 次に、その状態で
ctrl + option + Uキーを同時に押しましょう。 - そうすると
こういうものが表示されると思います。
フォームコントロールや見出しが表示される人もいるかもしれません。その場合は左右キーを押すことで別のメニューを表示できます。
このメニューは
- メインコンテンツやナビゲーションに飛べるようになっているか
- 見出しの内容が適切か、見出しレベルが正しいか
- リンクテキストが適切か
- フォームコントロールが適切か
このような項目をチェックするのに便利です。
さて、今表示されたランドマークメニューですが、本文がないのでこのメニューからメインコンテンツに飛べません…。
不便ですよね。これを修正しましょう。
3分間クッキングではあらかじめ用意されたものがよく使われますが、この記事でも同じように修正後のページを用意しておきました。
修正後のページはこちらです。
修正内容
- メインコンテンツを
mainタグで囲った - パンくずを追加した
この二つを対応しました。
HTML５が出たタイミングで既にheaderタグやnavタグ、mainタグ、footerタグを使用している人も多いと思います。
すばらしい！そういう方は既にランドマークにそれが表示されています！
先ほど表示されたランドマークには、
- バナー
- ナビゲーション
- フッター
が表示されていました。
バナーというのはヘッダーのことです。（ちょっとわかりにくいですね。headerタグはデフォルトでrole="banner"を持っています）
このように、適切なタグでマークアップしていればランドマークもある程度表示されます。
前回までの対応ではわざとmainタグを使わずマークアップしていたので、ランドマークに「本文」が表示されていませんでした。
mainタグで本文を囲うとランドマークに「本文」が表示されます。
確認してみてください。
パンくず
また、今回は
<nav aria-label="パンくずリスト">
<ol>...</ol>
</nav>
でパンくずを追加したので
この画像のようにランドマークに「パンくずリスト ナビゲーション」も追加されています。
navタグをページ内で複数回使用すると、ランドマークに「ナビゲーション」が複数表示されるのでわかりにくくなってしまいます。
特に必要がないのであれば、グローバルナビのみにnavを使用することをお勧めします。
ユーザーにとって有益なメニューがある場合はaria-labelを付与して複数のnavを配置してもいいと思います。
個人的にはパンくずはページ内に必ずあった方がよいと考えており、パンくず自体もランドマークに含めるべきだと考えているためランドマークに含めています。
また、今回新しく追加したパンくずリストの最後の項目のaタグにはaria-current="page"を追加しています。
これによってリンクにフォーカスした時にこのリンクが現在のページのリンクであることが読み上げられるようになり、少し親切になります。
パンくず最後の項目はリンクにしないところも多いと思いますが、個人的にはリンクにした方が親切だと思っています。
まとめ
今回はランドマークに
- 本文
- パンくず ナビゲーション
を含めることによって、本文からすぐに読むことができ、またパンくずにもランドマークから飛んでこのページより前のページにすぐに戻ることができるようになりました。
どちらも不便にはなっておらず、今までよりも便利になっていますよね。
「ここから始めようWebアクセシビリティ」シリーズの記事では工数を追加するほどでもないくらいの労力でざっくりアクセシビリティを改善してきました。
その結果、
このようにフォームコントロールにもボタンやタブが含まれるようになり、主要なスクリーンリーダーでコンテンツのあらゆる場所にアクセスしやすくなり、アクセシビリティが向上しました。
もちろん色の改善や難しいUIの改善など、工数がかかる部分はあると思います。
しかし、ちょっとタグを変えたり属性を追加したりするくらいであれば今すぐにでもできると思いませんか？
その結果、いろんな人が情報にアクセスできるようになり、みんなにメリットがある優しい世界になると思いませんか？
このシリーズはこの記事で終わりです。
みなさんのWebサイトやアプリケーションでそれを利用するユーザーから、さらに視野を広げてまだ利用していないユーザーに対してもアプローチできるのがアクセシビリティのいいところです。
【1.導入編】ここから始めようWebアクセシビリティにいくつか書籍の紹介もしています。
チームで輪読会を開いたり対応した内容を共有しあう場所を作ったりしてみましょう。
ここからはみなさん次第です！
みんなでよりよいWebを作っていきましょう！
また、できるだけ短く書いたつもりではありますが、このシリーズでは6記事まで書くこととなりました。
ここまで読んできてくださったみなさん、ありがとうございました。
みなさんの活躍でWebがもっとアクセシブルになることを願っています。