この記事を書いた人
- 富本ディレクター／フロントエンドエンジニア（ビジネス・アーキテクツ）
地元・愛知の印刷会社や広告会社にてWeb制作に携わる。2014年頃、フロントエンドエンジニアとしてBAに入社。現在、ディレクターとして開発・運用の進行管理やWebサイトのガイドライン作成やコンポーネントの設計・作成を担当しています。好きなキャラクターはリラックマ。イタリアとスイスに行きたい。
近年、Webアクセシビリティの重要性がますます高まっています。障害をもつ方々、高齢者、また海外からの訪問者など、さまざまな背景をもつユーザーにとって、Webサイトが使いやすい環境を提供することは、企業にとっ ても大きなビジネスチャンスとなります。Webアクセシビリティを高めることで、企業は顧客体験を向上させ、新たな顧客層にリーチできる機会を得られます。
本記事では、アクセシビリティの高いWebサイトが企業にもたらす多面的な効果について解説しつつ、その具体的な手法の一つとして、PowerCMS XのWebアクセシビリティに関する先進的な機能を、実際に試してみた体験を元にご紹介します。
今回ご紹介するPowerCMS Xの機能は、アクセシビリティ向上の各種手法をサポートし、Web運営をより効率的に、そしてユーザーフレンドリーにします。アクセシビリティの向上がどのように企業の成長を後押しするのかをご理解いただけるでしょう。
Webアクセシビリティの高いサイトが企業にもたらす効果
Webアクセシビリティの高いサイトが企業にもたらす効果は、さまざまな視点から考えられます。この章では、ユーザー・ビジネス・法律・社会的な観点などから重要性と企業にもたらす効果を解説します。
Webアクセシビリティの重要性とその効果
Webアクセシビリティとは、さまざまなユーザーが平等にWebを利用できるようにするための取り組みです。視覚・聴覚・運動・認知などの障害をもつ人だけでなく、高齢者や視界の悪い状況や骨折など一時的な障害をもつ人、インバウンド需要における外国人など日本語の不得意な方も対象となります。
誰もが該当しうるという点において、ビジネスや社会的な観点などからも重要な対応事項となっています。それぞれの視点で重要性と効果について説明します。
ユーザー視点
Webアクセシビリティは、障害をもつユーザーをはじめとした多くの人にとって、インターネットを利用可能・利用しやすくするための必須要素です。すべての人々がWebを利用しやすくすることが、Webアクセシビリティ向上の目的です。
ユーザーのためのアクセシビリティ向上の効果
- より多くの人々に情報やサービスが届き、誰もが平等にWebを利用できる環境を提供できる。
- ユーザーの体験（UX）向上の結果、使いやすいWebサイトは多くのユーザーに好まれる。
企業のビジネス視点・社会的責任視点
Webアクセシビリティの向上により、企業が届けたい情報をより多くの人々に届けることができ、顧客体験の向上が見込めます。結果、売上やコンバージョン率に好影響を与えることが考えられます。
- 顧客層の広がり
新しい市場や顧客にリーチできる。 - 検索エンジンの評価向上
多くのSEOの原則がWebアクセシビリティと一致しているため、検索ランキングが向上する可能性がある。 - 競合との差別化
社会的責任を果たしているという企業イメージを与えられます。
また、企業や団体が社会的責任を果たすために、Webアクセシビリティへの取り組みは重要と考えます。すべての人に対して公平で平等な体験を提供することは、企業の社会的価値を高めることにつながります。
- ブランドの評価向上
社会的に責任ある行動をとる企業としてのイメージが向上し、消費者や投資家からの信頼を得やすくなる。 - 多様性と包括性の促進
アクセシビリティ対応により、多様なバックグラウンドをもつ人々が利用可能な環境を提供できることで、よりインクルーシブな企業文化が形成される。
法律視点
アクセシビリティに関する法律や規制が存在する国や地域が増えています。日本でも令和6年（2024年）4月に「障害者差別解消法（障害を理由とする差別の解消の推進に関する法律）」の改正が行われました。日本での罰則規定は現状ではありませんが、海外では、遵守しない場合には法的リスクを伴うこともあります。そのため、グローバル展開を視野にいれた海外の法律遵守が必要な企業や公共機関などは、Webを含めたアクセシビリティへの配慮を求められることが多いです。
- 法的リスクの回避
違反による訴訟や罰金などのリスクがあるが、基準を守ることでリスクを回避できる。 - 政府や公共機関との取引の要件を満たす
特定のアクセシビリティ基準に従うことで、公共の調達や契約の機会が得られることがある。
技術的視点
Webアクセシビリティを考慮して設計されたWebサイトは、技術的なパフォーマンスやユーザビリティの向上にもつながります。たとえば、キーボード操作や音声ブラウザの対応を正しく設定することで、迷うこと無くユーザーはほしい情報にたどり着きやすくなります。
- モバイル対応の向上
Webアクセシビリティ向上のために設計されたUI（ユーザーインターフェース）は、モバイル環境でも優れた操作性を提供します。 - ページ読み込み速度の改善
サイトの読み込み速度の向上は、全体的なパフォーマンスの向上に つながります。
以上のように、Webアクセシビリティはユーザーの利便性向上だけでなく、ビジネス・法律・社会的責任・技術的な側面からも多くの効果があります。より多くの人々に開かれたインターネットを実現し、企業としても持続的な成長を促進することが可能となります。
Webアクセシビリティを高める方法
では、どうやってWebサイトのアクセシビリティを高めるのか。その方法は大きく2つあり、「運用時にできること」、「リニューアルや構築時にできること」で分けられます。この両方を進めていきましょう。
運用時にできること
運用において、既存や新規コンテンツの制作時に画像のALTを設定したり、コンテンツの公開前にアクセシビリティチェックを行うなどサイトの品質を保つ運用を目指しましょう。また、定期的なサイト全体のチェックも行うとよいでしょう。
リニューアルや構築時にできること
リニューアルや構築時には、サイト全体の構造を見直したり、運用時には手を入れにくいサイトの根幹部分に関しても改善をすることが可能です。見直しの際には、運用ガイドラインの作成やアップデートなどもまとめて対応するとよいでしょう。
リニューアルや構築時＋CMSの入れ替えや導入を検討している場合
アクセシビリティに配慮したコンテンツが制作できるCMSの導入検討は、Webアクセシビリティを高める成功要因の一つです。
次の章では、アクセシビリティ向上のための機能が豊富に搭載されたPowerCMS Xのアクセシビリティ機能について解説します。
具体的な方法については、以下の記事もご覧ください。
ウェブアクセシビリティのチェック結果から、構築・運用でできる対応例を紹介 | BAsixs（ベーシックス）
PowerCMS Xの8つのアクセシビリティ機能を解説
PowerCMS Xには、アクセシビリティに特化したプラグインや機能があります。公開前に確認できる機能、公開後に定期的にチェックできる機能、AIによる提案機能などさまざまな機能が用意されています。
運用において、リスク低減や運用負荷を下げることができる素晴らしい機能です。これらの8つの機能について説明します。
機能1：Webアクセシビリティの検証
公開前のコンテンツプレビュー時に、WCAG 2.0（＝JIS X8341-3）を基準にWebアクセシビリティを検証できる機能です。プラグインをONにするだけで利用が可能です。
記事・ページ単位のプレビュー時に検証が可能です。管理画面にて「JIS X8341-3 検証」のチェックボックスをONにすることで、プレビュー画面を開いた際に自動的に検証が開始されます。達成基準は、設定画面であらかじめ指定できるほか、プレビュー画面でも切り替えが可能です。
結果の確認方法は、プレビュー画面に検証結果のダイアログが表示されます。エラー、警告、要確認の3つのレベルに分けられた検証結果を確認できます。
ダイアログの「レポートを見る」をクリックするとすべての結果が表示されます。さらに詳しく確認したい項目をクリックすると詳細な情報が確認できます。また、Body内の要素であれば、対象箇所がわかりやすくバルーンでピックアップされます。
注意点としては、WCAG 2.0にて検証されていますので、現在主流になりつつあるWCAG 2.2には対応していない点となります。WCAG 2.0（＝JIS X8341-3）が要件であれば問題ありませんが、それ以外の要件の場合は追加での確認が必要です。
機能2：HTMLソースコードの構文チェック
記事・ページ単位の管理画面にて、HTMLの構文チェックが可能となります。コンテンツ内に直接HTMLを書く場合などはこの構文チェックを行うとよいでしょう。
この機能はW3Cという機関が提供する「Nu Html Checker」という外部サービスを利用したチェックツールです。外部にデータ送信を行うためプラグインをONにした後に、設定画面で、免責事項への同意が必要となります。
検索結果は、記事・ページ単位の管理画面に表示される「HTML検証」のボタンをクリックすると別タブが開き、エラー、警告、情報と3つにレベル分けされた検査結果が表示されます。ページの前半が「HTML検証結果の一覧」、後半が対象となる行がマーキングされた「HTMLソース」になります。こちらの検査結果を見て必要に応じて修正を行います。
注意点は、作成中のコンテンツが外部サービスに送信されるので、外部に情報が漏れたら困る機密情報などは含まないようにする必要があります。
HTML検証結果の一覧
HTMLソース
機能3：axe-coreを利用したアクセシビリティ自動検証機能
単体、複数ページのWebアクセシビリティの自動検証機能です。週に1回任意のページを検証するなど、検証をスケジュール化できたり、任意のページを選定したりと、運用しやすい機能が備わっています。
この自動検証機能では、axe-coreというコアエンジンが利用されています。axe-coreは、Deque Systems, Inc.が開発し公開している「axe」というWebアクセシビリティ検証ツールのコアエンジンのことです。多くの検証ツールにも搭載されており、当社の簡易アクセシビリティ診断ツールにも利用しています。
設定で、定期実行の設定等を行い、検証終了したら指定のメールへ通知する機能があります。また、検証バージョンや達成基準の種類も多く、WCAG2.0、2.1、2.2かつA、AAを選択できます。
注意点としては、事前準備の設定が必要となりますので、指示ページを見ながら初期設定を行いましょう。
機能4：PDFのアクセシビリティチェック
アップロードしたPDFファイルのアクセシビリティをチェックできます。
アセットの登録時や登録後の管理画面の「情報」ボタンをクリックすることで、PDFの各種情報・構造の確認や音声読み上げの確認、メタ情報の直接編集が可能です。
テキストの抽出が可能な場合、見出し横のボタンをONにすると、抽出されたテキストを読み上げ順に目視することも可能です。また、音声読み上げの検証もAmazon Pollyの設定を行うことで可能となります。
注意点は、コントラスト比はAIによる自動取得のため、取得色が異なる場合があります。また取得色は、1ページ目から判別します。色が異なる場合は、前景色と背景色の色が表示されている箇所をクリックすると自分で調整が可能です。
また、プラグインを最大限利用するためには、Azure AI servicesの設定が必要となります。あらかじめ準備しておくことをおすすめします。
機能5：動画にキャプションとナレーション・音声解説を同時に追加
AIを利用したWebアクセシビリティ向上を支援する機能のひとつとして用意されています。
動画に関する音声とキャプションを追加する機能です。以下に記載の関連情報の動画がわかりやすいので是非ご覧ください。
WCAG 2.0のA準拠項目（1.2.2や1.2.3）では、音声コンテンツに対し、キャプションの追加、代替コンテンツや音声解説が提供されていることという記載があります。その要件を満たすために、本機能がサポートしてくれます。
関連情報
- PowerCMS X で、動画に音声とキャプションを同時に追加する（Youtube）
- PowerCMS X に AI がウェブサイトのアクセシビリティ向上を支援する複数の機能を追加 | PowerCMS X
注意点は、ナレーションや音声解説を追加する場合、やさしい日本語プラグイン「SimplifiedJapanese」を有効化し、システムプラグインの「Amazon Polly API」を設定する必要があります。あらかじめ準備しておくことをおすすめします。
機能6：画像の各種情報をAIによって取得し、設定やチェックが可能に
こちらも、AIを利用したWebアクセシビリティ向上を支援する機能のひとつとして用意されています。
アセットの登録時や登録後の管理画面の「情報」ボタンをクリックすることで、画像の情報を確認・設定できます。
画像をアップロードする際に、各種情報をAIによって取得しています。たとえば、画像種別の自動判定をしたり、画像に含まれる背景や文字色を取得し、アクセシビリティの確認項目のコントラスト比をチェックします。
コントラスト比の項目で「不適合（赤い文字で記載）」の箇所は、コントラスト比が保てていないため、色の選定やデザインの再考が必要となります。
注意点は、AIによる自動取得のため、コントラスト比の取得色が異なる場合があります。その場合は、前景色と背景色の色が表示されている箇所をクリックすると自分で調整が可能です。
機能7：AIによる画像解析・OCRで画像の代替テキストの入力補助
こちらも、AIを利用したWebアクセシビリティ向上を支援する機能のひとつとして用意されています。Azure AI servicesのComputer Visionを利用し画像解析を行います。
設定完了後、代替テキスト欄の横に「i（画像を解析する）」「A（画像からテキストを抽出する）」の2つのボタンが表示されます。
「i（画像を解析する）」ボタンをクリックすると、その画像に何が写っているかComputer Visionによる画像解析が行われます。
「A（画像からテキストを抽出する）」をクリックすると、OCRで画像解析し、画像に含まれるテキストを抽出し、代替テキスト欄にセットします。
注意点としては、事前にAzureの各種設定が必要となります。あらかじめ準備しておくことをおすすめします。
機能8：やさしい日本語エディタ
プラグインをONにすることで、やさしい日本語の作成を支援する「やさしい日本語エディタ」が利用できます。やさしい日本語エディタでは、やさしい日本語化・ふりがなの追加・分かち書きを行う機能があります。
また、ふりがな付き文字画像のOGP（og:image）の自動生成も可能です。
管理画面のメニューからやさしい日本語エディタを表示し、入力エリアで任意のテキストを入力または、記事やページのコンテンツからコピペをし、「やさしい日本語にする」ボタンをクリックします。変換処理の後、ページ下部に「オリジナルの文章」と「言い換えの提案」が表示されます。この内容を記事やページにコピペすることが可能です。
Webサイトのどこで利用するのかなど用途の方針を決めて利用するようにしましょう。
やさしい日本語についての情報は、以下の記事もご覧ください。
PowerCMS Xで、Webサイトをもっとアクセシブルに | BAsixs（ベーシックス）
まとめ：Webアクセシビリティに配慮したCMSの導入はPowerCMS Xがおすすめ！
Webアクセシビリティの向上は、企業に多くの恩恵をもたらします。情報の普及や顧客体験の向上、法的リスクの回避に加えて、社会的責任を果たす手段としても重要です。
アクセシビリティへの取り組みはブランド価値を高め、ビジネスチャンスを広げる結果につながります。
とくにPowerCMS Xのように、Webアクセシビリティを長く保つ運用を視野にいれたツールを活用することで、効率的にアクセシビリティを保ちながら向上させていくことが可能です。
PowerCMS Xは、Movable Typeの流れを汲んだCMSという認知が高いと思います。非常に自由度の高いCMSで、カスタマイズ性に優れている反面、設計の難易度が高いです。
当社は、PowerCMS Partner Proの認定を取得しておりますので、PowerCMS Xの導入についてのご相談・ご質問など、お気軽にお問い合わせください。