ホームページの更新管理に役立つガイドラインやアクセシビリティについて詳しく解説

ホームページの更新管理する際、疎かになりがちな要素に「アクセシビリティ」があります。実際にインターネットでつながるユーザーの年齢・性別・身体的及び精神的な条件・ITの理解度が十人十色であることを意味します。その上でキーワードを通じて自社のホームページを見つけてくれたということを考えると、潜在的な顧客層の中でも積極的なユーザーであるのは間違いありません。

同様に、アクセシビリティにしっかりと対応しておくことで、ホームページを訪れてくれたユーザーが平等に情報を得られるようになり、安心や信頼、そして利益や売上につながっていきます。

今回はホームページのガイドラインやアクセシビリティに関する基礎知識、環境省の「コンテンツ制作ガイドライン」で把握しておくべきポイントと解説、ホームページのガイドラインやアクセシビリティに対応するために必要なことについてお話します。

ホームページのガイドラインやアクセシビリティに関する基礎知識

はじめにホームページのガイドラインやアクセシビリティに関する基礎知識について解説します。

総務省の「ウェブサイト作成ガイドライン | コンテンツ制作ガイドライン」とは

総務省は「ウェブサイト作成ガイドライン | コンテンツ制作ガイドライン（https://www.env.go.jp/other/gyosei-johoka/web_gl/02.html）」という資料を公式サイトで提案しています。このガイドラインを参考にすることで、誰もが等しくホームページを閲覧しやすくなり、閲覧するユーザー全員が情報という利益を得られるようになります。

実際にホームページの更新や管理において、明確にこうあるべきといった指標や法的拘束力（犯罪や公序良俗に反するものを除く）が乏しいこともあり、ある程度は自由にデザインやコンテンツを制作することができます。その一方でアクセシビリティへの配慮に関することも、努力義務のような形であり、対応に迫られることもないため、後回しになったり、放置されたりしてしまうのです。

企業や組織として配慮のあるホームページ更新管理をすべきと考えるのであれば、総務省のガイドラインを参考に、アクセシビリティに対応していくことが求められます。

ホームページのアクセシビリティおよびウェブアクセシビリティとは

「ホームページを利用するすべての人が、心身の機能や利用する環境に関係なく、ホームページで提供されている情報やサービスを利用できること」をウェブアクセシビリティといいます。ホームページで提供される情報やサービスが急速に拡大する中、ページの作成方法が原因で、高齢者や障害者などが情報やサービスを適切に利用できないという問題が生じています。ウェブアクセシビリティはそのような問題が生じないように、利用者誰もが等しく情報へアクセスできることに配慮しながら、ページを作成し運営する考え方です。

引用元：総務省 – ウェブサイト作成ガイドライン | コンテンツ制作ガイドラインhttps://www.env.go.jp/other/gyosei-johoka/web_gl/02_1.html#PARA_1-3

上記は総務省によるウェブアクセシビリティの定義です。国や地方公共団体などの公的機関のホームページにおいては「高齢者・障害者等配慮設計指針 － 情報通信における機器、ソフトウェア及びサービス － 第3部：ウェブコンテンツ（JIS X 8341-3：2010）」に対応することが求められています。

公的機関では区役所や市役所の実務の現場においても「心身の機能や利用する環境に関係なく」対応する必要があります。オンラインのホームページも公的機関の一部であるからこそ、ウェブアクセシビリティに対応するのはごく自然な流れです。これらは民間の企業や組織として見習うべき部分であり、ウェブアクセシビリティへの理解を深めて、対応していけば公的機関と同等のアクセシビリティを得られるようになるのです。

ガイドラインを守るべき理由

総務省のガイドラインの根拠となる「高齢者・障害者等配慮設計指針 － 情報通信における機器、ソフトウェア及びサービス － 第3部：ウェブコンテンツ（JIS X 8341-3：2010）」はいわゆるJIS規格です。明確な基準と指標が定められているため、ガイドラインを守ることで一定以上のアクセシビリティを確保・維持運営につながります。

逆に、インターネット上に点在するアクセシビリティに関する情報を、その都度実装しようとするとデザイン的にも機能的にもまとまりがなく、バランスの悪いホームページになってしまう可能性があるのです。

ガイドラインを基軸として守ることで、各種設定や機能を実装した方がデザインも機能も全体のバランスも良くなり、まとまりや統一感のあるホームページの更新管理ができるようになります。

同様にガイドラインを参考にしている企業が増えてくることで、ガイドラインが標準となり、ユーザーが初めて自社のホームページに訪れたタイミングでも、アクセシビリティ配慮していることが伝わり、最初から安心感や信頼感を持って閲覧できるの守るべき理由といえるでしょう。

アクセシビリティを高めるべき理由

アクセシビリティを高めるべき理由、背景にそもそも、一昔前はインターネット自体が普及していなかったこと、パソコンなどの機材も高額であり、正しく使うためには知識や経験が必要だったことがあげられます。現代ではスマートフォンやタブレットの安価なパソコン、高速で安定したインターネット回線の普及によって、誰でも気軽にオンライン上の情報にアクセス出来るようになったため、万人に対する配慮が必要になったのです。

また、アクセシビリティは配慮が必要ではない利用者に対しても見やすく、わかりやすくなることから、総務省のガイドラインを参考にしてホームページやコンテンツ制作を行っていくこと、アクセシビリティに配慮することで、自由にデザインやコンテンツの作り込みをしつつ、快適に閲覧できるユーザーの分母を大幅に増やすことにつながります。

ガイドラインやアクセシビリティを軽視した場合に起こり得ること

ガイドラインやアクセシビリティを軽視した場合に起こり得ることは、潜在的な顧客を逃してしまうこと、企業や組織としてのイメージにネガティブな影響を与える可能性があることがあげられます。

ホームページが「心身の機能や利用する環境に関係なく」快適に利用できれば新規顧客として、ファンやリピーターになってくれたかもしれないユーザーを逃してしまうということです。

同様に、同業他社やライバル企業がアクセシビリティにしっかりと対応していた場合、他社のイメージアップにつながることはあっても、自社のイメージがアップすることはないでしょう。

企業間格差をなくすためにもアクセシビリティへの配慮は必須であり、しっかりと対応して「万人に優しいホームページ」にしたほうが、確実にイメージアップにもつながります。

ただし、アクセシビリティはあくまでも「ユーザーの利便性のため」にあることを忘れてはいけません。イメージアップや利益・売上の増加は後から付いてくるものだと理解しておきましょう。

環境省の「コンテンツ制作ガイドライン」で把握しておくべきポイントと解説

次に環境省の「コンテンツ制作ガイドライン」で把握しておくべきポイントを解説します。

この章では引用元として総務省の「ウェブサイト作成ガイドライン | コンテンツ制作ガイドライン」https://www.env.go.jp/other/gyosei-johoka/web_gl/02_1.htmlを参考に、blockquoteタグで引用しておりますので、詳細について知りたい方は、そちらもご参照ください。

1.ホームページ・コンテンツの情報を見やすくする

• 文字色と背景色の組合せ、コントラストに配慮する
• 読みやすい文字サイズ、フォント、行間を指定する
• スタイルシートを適切に使用する
• 文字サイズは利用者が変更できるようにする

上記はホームページ・コンテンツの情報を見やすくするために対処すべき項目です。例えば、色覚的な部分で苦手な要素がある方ですと、文字と背景の色や濃淡、大きさによって文章が読みにくい、見えない可能性があります。同時に行間の高さ、フォントや隣り合う文字の幅などによって、読みやすさに違いがでてしまうこともあるでしょう。最初から設定されている組み合わせが必ずしも読みやすいとは限らないことを理解して、読みやすい設定に変更すべきということです。

そして、読みやすい設定を把握したら、HTMLタグに直接書き込むようなことはせず、スタイルシート（CSS：Cascading Style Sheets）で設定しましょう。同時に、スタイルシートに対応していない可能性も考慮し、文字装飾がなくても意味や情報が伝わるようにします。後述する音声による読み上げに対応できるようなイメージを持つと良いかもしれません。

また、文字サイズを変更しやすくするために絶対的な単位（pt・px）による文字サイズの指定は避けて、相対的な単位（em・％）で指定しましょう。合わせて、文字サイズを変更しても全体のデザインが崩れにくいようにしておくと、ストレスなく快適に閲覧できます。

実際に設定を行った後、パソコン・スマートフォン・タブレットなどの各種デバイスで実機による動作確認をしておくと、さらに安心です。

2.ホームページ・コンテンツの情報を探しやすくする

• 適切なページタイトルをつける
• 共通のナビゲーションの仕組みを用いる
• 現在位置を把握するための仕組みを用意する
• 共通のメニューを読みとばす仕組みを用意する
• 複数の探索手段を用意する
• 文書の見出しを適切に分ける
• 箇条書きはHTMLで表現する

上記はホームページ・コンテンツの情報を探しやすくするために対処すべき項目です。ページタイトルはSEOの関係で色々と言いたくなる部分ではありますが、簡潔にわかりやすいタイトルにしましょう。共通のナビゲーションとは、サイト全体のリンクに統一感を持たせると言う意味です。ヘッダー・フッター・サイドバー・など、各ページへのリンクをなるべく固定して、ユーザーが迷わないように配置します。

現在位置の把握とはいわゆる「パンくずリスト」やカテゴリー・タグで階層やグループを明示するという意味です。共通のメニューを読み飛ばすの部分は固定化されたリンクを飛び越えるリンクや目次から各見出しに移動できるリンクを設置し、必要な箇所にすぐに移動できるようにすることです。同時に、キーワード検索機能、サイトマップの設置し、ユーザーが探索しやすいようにすることで、サイト内を迷子にならずに巡回してくれる可能性が高まります。見出しや箇条書きについては段落内の文字表現で示すのではなく、HTMLタグで構造的に示すこと、見るユーザーだけではなく、聞くユーザーがいるということをしっかりと意識しましょう。

3.ホームページ内のコンテンツ間を移動しやすくする

• リンク箇所は、識別と選択のしやすさに配慮する
• リンクの表現は、リンク先を予測できる内容にする
• PDFなどHTML以外のファイルにリンクを設定する場合は、分かりやすさに配慮する
• 環境省ホームページ内のリンクと、外部へのリンクを区別する
• リンクは原則として新しいウィンドウを開く設定にしない
• 各行に表示されるテキストが平均40字以下を維持できるようにする

上記はホームページ内のコンテンツ間を移動しやすくするために対処すべき項目です。リンク関連の配慮であり、誤ってクリックしてしまうような見ためにしない、リンクであることやリンク先が何のページか何のファイルであるかわかるようにすることといえます。その他、別のドメインの外部ページへのリンクでもサイト内へのリンクでも、基本的には別ウィンドウではなく、同じウィンドウに表示すること、別ウィンドウにする場合も明示することが求められます。

リンクを別のウィンドウやタブで開く設定ですと、ITが苦手な方の場合、突然ページがなくなった、さっきまで見ていたページに戻れない、開いたページが何のページかわからないなどなど、混乱したり、迷子になってしまうのが理由です。同様に聞くユーザーの場合、文章の途中にリンクがあることに気付かず、続きを聞きたかったのに聞けなくなってしまうといったことも考えられます。

各行に表示される文字数についても、読みやすさとわかりやすさを意識しながら、40文字前後でまとめるようにすると、伝わりやすく、理解しやすい文章になると覚えておきましょう。

4.ホームページ・コンテンツの情報を理解しやすくする

• 読みの難しい言葉に読み方を併記する
• 専門用語、省略語、流行語は多用しない
• 外国語は多用しない
• 分かりやすい説明、表現を心がける
• データを表すための表組みを分かりやすく作る
• レイアウトは読み上げ順に配慮して構成する
• フレームは原則として使用しない
• ページの自動更新や自動的な移動は行わない

上記はホームページ・コンテンツの情報を理解しやすくするために対処すべき項目です。例えば年齢的な部分で考えると、子供と大人では知識による差があるため難しい言葉ばかりですと、内容の理解度に差がでてしまいます。同様に専門用語ばかりになってしまうと、それぞれの用語の意味を調べながら読まなくてはならず、とても面倒で利便性が損なわれてしまいます。

言い換えれば年齢に関係なく、意味や内容が伝わるように配慮することで、記事コンテンツの内容が伝わりやすくなるということです。同時に省略語、流行語、外国語を多用せず、難しく遠回りな表現を避けることを心がけることも大切です。

また、サイトの構造的な部分において、聞くユーザーが順序よく内容を聞けるようにすること、フレームや自動更新、自動移動を行わないようにしておくと、ユーザーは自分のペースでしっかりと内容を読み進めてくれるでしょう。重要なのはサイトの構造や仕組みがユーザーの邪魔にならないように配慮するものだと覚えておいてください。

5.ホームページ・コンテンツの情報を支障なく読み取れるようにする

• 規格及び仕様に準拠する
• 言語コードと文字コードを指定する
• 機種依存文字は使用しない
• 単語の間にスペースや改行を挿入しない
• 画像に適切な代替テキストを用意する
• 音声で情報を提供する場合は、音声で伝える情報の内容をテキストで用意する
• 動画で情報を提供する場合は、動画で伝える情報の内容をテキストで用意する
• Word、Excel、PowerPoint形式のファイル提供には細心の注意をはらう
• Word、Excel、PowerPointなどで作成したHTML文書は掲載しない
• PDFは極力使用せず、使用する場合は作成方法、提供方法に配慮する
• Flashを使用する場合は、同等のHTMLコンテンツなどによる補完を行う
• 色のみに依存した情報提供はしない
• 形または位置のみに依存した情報提供はしない
• Java Appletは使用しない
• 低速回線やモバイル機器の利用者に配慮する

上記はホームページ・コンテンツの情報を支障なく読み取れるようにするために対処すべき項目です。サイトの構造やメディア・ファイル関連で配慮すべき項目といえます。中でも画像・音声・動画・デザインや装飾での表現については、視覚や聴覚以外で情報が伝わるように工夫しておかないと、コンテンツの情報が伝わらない可能性があるのでしっかりと対応しましょう。

特にPDFであればブラウザによってはそのまま閲覧できる可能性はあるものの、誰もが可能とは限らないことに注意しておきましょう。同じくMicrosoftのオフィスがないデバイスの可能性もあるため、例え慣れていて作りやすいとしてもWord、Excel、PowerPointを含めたコンテンツの制作は避けるほうが無難です。どうしてもオフィス系フォーマットを利用したい場合はクラウドのオフィスツールで共有し、ブラウザで閲覧できるようにしてくと良いかもしれません。

6.閲覧するユーザーが入力や操作を支障なく行えるようにする

• キーボードだけですべての操作が行えるようにする
• 入力フォームは分かりやすく作成する
• フォームの入力内容を確認し、取り消しや修正が可能な仕組みを用意する
• 閲覧や操作、入力に制限時間を設定しない
• JavaScriptを使用する場合は、様々な利用者に配慮する

上記は閲覧するユーザーが入力や操作を支障なく行えるようにするために対処すべき項目です。デバイスの操作に不慣れな方が悩んだり、困ったりしないような配慮といえます。例えば、商品の購入やサービスの予約・申し込みをする段階で、入力フォームが不便・不親切ですと、ユーザーの望む結果が得られません。同時に利益や売上を逃してしまうということを考えると、ユーザーの入力時に親切でわかりやすい設計や工夫をしたほうが、双方の利益になります。マウスによる微妙な操作を必要としないこと、なるべく、マウスで操作しなくても、キーボードだけで入力が完結できること、可能なら電話やメールでも対応できるようにしておくことをおすすめします。

また、実店舗への来店を期待する場合、対面での接客や応対時の、物理的な部分のアクセシビリティについても可能な限り配慮しておくと、お店にきてくれたユーザー＝お客さんのさらなる安心や信頼につながるということも覚えておきましょう。

7.ホームページ・コンテンツの情報で危害や苦痛を与えないようにする

• 画面の激しい点滅は行わない
• 表示内容の移動や変化について注意する

上記はホームページ・コンテンツの情報で危害や苦痛を与えないようにするために対処すべき項目です。人によっては画面の激しい点滅で身体に異常がでてしまったり、不快な思いをさせてしまうことがあるので、何らかの表現だったとしても絶対に避けましょう。同様に視覚効果で驚かせたり、インパクトを与えたりしたくなりますが、逆に視覚的に不快・不愉快・見えにくい・見逃してしまうなど、内容が伝わらなくなる可能性もあります。

動きのあるグラフィカルなページが万人に受け入れられると安易に考えないこと、見た目ではなく、読みやすさ、見やすさ、わかりやすさ、祖して何よりもコンテンツの情報の質で受け入れられるような工夫を行うことが大切です。同様にコンテンツの内容自体も過激な表現や公序良俗に反する言葉を避けて、心身ともに危害や苦痛を与えない、感じさせないことを徹底しましょう。

ホームページのガイドラインやアクセシビリティに対応するために必要なこと

次にホームページのガイドラインやアクセシビリティに対応するために必要なことを解説します。

まずはガイドラインを熟読してアクセシビリティについて理解を深める

前提である総務省の「ウェブサイト作成ガイドライン | コンテンツ制作ガイドライン（https://www.env.go.jp/other/gyosei-johoka/web_gl/02.html）」を熟読し、アクセシビリティについて理解を深めましょう。総務省のガイドライン自体が、アクセシビリティに配慮されているため、読みやすく、わかりやすくなっていますので、ゼロベースからアクセシビリティを学ぶ方でも安心して読むことができます。

内容自体も簡単でわかりやすい文書表現と伝わりやすい情報量になっているため、アクセシビリティの基準やお手本としても役立ちます。検索エンジンの指標のひとつである専門性や権威性、信頼性の見本としても優秀ですので、学びながらアクセシビリティを体感・実感することにも期待できます。

また、自社のホームページとの違いをチェックすることで、何が足りないのか、過剰な表現になっている部分はどこかなども見えてくるようになります。特にホームページの更新管理を自社対応：内製にしており、かつ外部の専門家によるアドバイスやサポートが一切ない状況ですと、ネガティブな部分に気がつきにくいこともあります。総務省のガイドラインとともに、競合他社やライバル企業のホームページについても、今一度、チェックすると参考になる部分や改善点が見つかることもありますので、時々見ておくことをおすすめします。

既存のホームページの各種ページが現時点でどの程度対応しているか精査する

ガイドラインをある程度理解したら、次は自社の既存のホームページの各種ページが現時点でどの程度対応しているか精査する段階に入ります。総務省の提供する、みんなのアクセシビリティ評価ツール「miChecker」やGoogleの提供するGoogle Chromeの拡張機能「Lighthouse」などを利用して、主観的ではなく客観的・第三者的に対応できているかチェックすると良いでしょう。

また、非常に難しい部分ですが、アクセシビリティとホームページのデザインのオリジナリティのバランスはよく考えましょう。自社のブランドイメージを崩さないまま、配慮するのは最初は大変ですが、考え方としては「ユーザーありき」であることを重視したほうが結果として自社の利益につながるホームページになるものだと覚えておいてください。

目に見える部分ですぐに対応できるものは、すぐに対応する

技術的にリソースがあり、目に見える部分ですぐに対応できるものは、すぐに対応しましょう。例えば見えにくい可能性がある画像の差し替え、オフィス系ファイルの差し替え、動画や音声のコンテンツの再編集など、「見える・聞こえる」前提で構築した部分があげられます。

その他には、JavaScriptによる派手で動きがあるだけの特に意味が無い表現、マウス操作でしか操作できないメニューやポップアップ、綺麗な画像だけれどその分データ容量の大きい重い画像など、本当に必要なのかを精査しつつ、オリジナリティを損ねないように工夫しましょう。

目に見えない部分のソースやタグ、画像のalt属性など細かな修正を行っていく

次に目に見えない部分のソースやタグ、画像のalt属性など細かな修正を行っていく段階に入ります。目に見える部分の対応よりも技術的には難しい部分でもあります。まずは画像のalt属性やリンク関連の設定および表現の修正、キーボード操作だけでサイト内の閲覧や巡回ができるか、各種フォームの入力欄や項目は適切かなどをチェックしましょう。

HTMLやCSS、PHPのコードを変更しなければならない時、必ずバックアップを取り、不具合が出たらすぐに戻せるよう準備しておくと安心です。また、WordPressでホームページを更新管理しているのであれば、記事コンテンツのバックアップ、導入したプラグインとその設定、テーマとテーマエディターでカスタマイズした箇所をメモしておくと、最悪、ゼロベースから再構築しなければならなくなった時の不安もありませんので大変おすすめです。

技術的に対応が難しい場合は専門家に任せてすぐに対応してもらう

アクセシビリティへの対応は、決して難しいとはいえませんが、やはり業界や業種的に専門外ですと技術的に対応が難しいことがあって当然です。

同様に多少の技術的リソースがあっても、アクセシビリティ・デザイン・機能・ブランドイメージのバランスをとるのが難しいと感じた時点で、外部の専門家に任せて対応してもらったほうが、結果的に高品質なホームページを手に入れることにつながると覚えておきましょう。

まとめ：アクセシビリティを向上して信頼感や安心感を築いていこう

今回はホームページのガイドラインやアクセシビリティに関する基礎知識、環境省の「コンテンツ制作ガイドライン」で把握しておくべきポイントと解説、ホームページのガイドラインやアクセシビリティに対応するために必要なことについてお話しました。

実店舗にどのようなお客様が来てもなるべく不自由しないように配慮するのと同じように、ホームページにおいてもしっかりとアクセシビリティに対応しておくことで、結果的に信頼できる企業や組織として認めてもらえるようになります。同時に単なるイメージアップにつながるだけでなく、新規顧客獲得や新たなニーズの創出による収益増も期待できるでしょう。

当社リップルネットであれば、月額14,300円（税込）でホームページの更新管理のパッケージを提供しています。別途料金にてアクセシビリティやサイトの構造の改善なども対応いたしますので、ぜひともこの機会にご相談、お問い合わせください。

最後までお読みいただきありがとうございました。

この記事がホームページのアクセシビリティについて知りたかった方のお役に立てれば幸いです。