いますぐ始める! ウェブアクセシビリティの基本

誰もが使いやすい! ウェブアクセシビリティを実現する5つのステップ

アクセシビリティを考慮したサイト作りの5ステップとPDF文書のアクセシビリティを確保する方法を紹介します。

ウェブアクセシビリティの必要性や具体的な対応法について考えてきた連載も今回が最終回です。

最終回では、アクセシビリティを考慮したサイト作りの5ステップやPDF文書のアクセシビリティを確保する意義や方法まで解説していきます。最後までお読みいただければうれしいです。

ウェブアクセシビリティ対応の5つのステップ

本連載で述べてきたように、アクセシビリティが考慮されていないサイトは多くのユーザーにとって使いにくい・使えないことがあります。アクセシビリティ対応をすることによって、これまで届くことができなかったユーザー層へアプローチすることが可能になり、ブランドイメージの向上も期待でき、特に海外展開に欠かせないコンプライアンスもカバーできます。

その一方、ウェブサイトをアクセシビリティ要件に適合させる手間や工数に頭を悩ませる方もいるでしょう。第1回第2回までで述べてきたように、ウェブアクセシビリティの確保は決して難しいものではありません。ウェブアクセシビリティに対応したサイトを作りたい場合は、次の5つのステップで考えていきましょう。

第1ステップ:ガイドラインや技術を理解する
第2ステップ:ウェブアクセシビリティを早い時点で取り入れる
第3ステップ:アクセシビリティ問題点を検出する
第4ステップ:最重要なイシューに優先的に取り掛かる
第5ステップ:ウェブアクセシビリティへのコミットメントを成文化して発信する

第1ステップガイドラインや技術を理解する

第1ステップは「ガイドラインや技術を理解する」です。

まず 押さえておくべきは、第2回で解説した「WCAG(Web Content Accessibility Guidelines)」です。これはW3Cが策定しており、世界で標準的に使われているガイドラインで、最新版はWCAG2.2 す(2024年6月時点) 

また、日本のウェブアクセシビリティ基盤委員会(以下、WAIC)が策定したJIS規格「JIS X 8341-3」も意識しておく必要があります。

そして、支援技術についても理解を深めておかなければなりません。支援技術とは、PCやモバイル端末などを使用する際に支援が必要なユーザー向けに、それぞれのニーズに応じた機能を提供するソフトウェアやハードウェア、デバイスなどを総称する用語です。

ウェブページを利用する際に使用されている支援技術には、ページ上の情報を読み上げるスクリーンリーダーや、マウス操作が困難な方向けのトラックボールやジョイスティック、文字を読みやすくする画面拡大機能、色の反転機能などがあります。

第2ステップウェブアクセシビリティを早い時点で取り入れる

アクセシビリティ対応とは「問題が出てきたら直す」という考えが多く、それによって「コストがかかるもの」と考えられることが多いようです。しかし、アクセシビリティ観点をはじめから持ち、デザインや開発に取り入れていくことで、問題の発生自体を防ぐことができます。

筆者もウェブアクセシビリティのコンサルティングをする中で、対応を後回しにするほどコストがかかってしまうケースを目の当たりにしてきました。できるだけコストを押さえるためには、早い時点でウェブアクセシビリティを検討することが重要です。

米Forrester Research社が2018年に行った調査によると、ウェブアクセシビリティやインクルーシブデザインに1ドル費やすごとに平均9ドルのリターンが得られるという試算が出ています(リンク先11ページ参照)。

では、具体的にどんな行動が必要なのでしょうか。着手すべき施策は次の3つです。

(1)ウェブアクセシビリティ方針を立てる

アクセシブルなサイト作りに取り組む際には、まず以下の2つのポイントを押さえて方針を立てましょう。

  1. 対象範囲を決める
  2. 「何を目標としているのか」を明確にする
    WCAGにはA、AA、AAAと3段階の対応レベルが掲示されています。このうち、他国の法律やポリシーではAAに適合することが推奨されています。

これらのポイントは、デジタル庁が発行している「ウェブアクセシビリティ導入ガイドブック」で紹介されています(リンク先17〜18ページ参照)。また、方針を策定するに当たって、WAICが公開しているウェブアクセシビリティ方針策定ガイドラインのサンプルを参照することをお勧めします。

(2)アクセシビリティに強いCMSを選定する

企業のウェブサイトはCMSを活用して構築することが多いですが、その際にはアクセシビリティが考慮されたCMSの選定をお勧めします。

たとえば、Adobeが提供するCMSは「Adobe Experience Manager(以下、AEM)」ですが、AEMではアクセシビリティ対応検証済みの「コアコンポーネント」を公開しています。画像やテキスト、カルーセル、ボタンなど、サイトを作り上げるパーツとなるコアコンポーネントのHTMLはWCAG 2.1 AAの要件に適合するように実装されています。

AEMを基盤として作られるサイトはこれらのコンポーネントをそのまま組み合わせたり、機能をカスタマイズするために開発を加えたりすることで構築されますが、ベースとなるコアコンポーネントはアクセシビリティ対策がとれているため、初期構築のアクセシビリティ対応の負担を減らすことが期待できます。

(3)ウェブアクセシビリティに詳しいコンサルタントと働く

サイト作りにあたってアクセシビリティ対応に詳しいコンサルタントや専門家と働くことをお勧めします。

CMSがアクセシビリティ対応済みでも、実際の開発ではコンポーネントをカスタマイズして使うケースが大半です。カスタマイズによってアクセシビリティが損なわれることもあるので、専門家を入れることでそうしたリスクを削減できます。

専門コンサルタントに、まず既存のサイトやブランドガイドラインを確認して主要な問題点を洗い出してもらうほか、開発時のアクセシビリティ確保の監修、ウェブサイトの継続的な運用の中で気を付けるべき事柄のガイドライン作成などを依頼しすることで新規構築から運用までアクセシビリティを考慮したサイト作りに取り掛かりましょう。

第3ステップ アクセシビリティ問題点を検出する

続いては、現状のサイトのアクセシビリティ課題を検出します。手軽なのは、第1回で紹介したGoogle Lighthouseなどの無償ツールを使って問題点を自動チェックしてみましょう。

ただし、このようなツールは標準ガイドラインの基準のうち2〜3割ほどしかカバーされていないので、専門家にアクセシビリティ診断をしてもらうことも一つのオプションです。専門家の場合、目視や動作確認などを行なってもらい、具体的な指摘やアドバイスをもらえます。

可能であれば、障害者も含むユーザビリティテストも実施して、ユーザー視点で評価してもらうのが理想的です。ガイドラインに準拠することと、実際に使いやすいことは別なので、ユーザビリティテストを実施することで想像していなかった問題点を検出し、より進んだ対応が実現できます。

第4ステップ最重要なイシューに優先的に取り掛かる

第3ステップで抽出された課題に対して優先順位を付け、高い項目から解決策に取り掛かっていきます。優先順位付けは専門家と共に進めるか、専門家がいない場合、または優先順位がわからない場合であれば、ウェブアクセシビリティコンサルタントの植木真氏が提唱する「Webアクセシビリティ確保 基本の「キ」」で紹介されている10項目を参考にしてください。

第5ステップウェブアクセシビリティへのコミットメントを成文化して発信する

これらのプロセスを踏み、より積極的にアクセシビリティに取り組んでいくなら、ステップ2で定めたウェブアクセシビリティ方針を対外的に発信することをお勧めします。

たとえば、ユーザーがサイトをアクセスするにあたって困っていること、気づいていることがあれば連絡できるようにフォームなどの相談窓口を設置します。こうしてプロアクティブに問題解消の姿勢を見せることで、「ウェブアクセシビリティを推進したい」という姿勢を示すことができます。

これは第1回でお話したように、「障害者ユーザーが困りごとがあっても声を上げにくい」といった問題点の解消にもつながります。人々のニーズは人それぞれなので、何か要望が届いた時にすぐ対応できるように準備しておくことがポイントです。

最後に:あらゆる情報をアクセシブルにしよう

最近、「ウェブサイトに掲載しているPDFもアクセシブルにした方がいいのでしょうか」「ウェブアクセシビリティ方針にPDFも含めるべきでしょうか」などのご相談を受ける機会が増えてきました。

ウェブサイトに掲載しているPDFは、発信している情報の一部ですし、ユーザーに伝えたいという意図があるからこそ公開しているのだと思います。そうであれば、PDFもアクセシブルであることは必要と考えます。

WCAGにもPDFのアクセシビリティ対応テクニックが記載されており、アクセシビリティの対象になっています。また、PDF/UAという国際的なアクセシビリティの基準も存在します。PDFのアクセシビリティ対応について参考にしてみてください。

ではアクセシブルなPDFとはどのようなPDFなのでしょうか。先ほど紹介したデジタル庁の「ウェブアクセシビリティ導入ガイドブック」には以下の記載があります。(48ページ参照)

  • 見出し、リスト、外部リンクなどの情報を追加できるタグを追加する
  • 画像に代替テキストを付与する
  • 文章と画像の読み上げ順序が正しくなるように画像にアンカーを追加する
  • 目次から該当文章に移動するリンクを追加する
  • 言語設定、文章名などのプロパティを設定する

アクセシビリティの高いPDFを作るためにはいくつかの方法があります。一つ活用できるのはPDFファイルを編集するためのツールです。

PDFファイルの閲覧・編集・作成・検証を行う有償版の「Adobe Acrobat Pro」は、アクセシビリティチェック機能が搭載されています。チェックを実施すると、検出された問題点がレポートとして上がり、こちらには問題の修正を支援するツールや文章へのリンクが記載されています。

Adobe Acrobat Proのアクセシビリティ機能

このレポートで検出された問題点を順番に確認し、特に重要なコンテンツの問題点を識別して修正していくことで、PDF文書のアクセシビリティを向上することができます。詳しくは「アクセシビリティ対応のPDFの作成および検証(Acrobat Pro)」をご覧ください。

すべての人が平等にデジタルコンテンツにアクセスできるようにすることはサイトを運営する企業の重要な責任であり、継続的にアクションを取っていくべきものです。決して難しい取り組みではなく、意味のあることだと感じてくださったら嬉しいです。

今年の障害者差別解消法改正の施行や、世界中で高まるアクセシビリティの意識をきっかけとして、ぜひ最初の一歩を踏み出してください。

用語集
CMS / HTML / UA / アクセシビリティ / タグ / ユーザビリティテスト / リンク / 外部リンク
この記事が役に立ったらシェア!

最新のニュース

メルマガの登録はこちら Web担当者に役立つ情報をサクッとゲット!

人気記事トップ10(過去7日間)

今日の用語

Google広告
Google検索、YouTube、Googleマップ、Google Playスト ...→用語集へ

インフォメーション

RSSフィード


Web担を応援して支えてくださっている企業さま [各サービス/製品の紹介はこちらから]