［連載］植木 真の「"勝手に" ＆ "こっそり" Webアクセシビリティ診断」
第6回：グループを挙げての取り組みに期待！

さて、第6回目を迎えたこの連載。タイトル通りに、「"勝手に" ＆ "こっそり"」と、いろいろな「Web」コンテンツの「アクセシビリティ診断」をしてみようという企画です。今回のターゲットは･･･？

つい先月のことですが、ある大手企業グループの主要各社が立て続けに、ウェブアクセシビリティの方針をウェブサイト上で公開しました。AccSellのクリッピングやポッドキャストでも取り上げたこのニュース。すぐにピンときた方は、なかなかのアクセシビリティ情報通かもしれません（笑）

その大手企業グループとは、そうです、○○グループです。○○グループ企業各社が、ウェブサイトのアクセシビリティ確保と向上を目指して、具体的にはJIS X 8341-3:2010への対応に着手することをそれぞれの方針の文書で明らかにしました。

方針で示された取り組み内容には、目安となるスケジュールには多少の差はあるようですが、まずはウェブサイト内の主要なページから着手するという点では共通しています。これは他の企業ウェブサイトの事例にも多く見受けられるもので、第一目標として主要なページからまずやってみるというのは、とても良いスタートのしかただと思います。小さく始めて、ノウハウや経験を積み重ねながら、少しずつ対象範囲を拡げていくというのは、組織が大きければ大きいほどより確実なアプローチだといえます。

というわけで、今回はその○○グループにスポットをあて、その中でも持ち株会社のWebサイトを診断してみます。

• サイト名：○○公式ホームページ
• 今回チェックしたページ：主要なページ群を約20ページ程度

全体的には一定レベルでのアクセシビリティは確保できている

チェックしたページは、静的でシンプルなHTMLのウェブページだったこともあり、アクセシビリティ確保の基本ともいえる主なポイントは既にしっかりと押さえられているという印象を受けました。具体的には、例えば以下のような点が挙げられます。

• ページの内容を示すページタイトルが提供されている
• ページにある見出しがh1～h6要素でマークアップされている
• 画像の代替テキストがしっかりと提供されている
• キーボードだけでも操作可能である
• 文字と背景のコントラスト比が確保されている
• Flashコンテンツ内にも代替テキストが提供されている

とはいえ、ページによっては、これらのポイントにおいても、気になる箇所がないわけではありません。JIS X 8341-3:2010の達成基準で要求されているのは最低限のレベルですから、それ以上のことも含めて一緒に見ていきましょう。

今回気になったポイントは、次の2つです。

• ページタイトル
• 代替テキスト

では、順番に見ていきましょう！

ポイント1. ページタイトル

チェックしたページを見たかぎりでは、ページタイトルにはそのウェブページの内容が分かるタイトルが記述されていました。ただ、数ページを見ただけでも気になった点があります。実際に使われているページタイトルの文言を並べてみましょう。例えば、ナビゲーションバーにある8つのコーナーのトップページです。

• ○○ HOME > ○○グループ　ニュースリリース
• ○○ Home Page > 各社へのご案内
• ○○ Home Page > 商品・サービス
• ○○ Home Page > 社会環境活動・災害対策
• ○○ Home Page > 会社案内
• ○○ HOME > 株主・投資家情報
• ○○ Home Page > 研究開発
• ○○ Home Page > 採用のご案内

気になる点は二つ。まず、多くのページタイトルは「○○ Home Page >」で始まりますが、「○○ HOME >」で始まるものもあります。表記に一貫性がないのです。このウェブサイトのHOMEページを見ると、ページタイトルは「○○公式ホームページ」となっています。もしこれがウェブサイト名なのだとしたら、どのページのページタイトルでも「○○公式ホームページ」という表記で統一したほうがよいと思います。もちろん、ウェブサイト名が別にあるのなら、それで統一します。

そして、もう一点は、ページタイトルのタイトル部分がtitle要素内の末尾にあることです。さらに下位階層のページを見てみましょう。すると、ページタイトルは「○○ Home Page > 社会環境活動・災害対策 > ○○グループにおける災害対策の取組み > 通信のご利用方法」というふうになっています。「>」で間をつないでいますが、こうして見ると、ページタイトルというよりもパンくずリストのようでもあります。

このように、ページタイトルの中でもタイトルに該当する部分、つまりそのウェブページの主題を示している文言が一番最後に記述されています。ブラウザのタブやお気に入り、履歴の一覧では、ページタイトルの後ろの方は表示されずに省略されてしまいますから、これでは他のページとの区別が付かなくなってしまいます。スクリーンリーダーでも最後まで全部聞かないと、どのページなのか確認できません。

ページタイトルについて、JIS X 8341-3:2010の達成基準7.2.4.2（等級A）では、「主題又は目的を説明」することしか要件になっていません。ここは次のようにしては、いかがでしょうか。title要素には、「ページタイトル」＋「サイト名」の順で記述することです。前述のページタイトルは、例えば、次のようになります。

• ○○グループ　ニュースリリース｜○○公式ホームページ
• 各社へのご案内｜○○公式ホームページ
• 商品・サービス｜○○公式ホームページ
• 社会環境活動・災害対策｜○○公式ホームページ
• 会社案内｜○○公式ホームページ
• 株主・投資家情報｜○○公式ホームページ
• 研究開発｜○○公式ホームページ
• 採用のご案内｜○○公式ホームページ

「○○ Home Page > 社会環境活動・災害対策 > ○○グループにおける災害対策の取組み > △△のご利用方法」というのも、「△△のご利用方法｜○○公式ホームページ」でよいと思います。ただ、この場合はもう少し文言を補足して、「災害時の△△のご利用方法｜○○公式ホームページ」としたほうがよいかもしれません。いずれにしても、title要素内ではサイト名は後ろ、そしてパンくずリストのような表記にはせずに、そのウェブページの主題が分かるページタイトルを記述するというのをオススメしたいと思います。

ポイント2. 代替テキスト

さて、HOMEページを見てみましょう。画像が比較的多めに使われていますが、代替テキストもしっかりと提供されています。例えば、メインビジュアルの下にある「○○グループについて」と「○○（持株会社）について」という見出しのセクションにあるリンク画像です。よく見かけるのは、画像にある文字数が多い場合、その一部を省略しているケース。ここにあるリンク画像については、画像にある文言をそのまま代替テキストとしてalt属性に記述しています。

また、メインビジュアルではFlashを使用しているのですが、そのFlash内にあるボタンやリンクにもしっかりと代替テキストが提供されています。記述内容にやや冗長な感もありますが、視覚的に伝えている情報が抜け落ちているわけではないので、ヨシとしましょう。Flashではnameプロパティというのを用いるのですが、これがHTMLのalt属性に相当するもので、代替テキストを提供する際にはnameプロパティを用います。

ただし、改善の余地もあり

ただ、代替テキストにも改善の余地があるようです。例えば、HOMEページの中ほどに「ご注意ください」という枠で囲まれた部分があります。ここにある黄色の三角形で感嘆符（！）の画像があるのですが、代替テキストとして alt="注意マーク" と記述されています。ここはテキストの「ご注意ください」と重複しているので、ここではalt属性を空（alt=""）にしたほうがいいように思います。

また、すぐその後にあるテキストリンクの前に右向きの青い三角の画像があり、alt="→" という代替テキストが提供されていますが、これもわざわざ記述しなくてもいいのではないでしょうか。少なくとも、矢印ではありません。

そして、このページの右下には縦一列でバナーのようなリンク画像が幾つも並んでいますが、alt属性値の代替テキストを見ると、画像にある文言だけでなく、少し文言が補足されていたり、逆に不足していたりするようです。これも決してNGとはいえないかもしれませんが、基本的には画像にある文言をそのまま記述すればよいのではないかと。

つづきはメルマガで……。