タグ: アクセシビリティ、ネットスーパー、ネットリーダー、見出しタグ

  • Webアクセシビリティについて

    普段、パソコンを音声で利用されている方から相談がありまして、ネットスーパーについて調べています。
    食料品や日用品をネットで注文して配達してくれるサービスです。
    視覚障がい者の方など、このようなサービスが便利に使えれば日常生活がとても楽になると思います。
    すでに活用している方も多いと思います。

    以下、Windowsパソコンメインの内容です。

    パソコンを音声利用するには、まず読み上げソフトが必要です。
    日本語の品質の良さから、高知システム開発さんのPC-Talkerなどが多く使われているようです。
    例えば、このPC-TalkerとIE(Internet Exploler)があれば、とりあえずホームページを開いてコンテンツを読むことができます。画像やFlashなどのアニメーションで作られているコンテンツはそのままでは読めませんが、アクセシビリティに配慮して作られていれば、代替テキストなどによってその画像やアニメーションの内容を知ることができます。

    そして、さらにホームページの読みあげを快適にするためのネットリーダーというソフトがあります。
    これも高知システム開発さんが開発・販売されています。
    NetReaderのご案内
    ※体験版をダウンロードして試すことができます。

    で、本題。
    ネットリーダーを使って、2件ほどネットスーパーを利用してみました。
    いずれのサイトも、同じようなページレイアウトで、

    • ヘッダ
    • メインメニュー
    • サイドメニュー
    • メインコンテンツ
    • フッタ

    およそこのようなページ構成になっています。
    そして、例えばお買い物を始めると、商品カテゴリがずらっと並びます。

    • 食料品
    • 日用品
    • 衣料品

    このような感じです。
    それぞれの商品カテゴリには10~30種類のサブカテゴリが含まれます。
    画面を見てマウス操作ができる場合はこれで問題ないのですが、これを音声で利用するとなると画面上にあるすべてのテキストを読み上げてから次の操作を行うことになります。

    なので、例えばメインカテゴリ5種類、サブカテゴリ各20種類とすると100種類のカテゴリを読み上げたあとでその中から購入したいカテゴリを選ぶという操作になります。通常、キーワードによる検索の機能が用意されているのでそれを使って検索ということもできますが、その場合でも画面上には他の商品が簡単に探せるように、すべてのカテゴリが表示されています。要するにどのページに遷移しても、すべてのカテゴリやメニューを読み上げないと先に進めない状態になります。

    そこでどうすればよいか。

    • 不要なカテゴリを省略
      例えばカテゴリの表示については階層型にして、現在開いている商品カテゴリについてはサブカテゴリまで表示するが、それ以外の商品カテゴリについてはサブカテゴリを表示しない。
    • 見出しタグを適切に配置
      ネットリーダーには見出しタグによってページ内をスキップする機能があります。
      ページ内コンテンツをグループ分けして、各グループに対して適切な見出しタグを設置すると、とても効率よくページ内を移動できますのでページ全体が把握しやすくなります。
    • 不要なコンテンツを省略
      すべてのページが同じレイアウトになっていればアクセスしやすいという見方もありますが、ネットリーダーを使って閲覧してみると、目的のコンテンツ以外を毎回読まないといけないのは結構わずらわしく感じると思います。

    デザインやプログラムの都合もあると思いますが、例えば見出しタグを配置するのはそれほど大きな影響を与えずに対応しやすいのではないかと思います。
    少し試しただけできちっとした調査ではありませんが、せっかくのサービスですので少しでも多くの方に快適に利用していただきたいですよね。
    何かヒントにでもなれば幸いです。