ホテル・旅館のウェブアクセシビリティ対応

株式会社宿研 株式会社宿研 株式会社宿研

045-227-6505

受付時間 9:00〜17:00

お問い合わせ お役立ち資料 無料相談

宿研ナレッジ

本、電球、トランクのイラスト
TOP
ホテル・旅館のウェブアクセシビリティ対応を5つの事例を交え紹介!~ホームページに関する社会の潮流~
集客ナレッジ

ホテル・旅館のウェブアクセシビリティ対応を5つの事例を交え紹介!
~ホームページに関する社会の潮流~

お気に入り

2024. 11. 06

最終更新 2024. 12. 13

ホテル・旅館のウェブアクセシビリティ対応を5つの事例を交え紹介!<br>~ホームページに関する社会の潮流~のキービジュアル

目次

    皆さんが日常生活や仕事中にWEBサイトを訪れたとき、『文字が見えにくい』『必要な情報が見つからない』と感じたことはないでしょうか?  時々、そのようなサイトに遭遇すると少しイライラを感じると思います。しかし、これが毎回だったらどうでしょうか?
    実は、世界中のWEBサイトのうち、障がいのある方にとって使いやすいサイトとされるのはわずか4.1と言われ、多くのサイトが見づらさや使いにくさといった“壁”を残しています。

    日本では、2024年4月の障害者差別解消法の改正により、すべての民間事業者に「誰もが使いやすいWEBサイト」となるように配慮することが義務づけられました。これは『ウェブ アクセシビリティと呼ばれています。
    本稿では、法改正から半年が経過した今、宿泊施設のホームページでどのようなウェブアクセシビリティ対策が求められているのか、具体例を交えながらご紹介します。新しい取り組みへのヒントとして一読ください。


    ※参照元:アメリカの非営利団体WebAIMによる全世界のWEBサイトを対象にした「2024年版トップ100万ホームページのアクセシビリティレポート」内、WCAG.2準拠から

    ※アクセシビリティ:英語の「access(アクセス)」と「ability(能力)」を合わせた言葉で、「近づきやすさ」や「利用しやすさ」を意味します。

    ウェブアクセシビリティとは

    ウェブアクセシビリティとは、年齢による衰えや視覚障がい、聴覚障がいなどの有無に関係なく、誰もが快適にWEBサイトを利用できるようデザインや操作性を工夫する取り組みです。
    (障害のある人への合理的配慮の提供が、これまでの「努力義務」から「義務化」に)
    身近な障がいの例として、色覚特性の「色弱」があります。色弱とは、色を感じる視細胞の働きに異常があり、色の見え方が通常とは異なる状態のことです。例えば、下記のようにホームページ上で注意書きを記載しても、を感じる視細胞に異常がある方にはほとんど何も見えません。

    公益社団法人日本眼科医会の調査によると、日本人の約20人に1人の男性(5%)、そして女性の500人に1人(0.2%)が色覚異常を持っているとされています。つまり、宿泊施設を利用する方の中にも意外に多くの人が、特定の色が見えにくい可能性を示しています。
    (本人も気づいていない場合がある)
    さらに、訪日外国人では特に白人において色覚異常の割合が高く、約8~10%。これは10人に1人の割合に相当します。インバウンド集客が重要な宿泊業界にとって、こうした「見えにくさ」への配慮はとても重要で、施設の印象を左右する要因にもなり得ます。

    このように、障がいは手足の不自由さだけに限りません。見た目には分からない、あるいは他人には言いづらい障がいを抱えている人がたくさんいます。そうした方たちが心配や不安なく滞在を楽しめる環境を予約前から提供することは、宿泊施設にとって信頼と魅力を高める大きなポイントであり、ウェブアクセシビリティへの配慮は、あらゆるお客様に選ばれる施設づくりにつながる重要な取り組みといえるでしょう。

     

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

    実際に宿泊施設のウェブアクセシビリティ対応では、どのようなことに注意しないといけないのか、代表的な例を5項目を紹介します。今後、自社ホームページを制作される方は以下のことについて制作会社と話し合い、配慮することを推奨します。

    ① コントラストに注意する

    文字に色をつける際や、画像に文字を重ねる際は、文字と背景のコントラスト比を十分に確保しましょう。特に赤色や緑色は、背景によっては見えにくい人もいるため、色だけでなく太字やアイコンなどで強調するのも効果的です。また、少し丁寧な説明文を添えると、誰にとっても見やすく伝わりやすいようになります。

    ② 色だけで情報を区別しないようにする

    先述の通り、色の識別が難しい方がいるため、色だけで情報を区別することは避けましょう。
    例えば、ブログ記事で注目ポイントを赤文字で表示したい場合、背景が茶色系では赤字が見えづらくなるので、文字を少し大きくしたり、太字や下線、マーカーを使うことで注目しやすくなります。下記ように、色以外の工夫を加えることで、判読性が向上し、正確に文章が理解できるページになります。

    ③ 自動再生される動画は一時停止やミュートできる機能を付ける

    近年、宿泊施設のトップページで自動再生される動画が増えていますが、停止やミュート機能がない一方的な再生は、利用者にとって不便となることがあります。動画が自動で再生される場合は、一時停止やミュートができる機能を追加し、利用者が自分で制御できるようにすることが推奨されています。

    ④ リンクを適切に表現する

    ホームページ内のリンクは、どこに繋がるのかをユーザーが簡単に理解できるように表現しましょう。リンクのテキストは、前後の文脈やリンク単体でその内容がわかるように工夫します。視覚障がいのある人はスクリーンリーダー※を利用しサイト情報を読み取るので、スクリーンリーダーが読み上げる際に、リンク名が丁寧に書かれていることで、とても利用しやすいサイトになります。


    ※スクリーンリーダーとは、パソコンなどの画面上に表示されるテキストを音声に変換して読み上げてくれるツールです。

    ⑤ フォントサイズは最低でも16pxを推奨

    WEBサイトのフォントサイズは、ユーザーが自分で変更できることもありますが、標準設定として16px以上が推奨されています。16pxのサイズがどれくらいかというと、現在ご覧いただいているこの記事(宿研ナレッジ全記事)の文字サイズは18pxです。この文字より少し小さいサイズが16pxに相当します。また、この後紹介する宿泊施設のホームページでは、文字サイズが大きめに設定されていることが多いので、ぜひ意識してご覧ください。

     

    ウェブアクセシビリティに対応したホテル・旅館のホームページ紹介

    では、実際にウェブアクセシビリティに配慮されたホームページを4つご紹介します。

    ホテルニューオータニ


    リンク先:ホテルニューオータニ  ホームページ

    ホテルニューオータニのホームページはコントラストをはっきりさせていることが特徴としてあります。文字やイラストは白と黒以外を使わないことで、赤色の識別が困難な方、緑色の識別が困難な方問わず、誰に対しても文字の視認性が非常に高くなっています。ブランドイメージとして受ける印象を変えることなく、ウェブアクセシビリティにも努めている良い事例です。
    また、ホテルニューオータニでは、ウェブアクセシビリティの取り組みについて、専用ページを用意し取組み内容を詳細に公表しています。
    リンク先:株式会社ニュー・オータニ  ウェブアクセシビリティ方針

     

    ヒルトン・ホテルズ&リゾーツ


    リンク先:ヒルトン・ホテルズ&リゾーツ ホームページ

    ヒルトン・ホテルズ&リゾーツのホームページは、標準の最低文字サイズが20pxになっており、全体的に文字が大きく、視認性が高くなっています。また、サイト内で随所に使用されている「青色」は、色弱の方でも比較的色覚が変わらずのまま見ることができるので、誰にでも見やすいサイトになっています。

     

    峡谷の湯宿 大歩危峡まんなか

    リンク先:峡谷の湯宿 大歩危峡まんなか 総合トップ
         峡谷の湯宿 大歩危峡まんなか ホテルトップ

    大歩危峡まんなか様のホームページは、徳島特産の藍染めと、先述の「青色」を汲み取り、背景が深い青ベースになっています。青色の他にも、比較的色覚が変わらない色の「濃い黄色」を部分的に使用。フォントサイズも最小16pxが守られています。
    また、インバウンド集客を意識し、日本語テキストのすぐ下に英語も標準表示。スクリーンリーダーに対して正確なニュアンスで伝えられるよう自動翻訳に任せない工夫がされています。このスクリーンリーダーに対しさらに、以下の工夫もされています。

     ⅰ)見出しタグの最適化

    各ページの内部に設定されている、「見出しタグ」を最適化し、SEO対策のみならず、スクリーンリーダーを聞く人がページ内の情報を整理して理解できるように配慮されています。
    ※スクリーンリーダーはページ内の「もくじ」にあたる<見出しタグ>からページ内の構成を読み取ることで、書かれているテキストを適切に視覚障がい者にアナウンスすることができます。

     ⅱ)リンク先の表記

    各ページ内にあるリンクテキストは、何のページに飛ぶのかが丁寧に記載されています。

     ⅲ)alt(オルト)タグの設定

    各画像には、「alt(オルト)タグ」を付け、スクリーンリーダーが画像の内容も読み取れるように配慮されています。サイト内にある画像には特別な設定をしないと、スクリーンリーダーは画像の内容を読み取ることができません。そこで、サイト内のすべての画像には「altタグ」を設定し、画像がどのような内容であるかをスクリーンリーダーやGoogleの巡回システムに伝えています。これにより、視覚に障がいのある方にも画像の情報がわかるようになっています。

     

    番外編:阪急交通社


    リンク先:阪急交通社 ホームページ

    海外旅行・国内旅行の予約、海外航空券の販売を手掛ける阪急交通社のホームページは、他の旅行情報サイトに比べ、情報枠が整理されおり、賑やかさを少し抑えた視認性の高いページになっています。こちらのサイトも「青色」が部分的に配色されているので、誰もが同じように見ることができます。
    旅行商材を扱う立場として、自社商材のPRを目立つようにするのではなく、よりたくさんの人が見やすいサイトにしたことは非常に良い取り組みといえます。

     

    さいごに

    このウェブアクセシビリティが進められる背景には、ユニバーサルツーリズムの実現という観光庁の観光立国推進基本計画があります。ユニバーサルツーリズムとは、高齢や障がい等の有無にかかわらず、すべての人が安心して楽しめる旅行を目指しているもので、ウェブアクセシビリティと並び、「観光施設における心のバリアフリー認定制度」もユニバーサルツーリズムの実現に向けた政策の一部となります。
    既にご存じの方も多いと思いますが、『宿泊業の高付加価値のための経営ガイドライン登録制度』において、心のバリアフリー認定制度の取り組みが必須事項に入っています。今回のウェブアクセシビリティもまた、近い将来には「必須事項」もしくは、「努力事項」に含まれると予想できます。今後、自社ホームページを制作する予定の宿泊事業者は、制作会社との打ち合わせのなかで、“ウェブアクセシビリティ”について話し合うことをここでは提案します。

     

    ホームページで
    他社と
    差がつく魅力を発信しませんか?

    \ 無料相談会を実施中 /
    いますぐの契約を考えていなくても大丈夫です!
    競争が激しい今こそ、内部にはない知見をフル活用してください。

    画像をクリックで無料相談会の詳細へ

    お気に入りに追加

    その他オススメの記事

    WEB集客の
    お悩みお気軽にご相談ください