10分アクセシビリティグローバルサイトコーポレートサイト富本ディレクター/フロントエンドエンジニア(ビジネス・アーキテクツ)地元・愛知の印刷会社や広告会社にてWeb制作に携わる。2014年頃、フロントエンドエンジニアとしてBAに入社。現在、ディレクターとして開発・運用の進行管理やWebサイトのガイドライン作成やコンポーネントの設計・作成を担当しています。好きなキャラクターはリラックマ。イタリアとスイスに行きたい。ウェブアクセシビリティ(どのような状況にいる人でもWebサービスを利用できる状態)に対応するには、まず最新の情報を確認し、自社の現状を把握するところからスタートします。今回の記事では、ウェブアクセシビリティに関する2023年5月現在の最新情報や、アクセシビリティチェックについて解説します。当社では、ウェブアクセシビリティ要件を含むご相談が、ここ数年で非常に増えています。次のようなご要望やお悩みをお客様からよく伺っています。・ウェブアクセシビリティを考慮して、コーポレートサイトやサービスサイトのリニューアルをしたい・ウェブアクセシビリティを維持できているか分からない・サイトのグローバル化にあたり、ウェブアクセシビリティ対応する必要があるこのような要望や悩みを抱えつつも、ウェブアクセシビリティに関する対応を進めたいと考えている方の一助となれば幸いです。導入ガイドブック」というPDF資料を公開しました。このガイドブックは、ウェブアクセシビリティ対応をこれからはじめたいと思っている人や、学びなおしたい人にも丁寧でわかりやすい文書となっています。当社内でもこれからウェブアクセシビリティを学ぶメンバーにはこの文書を紹介しています。最新の勧告バージョンWCAG2.1を推奨(2023年5月現在)2023年5月現在、WCAG2.1が最新の勧告文書です。WCAG2.1の1つ前バージョンであるWCAG2.0は、JIS規格(産業規格)と同じ内容の勧告文書です。2022年からずっと「WCAG2.2はもうすぐ勧告される」と言われてますが、現状では2023年第3四半期の完了を目標にしているようです。WCAG2.2と同時進行でWCAG3.0も検討が進められています。どのバージョンにすればいいのか迷われる方は、最新の勧告バージョンWCAG2.1を推奨します。WCAG2.0を含んだ内容となっています。WCAGについての詳しい内容は、アクセシビリティ関連文書「WCAG」の最新状況(2022年1月時点)といろんな「アクセシビリティ方針」を見てみよう!をご覧ください。アクセシビリティを考える一日としてイベントが開催されています。Japanという団体がイベントを開催します。アクセシビリティ関連の情報や他社の対応事例などを通してさまざまな情報を一日中発信しています。このイベントを通してアクセシビリティに関する最新情報などを得られます。イベントは無料でオンライン開催ですので、気軽に参加できます。自社サイトの状況を把握しよう自社サイトの状況を把握するためには、WCAGのルールに照らしてファイルをチェックし、ユーザーにとって利用の妨げになる可能性がある問題を確認します。チェックツールによっては、その問題の深刻度を提供してくれるツールもあります。当社も、チェックツールや目視・手動でのチェックを行っています。サイトによって検証項目はもちろんエラー内容も様々です。対象サイトのことをよく調査したうえで、対処の検証項目を選定し、検証を進めます。エラー修正の対応方法はサイトの構造によって変わってくるため、毎回クライアントに最適な方法を提案するようにしています。miChecker(エムアイチェッカー)」(以下、「miChecker」という。おけるウェブアクセシビリティ評価の取組促進が目的のツールです。11のサポート終了に伴い、Ver.2が利用できなくなったため、2023年4月にEdgeに対応したVer.3が公開されました。8341-3:2016)が対象となりますが、検証ツールとしてとても優秀ですのでぜひ利用してみてください。チェックの基準チェックの指標としては、WCAGの国際的な基準があり、達成度合いで3段階の評価があります。詳細は以前公開した、Webサイトのアクセシビリティとは?意味や達成基準を基礎から解説を参照ください。次に、自社サイトの状況を確認してみましょう。今回は簡易的な検証と、本格的な検証のチェックの一例をご紹介します。簡易的な検証ができるツールの中では、機械的にチェック可能な項目を総合的に検証できるLighthouseがオススメです。LighthouseはGoogleが提供している、ウェブページ品質向上のために開発されたツールです。特徴はPCのWebブラウザだけでなく、モバイル端末の利用を想定した診断ができる点です。スクリーンリーダーを利用するために適切なマークアップがされているかどうか、ロービジョン向けに十分なコントラスト比があるかどうかといった診断結果を得られます。Lighthouseの利用方法などを詳しく知りたい方は、あなたの会社のウェブアクセシビリティ何点ですか。(後編)〜測定から点数以外の判断ポイントまで伝授します〜を参照してください。Lighthouse以外にも機械的にチェック可能な項目を検証するために、目的に合わせてツールを利用するケースもあります。ここでいうツールとは、例えばコントラスト比を確認するツールや、画像にaltが入っているかを確認できるツール、文法が正しいかを確認できるツールなどです。Ver.3.0があります。このツールはWCAG2.0対応です。DevToolsなどの総合的な検証ツールも利用します。いえ、ツールの自動検証だけでは検証できない箇所が必ず発生します。その場合は必要に応じて手動での確認も実施します。その為、本格的な検証や、検証結果を受けた修正を行う際は、当社などの専門家に相談してください。運用や構築のシーンで取り入れられるウェブアクセシビリティ対応ウェブアクセシビリティの評価結果に問題があった場合、ウェブアクセシビリティの改善対応を検討します。コンテンツ単位で対応できることから、サイト全体に影響することまで、影響範囲によって対応コストは違います。コンテンツ単位での対応は、今すぐに取り入れられる対応も多くあります。コンテンツ単位で対応できること⇒一般的に、日々の運用ですぐに取り入れられる対応を指しますサイト全体に影響するので、対応の難易度が高いこと⇒一般的に、サイト構造や根幹の部分に深く影響するため、リニューアルや構築時などに取り入れるほうがよい対応を指します上記の2つに分けて、対応例を紹介します。対応例の選定基準は、エラーとしてあげられる代表的なものを3つずつピックアップしました。コンテンツ単位で対応できることの例コンテンツ単位では、次のようなことに対応することで、ウェブアクセシビリティの向上に繋がります。画像の適切な代替テキストの設定コントラストの適切な設定それぞれを簡単に説明します。1.タイトルや見出しの適切な設定スクリーンリーダー利用者に限らず、ユーザーはアクセスしたページが求めている内容と合致しているのかを判断します。そのため、サイト内の情報と合致する適切なタイトルや見出しを提供する必要があります。上の図のようにツールを利用し、サイト構造をリスト化・可視化して、タイトルや見出しの内容がサイト構造にふさわしいかを確認します。代替テキストのみでも、画像を通して伝えたい内容を正しく伝えるために、客観的で長すぎない代替テキストを検討してください。文脈的に代替テキストを設定しなくても意味が通じる場合は省略も可能です。代替テキストの作成は、コンテンツの著者や編集者など、その画像がどういった意味をもっているのか理解している人が指定することをオススメします。上の図は、画像2点の代替テキスト(alt)の良い例です。3.コントラストの適切な設定テキストや画像(アイコンや画像化テキストも含む)の色と、背景色のコントラスト比を適切に保つ必要があります。文字の大きさによって、推奨されるコントラスト比は変わります。DevToolsなどのチェックツールが便利です。Colorのアクセシビリティチェックツールなどを使う場合もあります。上の図は、カラーコントラスト比が未達の例と達成している例です。2つの参考例の下にそれぞれのコントラスト比と達成基準AA、AAAの達成状況を表にしています。」では、小さい文字(small)(※1)のコントラスト比は4.5:1以上、大きい文字(Large)(※2)はコントラスト比が3:1以上がAAの基準です。この基準は色覚異常や80歳前後の典型的な視力を考慮して設定されています。」では、ロービジョンの利用者の視力を考慮し、小さい文字のコントラスト比は7:1以上が達成度AAAの基準です。大きい文字(Large):18pt(日本語は22pt)以上のテキスト、又は、太字で14pt(日本語は18pt)以上のテキスト小さい文字(small):18pt(日本語は22pt)未満のテキスト、又は、太字で14pt(日本語は18pt)未満のテキストサイト全体に影響するため、対応の難易度が高いことの例サイト全体に関わる部分では、例えば次のようなことに対応することで、ウェブアクセシビリティの向上に繋がります。HTML5やARIAの利用によるセマンティックなマークアップキーボード操作によるサイト内の移動の実現テキストの拡大に対応したレイアウトそれぞれを簡単に説明します。1.HTML5やARIAの利用によるセマンティックなマークアップセマンティックとは「文書の情報収集や関連付けなどの処理を自動化するために、文書の内容を機械が理解しやすくすること」です。構造を明確にすることで、スクリーンリーダーなどの支援技術やデバイスがコンテンツを正しく認識できます。情報発信側の意図を正しく適切な方法でユーザーに提供できます。基本的な実装方針のルールとなるため、サイト構築やリニューアル時などの要件定義段階で決められることが多いです。Tools)などを利用して検証をします。エラーやアラートについては内容を確認し、必要に応じて修正を行います。2.キーボード操作によるサイト内の移動の実現キーボード操作のみでサイト内を閲覧できるかを、TabキーやShift+Tabキーを使って確認します。気をつけるべき点は、埋め込まれた動画や音声プレイヤー、ポップアップ、モーダル・ダイアログなどです。キーボードのフォーカスがそのコンテンツから移動できずにループしてしまうことがあります。上の図は、キーボード操作のフォーカスが閉じ込められてループする例と、ループせず次の要素に遷移する例です。3.テキストの拡大に対応したレイアウト「見えにくい」「まぶしい」「見える範囲が狭い」など日常生活において不自由を感じているロービジョンのユーザーの中には、画面表示を拡大してPCやスマートフォンを操作する人がいます。拡大表示した時にレイアウトが崩れるなどして「情報を得にくい」、「操作をしにくい」という状態にならないようにしましょう。上の図は、ブラウザのサイズ拡大機能を利用した場合に、テキストが切れて読めない例です。注意点としては、作業着手前に実装者にあらかじめ「テキストサイズ拡大時にコンテンツがすべて表示されたうえで表示が担保される」ことを要件として伝え実装してもらうようにしましょう。まとめ:世の中に求められる課題を解決することで、企業の信頼を獲得できるSDGsが掲げる「誰一人取り残さない」という理念を社会が意識する中で、UI/UXの改善やウェブアクセシビリティへの関心が非常に高まっています。それらの社会課題を解決していくことで企業の信頼を獲得することが可能です。グローバル展開を考える企業は、海外の法律も考慮したウェブアクセシビリティ対応が必須ですが、国内をターゲットとする企業にとっても重要な解決すべき課題となりつつあります。令和6年(2024年)4月に障害者差別解消法の改正が施行されるからです。合理的配慮の提供(ウェブアクセシビリティ対応等)について、民間の事業者は「努力義務」から「義務」(法的義務)となります。ウェブアクセシビリティ対応について相談したい方、とりあえず話を聞いてみたい方、お気軽にお問い合わせください。サイト内コンテンツの調査から方針策定・運用まで、経験豊富なディレクターやエンジニア、デザイナーがチームでサポートいたします。Webサイトをリニューアルや構築、運用をする上で考慮すべきことが沢山ありますが、その中の1つであるウェブアクセシビリティについて今回は説明しました。当社では、エンタープライズ企業向けのWebサイト構築・運用サービスを提供していますので、お気軽にご相談ください。ユーザーが使いやすいWebサイトをお求めの方、アクセシビリティ対応しませんか?アクセシビリティ対応の運用経験が豊富な制作メンバーが、ユーザー体験を考慮したデザインや設計を提案いたします。どんなことでもご相談ください。