お問い合わせ

ウェブアクセシビリティ

Web Accessibility

概要と重要性Overview & Importance

ウェブアクセシビリティのイメージです

ウェブアクセシビリティとは、障害の有無や年齢、利用環境に関わらず、すべての人がWebサイトの情報や機能にスムーズにアクセスできる状態を指します。 法改正に伴う企業の義務化や多様性配慮への関心が高まる中、対応の重要性は増しています。 当社では、JIS X 8341-3(レベルAA)に準拠したWeb制作・改修サービスを提供。適切なHTML設計やキーボード操作対応とすべてのユーザーに優しい高品質なサイト構築を実現します。

法的要件の強化(障害者差別解消法の改正)

2024年4月の改正障害者差別解消法の施行により、事業者による障害者への「合理的配慮の提供」が義務化されました。これに伴い、Webサイトのアクセシビリティ対応への要求が急増しています。

ターゲット層・機会損失の防止

高齢者層や一時的な負傷・体調不良を抱えるユーザー、モバイル端末のみで操作するユーザーなど、幅広い層へのリーチが可能になります。

SEO(検索エンジン最適化)と制作品質の向上

適切なHTML構造(セマンティックマークアップ)や代替テキスト(alt属性)の設定は、検索エンジンのクローラーやAI検索にも正しく情報を伝えるため、自然検索パフォーマンスの向上につながります。

ESG経営・企業ブランドの向上

多様性(ダイバーシティ)やインクルージョンに配慮したWeb制作を行うことで、企業の社会的責任(CSR)を果たし、ブランド価値を高めます。

対応ポイントKey Points

当社ではJIS X 8341-3(レベルAA)を基準とした質の高いWeb制作・改修を実施します。
主な対応ポイントは以下の通りです。

知覚可能

情報やUI(ユーザーインターフェース)のコンポーネントは、利用者が認識できる方法で提示される必要があります。目で見えない・聞こえない環境でも、代替手段により等しく情報を取得できる状態を作ります。

課題と改善策

課題

画像の意味が音声読み上げソフトに伝わらないことや、背景色と文字色のコントラスト不足により、弱視・高齢ユーザーが文字を判別できないといった問題が頻発しています。

改善策
  • 画像には内容を正しく伝える代替テキスト(alt属性)を設定(※装飾画像は空設定でスキップ)
  • 文字と背景のコントラスト比を4.5:1以上(大きな文字は3:1以上)確保し視認性を向上
  • 動画や音声コンテンツには字幕や書き起こしテキストを配置

操作可能

UIコンポーネントやナビゲーションは、すべての人がスムーズに操作できなければなりません。マウスを使えないユーザーでも、キーボード等の支援技術のみで快適にサイトを回遊できる設計を行います。

課題と改善策

課題

マウス操作前提のメニュー設計や、Tabキーでのフォーカスが見えなくなる問題により、キーボード操作のみを利用するユーザーが画面の途中で閉じ込められてしまう事態が生じます。

改善策
  • TabキーおよびEnterキーのみですべてのリンクやボタン、フォーム要素を移動・実行可能にする
  • キーボード移動時にどこを選択しているかが一目でわかる「フォーカス枠」を視覚的に明示
  • 誤操作を防ぐため、十分なタップ領域(ボタンサイズ)の確保や時間制限の緩和を設定

理解可能

情報およびUIの操作は、誰にとってもわかりやすく直感的である必要があります。一貫したナビゲーションと明確なエラー案内により、ユーザーが迷わずに目的を達成できるようにします。

課題と改善策

課題

問い合わせフォーム等での入力エラー時に「どこが間違っているのか」が提示されないケースや、ページごとに操作方法が異なりユーザーが混乱してしまう問題があります。

改善策
  • フォーム送信エラー時、修正すべき項目と具体的なエラー理由をテキストで明確に通知
  • 全ページで一貫したヘッダー・ナビゲーション配置と分かりやすいラベル(ボタン名など)を採用
  • 専門用語を避け、入力欄には適切な入力例やプレースホルダーを表示

堅牢性(けんろうせい)

コンテンツは、将来のWebブラウザや様々な支援技術(スクリーンリーダー等)を含む、多様なユーザーエージェントで確実に解釈・動作するよう設計されている必要があります。

課題と改善策

課題

独自の記述や不正確なHTML構造により、特定のブラウザや音声読み上げソフトなどの支援技術で正しく情報が読み上げられず、Webサイトが正しく機能しないリスクがあります。

改善策
  • 標準規格に準拠したセマンティックなHTMLタグ(見出し・リスト・ボタン等)を正しく構築
  • 複雑なUIパーツにはWAI-ARIA属性を適切に付与し、状態変更を支援技術へ正しく伝達
  • 多様な端末やスクリーンリーダー(NVDA、VoiceOver等)での動作検証を徹底

出典:ウェブアクセシビリティ基盤委員会

対応のながれWorkflow

初期の目標設定から各種検証テスト、試験成績書の発行まで、確実な品質管理プロセスで対応いたします。

  • 01

    適合レベルの設定(要件定義)

    JIS X 8341-3:2016の「レベルAA」など、目指すべき目標レベルと対象範囲(ページ数)を決定します。

  • 02

    制作・改修作業

    新規制作の場合

    アクセスしやすいデザイン作成およびセマンティックなHTMLコーディングを実施。

    既存サイトの場合】

    現状を把握し、コントラスト修正やAlt設定などのアクセシブル改善を実施。

  • 03

    コード検証・自動テスト
    (内部テスト①)

    総務省のアクセシビリティ評価ツール「miChecker」や「axe DevTools」を使用し、HTML構造やコントラスト等のコードエラーを自動判定・修正します。

  • 04

    目視・操作テスト
    (内部テスト②)

    実際にキーボード操作のみでの巡回チェックおよび、スクリーンリーダー(音声読み上げソフト「NVDA」)を用いた実機操作テストを実施します。

  • 05

    オプション外部(第三者機関)評価の実施

    内部テストで検出された課題に対し、優先度をつけて修繕作業を進め、目標レベルのクリアを目指します。

  • 06

    オプション修繕・調整作業(目標期間:最大6ヶ月)

    内部テストで検出された課題に対し、優先度をつけて修繕作業を進め、目標レベルのクリアを目指します。

  • 07

    オプション納品・試験結果の発行

    第三者機関による詳細な検証結果をまとめた「JIS X 8341-3:2016 試験成績書」を発行・納品します。Webサイト上に掲載する「ウェブアクセシビリティ方針(宣言文)」の文案もあわせて納品いたします。

費用についてPrice Plan

お客様のご予算や現在のWebサイトの状態に応じたプランをご用意しております。

新規サイト制作のウェブアクセシビリティ対応

サイト制作費×20%

既存制作のウェブアクセシビリティ対応

お見積り※サイトのボリュームよる

第三者機関による検査・証明

お見積り※サイトのボリュームよる

よくある質問FAQ

Q.音声読み上げソフト用の特別なボタンをサイト内に配置する必要がありますか?
必要ありません。視覚障害をお持ちの方はご自身の端末(PC・スマホ)に搭載された標準の読み上げ機能を使用されるため、サイト側はそれらのツールが正しく読み取れる構造(正しいHTML)で構築します。
Q.既存のサイト(WordPress等)でも対応可能ですか?
はい、可能です。既存のテンプレートや記事コンテンツの修正、運用マニュアルの提示によって対応いただけます。
Q.適合レベル(レベルA、AA、AAA)の違いは何ですか?どのレベルを目指せばよいですか?
JIS規格には3つの達成レベルがあり、一般的な企業や公的機関では「レベルAA」の達成が標準的な目標とされています。まずは主要なページでレベルAAの準拠を目指すことをおすすめします。
Q.アクセシビリティ対応をすると、Webサイトのデザインに制限が出ますか?
極端に文字と背景のコントラストが低い配色などが制限される場合はありますが、意図したデザインを大きく損なうことはありません。デザインの美しさと読みやすさ・操作性を両立させた設計を行います。
Q.全ページに対応しないと「対応完了」と言えないのでしょうか?
すべてのページが一括で対応できなくても問題ありません。まずはトップページや主要な問合せフォーム、重要なお知らせページなどから段階的に改修を進め、「ウェブアクセシビリティ方針」で対応範囲と今後の改修スケジュールを公開することが一般的です。
Q.納品後に自社でニュースやブログを更新する際、気を付けることはありますか?
画像アップロード時の代替テキスト(alt)設定や、正しい見出しタグ(h2, h3など)の順序使用に気をつける必要があります。納品時に担当者様向けの簡易運用マニュアルを共有いたしますのでご安心ください。
Q.ウェブアクセシビリティに対応すると、SEO(検索エンジン対策)にも効果はありますか?
はい、高い効果が期待できます。正しいHTML構造や代替テキスト(alt)の設定、見出しの階層化などは、Googleなどの検索エンジンがページ内容を正確に理解(クローリング)する手助けとなるため、検索順位の向上や検索結果での適切な表示につながります。

対応事例についてWorks

競技団体・連盟  様

https://www.jsaf.or.jp/  

公益財団法人でもあり、パラリンピックへ強化している連盟でもあるため、ウェブアクセシビリティ「レベルAA」の対応しました。