画面・機能Web accessibility · a11y
Webアクセシビリティ
Webアクセシビリティとは、目が見えにくい方や手が不自由な方でも、ホームページを不便なく使えるようにすることです。
お店の入口にスロープを付けたり、メニュー表の文字を大きく書いたりするのと同じです。誰にとっても使いやすくなります。
もう少し詳しく
画面を音声で読み上げるソフトは写真を見られないので、写真の説明（alt）を読み上げます。説明がなければ、その写真はないのと同じです。
文字と背景の色の差（コントラスト比）が十分にある必要があります。国際基準（WCAG）では、通常の文字に4.5:1以上のコントラストを推奨しています。
アクセシビリティに配慮すると、ご年配のお客様や日差しの下でスマホを見るお客様にも見やすくなり、検索エンジンも内容をより正しく理解できます。業種や規模によっては法律でアクセシビリティが求められる場合もあるので、確認が必要です。
Webアクセシビリティは何を基準に判断しますか？
Webアクセシビリティは、国際基準のWCAG（Webコンテンツ・アクセシビリティ・ガイドライン）と、それをもとに作られた韓国の基準KWCAG（韓国版Webコンテンツ・アクセシビリティ指針）で判断します。WCAGはW3Cが定めた基準で、現在の勧告は2.2版です。韓国国内ではKWCAG 2.2版が使われています。
どちらの基準も、4つの原則から出発しています。原則の名前は難しそうですが、お店のホームページに当てはめてみると意味はシンプルです。
一般的なお店のホームページでも、この基準を参考にするのがおすすめです。アクセシビリティにどこまで対応したかを制作会社と同じ言葉で話せますし、あとで基準を引き上げるときも出発点がはっきりします。
表は横にスワイプして見られます
| 原則 | 意味 | お店のホームページでは |
|---|---|---|
| 知覚可能 | すべてのお客様が内容を見たり聞いたりできること | 写真の説明、十分な文字のコントラスト、動画の字幕 |
| 操作可能 | すべてのお客様がボタンやメニューを使えること | キーボードでも予約できる、十分なボタンの大きさ |
| 理解可能 | 内容と使い方を理解できること | やさしい文言、入力欄の名前、わかりやすいエラー表示 |
| 堅牢 | さまざまな機器・支援ソフトで正しく動くこと | 標準に沿ったコード、スクリーンリーダーとの互換性 |
小さなお店のホームページでもWebアクセシビリティは法的義務ですか？
Webアクセシビリティは韓国の「障害者差別禁止及び権利救済等に関する法律」に根拠があり、対象と時期は施行令で段階的に定められています。そのため「すべてのお店に同じ義務がある」とは言い切れず、事業の形態や規模によって変わることがあります。
自分のお店が対象になるかどうかは、国家法令情報センター（韓国）で法律と施行令の原文を確認するか、専門家に聞くのが確実です。公共機関の事業や入札に参加する場合は、Webアクセシビリティ品質認証を求められることもあります。
法的義務とは別に、アクセシビリティに気を配ることは、お客様を取りこぼさないことにつながります。老眼が始まった常連のお客様や、片手で子どもを抱いたままスマホを使うお客様にも同じようにメリットがあります。
Webアクセシビリティ品質認証は、法的義務とは別に、基準を守っているか審査を受けて認証を取る制度です。小さなお店なら、認証まで取らなくても、基準を参考に基本を守るだけで十分に意味があります。
文字のコントラスト比4.5:1はどうやって確認しますか？
コントラスト比は、文字色と背景色の明るさの差を数値で表したもので、無料のコントラストチェックツールに2つの色を入れればすぐにわかります。WCAG 2.2の達成基準1.4.3では、通常の文字は4.5:1以上、大きな文字（18ポイント以上、太字は14ポイント以上）は3:1以上が求められています。
デザインでよく引っかかるのは、薄いグレーの案内文、写真の上にのせた白い文字、ブランドカラーのボタン上の文字です。写真の上の文字は写真の明るい部分でコントラストが下がるので、写真を少し暗くするか、文字の後ろに半透明の背景を敷きます。
ロゴや装飾用の文字はこの基準の対象外です。その代わり、価格・営業時間・ボタンのように、お客様が必ず読む必要のある文字はもれなく確認しましょう。
色だけで情報を伝えないことにも気を配りましょう。「赤い日付は受付終了」のように色だけで区別すると、色の見分けがつきにくいお客様にはわからないので、「受付終了」の文字や印もあわせて入れます。
オーナー様が自分でできるアクセシビリティチェックは？
専門ツールがなくても、基本的な問題は自分で見つけられます。下のチェックは、パソコンとスマホがあれば20〜30分で終わります。
問題が見つかったら、その場所をスクリーンショットして制作会社に伝えれば大丈夫です。何が問題なのかを正確に伝えるほど、修正も早くなります。
読み上げ機能が「画像」「ボタン」としか読まない箇所があれば、説明や名前が抜けているところです。お客様から見ると何のボタンかわからないので、真っ先に直すべき部分です。
- 01パソコンでマウスを使わず、Tabキーだけでメニューを移動しながら予約・お問い合わせまで進んでみてください。
- 02Tabキーで移動したとき、今どこにいるかを示す枠線などの表示が見えるか確認します。
- 03ブラウザを200%に拡大して、文字が重なったり切れたりしないか見ます。
- 04スマホの読み上げ機能（iPhoneのVoiceOver、AndroidのTalkBack）をオンにして、トップ画面を聞いてみます。
- 05予約・お問い合わせフォームで、入力欄ごとに名前が表示されているか、間違って入力したときに何が違うのかを教えてくれるか確認します。
- 06動画があれば、字幕がついているか、音なしでも内容がわかるか確認します。
業種別に、アクセシビリティで特に気をつけるところは？
業種によってお客様が必ず読むべき情報は違うので、まずその情報にアクセスできるかを確認すれば大丈夫です。以下は、小さなお店でよく見落とされる部分です。
年配のお客様が多いお店なら、文字の大きさにも気を配りましょう。スマホの設定で文字を大きくしているお客様も多いので、文字を大きくしたときにボタンの文言が切れたり重なったりしないか確認してみてください。
直すところが多く見えても、一度に全部やる必要はありません。予約・お問い合わせ・価格のように、お客様が必ず通る画面から順に直していけば大丈夫です。
- カフェ・飲食店：メニュー表を写真だけで載せると、スクリーンリーダーが読み取れません。メニューと価格を文字でも書いておきます。
- 美容室：予約フォームの日付・時間の選択がマウスでしかできないことのないようにし、入力欄に名前を付けます。
- 工房：クラス紹介の動画には字幕を入れ、持ち物・所要時間も文章で書いておきます。
- オンライン販売：縦に長い1枚画像の詳細ページは、主要な情報（素材・サイズ・配送）を文字でもあわせて書きます。
Webアクセシビリティでよくある失敗は？
いちばん多い失敗は、アクセシビリティを公開直前にまとめて直そうとすることです。色・文字の大きさ・フォームの構造はデザインの段階で決まるので、最初から基準を決めておくほうがずっと楽です。
自動チェックツールのスコアだけを見て終わりにするのも惜しいところです。ツールは写真の説明が「あるか」は教えてくれますが、「正しく書けているか」は判断できないので、人が自分の目で確認する作業が欠かせません。
アクセシビリティは、一度対応すれば終わりというものではありません。新しい写真、新しいイベントバナー、新しいメニュー表を載せるたびに、写真の説明と文字のコントラストを確認し直す必要があるので、運営する人が基本ルールを知っておくことが大切です。
Webアクセシビリティについて、制作会社に何を確認すればいいですか？
制作会社が「アクセシビリティに対応した」と言ったら、どの基準でどのように確認したのか、結果を受け取っておきましょう。あとで修正したり、別の会社に依頼したりするときにも役立ちます。
- アクセシビリティの基準（WCAG・KWCAG）にどのレベルまで対応してもらえますか？
- デザイン案の段階で文字のコントラストを確認しますか？
- キーボードだけで予約・お問い合わせを最後まで完了できますか？
- 公開後に写真を載せるとき、オーナー様が説明（alt）を簡単に書ける欄はありますか？
たとえば
- 薄いグレーの背景に白い文字で書いた営業時間は、多くのお客様にとって読みにくくなります。
- 「ここをクリック」より「メニューをすべて見る」のように、ボタンを読むだけで意味が通じるように書きます。
これだけは確認してください
- 写真ごとに説明（alt）があるか
- 文字が背景とはっきり区別できるか
- スマホで画面を拡大しても崩れないか
- ボタンの文言を聞くだけで、何をするボタンかわかるか
うちのお店には？
すべてのホームページが対象です。ご年配のお客様が多いお店なら、さらに気を配りましょう。
ISSYMOでは
写真ごとに説明（alt）を入れる作業は、検索・AI表示の基本設定に含まれています。アクセシビリティの基準をどこまで満たすかは、打ち合わせで一緒に決めます。
よくある質問
参考にした資料
最終更新日