本文へスキップ
株式会社オープンナレッジ
株式会社オープンナレッジ Open Knowledge Inc.
Deaf & Hard-of-Hearing UX:WCAG 2.2 AAA 情報アクセシビリティ・手話言語理解 執筆:加藤 明生(登録情報処理安全確保支援士 / 上級医療情報技師)

ろう者・難聴者の方にとって本当に心地よいWebサイトと窓口とは? 視覚図解ファースト・日本手話の文法理解・テキスト完結導線の設計基準

1. 基本と全体像

この記事の要点と4つの章のご案内

概要と背景:なぜ「文字だけ・電話だけ」では壁が生まれるのか?に関するイメージ写真
概要と背景:なぜ「文字だけ・電話だけ」では壁が生まれるのか?
具体的な対策・手順:今日からできる窓口・Web改善に関するイメージ写真
具体的な対策・手順:今日からできる窓口・Web改善
ろう者・難聴者の方にとって本当に心地よいWebサイトと窓口とは? 視覚図解ファースト・日本手話の文法理解・テキスト完結導線の設計基準 の各章におけるテーマと要点一覧表
章構成 主なテーマ 要点と確認ポイント
1. 基本と全体像 概要と背景:なぜ「文字だけ・電話だけ」では壁が生まれるのか? 【身近なたとえ話:看板のない外国語の空港で「場内アナウンス」だけを頼りに乗り継ぐ大変さ】
2. 現場での進め方と対策 具体的な対策・手順:今日からできる窓口・Web改善 もし私たちが海外の大きな空港に行ったとき、案内板にイラストや矢印の地図がひとつもなく、壁一面に細かい外国語の文章だけがびっしり書かれていて、しかもゲート変更のお知らせが「スピーカーの音声放送」だけで流れたらどう感じるでしょうか。きっと強い不安と疲れを感じるはずです。聞こえない・聞こえにくい方が、図解のない長文ばかりのWebサイトや「変更はお電話で」と書かれた窓口に出会ったときに感じるストレスは、まさにこの状況とよく似ています。「ひと目で関係性がわかる図解」と「文字で完結する連絡手段」は、ろう者・難聴者の方だけでなく、すべての人にとって迷わない配慮した道しるべになります。
3. 関連する制度とルール 実務確認 場面別の実務確認ポイント 2024年4月より、行政機関だけでなくすべての民間事業者において障害のある方への「合理的配慮の提供」が法的義務となりました。電話以外の代替連絡手段(Webフォーム・メール・筆談等)の用意は最も基本的な対応です。
4. 詳しい技術仕様としくみ 「お問い合わせはお電話のみ」となっている窓口は、ろう者・難聴者の方にとってどのような困りごとになりますか? 大阪府高槻市(2019年施行)をはじめ全国550以上の自治体で手話言語条例が制定されています。日本手話は日本語をそのまま手で置き換えたものではなく、独自の語彙と文法体系を持つ豊かな「視覚言語」です。
第1章〜第4章では、実務チェックリスト・公的制度基準・詳しい技術仕様を確認できます。
この記事のポイント 視覚優位設計・合理的配慮ガイド
  • 01 「お電話のみ」の壁をなくす:予約・変更・緊急連絡・本人確認のすべてを、電話に頼らずWebフォームやチャット、電話リレーサービス等で完結できる導線にします。
  • 02 日本手話(JSL)は独立した視覚言語:音声日本語の順番とは異なる「空間文法」と「表情・眉の動き(非手指動作)」を持つ言語であることを理解し、文字の羅列ではなく構造図解を先に置きます。
  • 03 音だけの通知をゼロにする:エラー音や呼び出しチャイムなど「音だけで知らせる仕組み」をなくし、色彩・アイコン・画面フラッシュ・振動を必ず組み合わせます。

1. 概要と背景:なぜ「文字だけ・電話だけ」では壁が生まれるのか?

Visual-First & Sign Language Respect

【身近なたとえ話:看板のない外国語の空港で「場内アナウンス」だけを頼りに乗り継ぐ大変さ】

もし私たちが海外の大きな空港に行ったとき、案内板にイラストや矢印の地図がひとつもなく、壁一面に細かい外国語の文章だけがびっしり書かれていて、しかもゲート変更のお知らせが「スピーカーの音声放送」だけで流れたらどう感じるでしょうか。きっと強い不安と疲れを感じるはずです。聞こえない・聞こえにくい方が、図解のない長文ばかりのWebサイトや「変更はお電話で」と書かれた窓口に出会ったときに感じるストレスは、まさにこの状況とよく似ています。「ひと目で関係性がわかる図解」と「文字で完結する連絡手段」は、ろう者・難聴者の方だけでなく、すべての人にとって迷わない配慮した道しるべになります。

ポイント 01 / 改正障害者差別解消法(2024年施行)

民間事業者も「合理的配慮」が法的義務に

2024年4月より、行政機関だけでなくすべての民間事業者において障害のある方への「合理的配慮の提供」が法的義務となりました。電話以外の代替連絡手段(Webフォーム・メール・筆談等)の用意は最も基本的な対応です。

ポイント 02 / 手話言語条例と手話施策推進法

全国550以上の自治体が「手話は言語」と条例化

大阪府高槻市(2019年施行)をはじめ全国550以上の自治体で手話言語条例が制定されています。日本手話は日本語をそのまま手で置き換えたものではなく、独自の語彙と文法体系を持つ豊かな「視覚言語」です。

ポイント 03 / 公共インフラ「電話リレーサービス」

通訳オペレータを介した双方向通話の公的制度

総務省の制度により、手話や文字と音声を通訳オペレータがリアルタイムでつなぐ「電話リレーサービス」が公的インフラとして24時間稼働しています。企業窓口側が「リレーサービスからの着信を拒否しない」知識が不可欠です。

01 日本手話(JSL)の「空間・同時並列的」な情報構造 3次元空間に「登場人物・場所・関係」を配置して示す 手指動作(Manual) 手の形・位置・動きの方向で 「誰が誰に何をするか」を表現 非手指動作(NMM) 眉の上げ下げ・視線・うなずきで 疑問・否定・条件節(文法)を決定 なぜ「構造図解」がしっくりくるのか? ・手話は最初に「話題・全体の構図」を空間に提示してから要点を伝える ・Webでも「3行要点+空間図解」を先に置くと、認知の順番が一致する → 長文のスクロール前に全体像が一瞬でつかめる! 02 心地よいWebサイト・窓口の「3つの設計ルール」 設計 01:視覚図解ファースト(Visual-First) 文字だけの説明を避け、手順・関係性・比較を必ず図解と表で並べる (動画には話者名・効果音表記付きの正確な字幕+60fps手話ワイプ) 設計 02:音に頼らない状態通知(Zero-Audio Dependency) 「ピピッという音」「番号のお呼び出し声」だけに頼らず、画面表示・ スマートフォンのバイブレーション・色とアイコンの変化で確実に通知 設計 03:電話ゼロで完結する双方向窓口(Text-Complete) 予約・契約変更・緊急サポートまでWebフォームやチャットで100%完結 + 電話リレーサービスからの着信を受付スタッフ全員が歓迎する体制

01. 「日本手話(JSL)」と「音声日本語」の文法の違いを知る

多くの方が誤解しやすい点として、「手話とは、日本語の単語をそのまま順番に手の動きに置き換えたもの」というイメージがあります。確かに日本語の語順に沿って手指を動かす「日本語対応手話(シムコム)」という表現方法もありますが、ろう者のコミュニティで受け継がれてきた「日本手話(JSL:Japanese Sign Language)」は、音声日本語とは異なる独自の文法体系を持つ独立した言語です。

日本手話では、手の形や動き(手指動作)だけでなく、眉の上げ下げ、目の見開き、視線の向き、首の傾き、うなずきといった「非手指動作(NMM:Non-Manual Markers)」が、「疑問文なのか」「否定文なのか」「もし〜ならばという条件文なのか」を決定する重要な文法役割を担っています。また、目の前の空間に「Aさんは右側、Bさんは左側」と配置し、視線や手の向きだけで主語と目的語を一瞬で表現する空間的な構造を持っています。だからこそ、Webページでも最初に空間的な関係図(SVG図解)と要点を提示することが、視覚言語で考える方にとって抜群に読みやすい設計になるのです。

02. なぜ「電話での本人確認・解約手続き」が大きなバリアになるのか

インターネット上で申し込みができたサービスなのに、いざ登録情報を変更したり緊急で止めたりしようとすると「セキュリティのため、お電話(0120-...)にてご本人確認をお願いいたします」という案内しか出てこないケースが今なお数多く存在します。

これを解決する現代の標準設計は2つあります。1つ目は、パスキー(FIDO2生体認証)やマイナンバーカード公的個人認証、またはWebフォーム・チャットサポートを組み合わせ、「音声通話を一切使わずにオンラインだけで本人確認と全手続きが完結するルート」を用意することです。2つ目は、どうしても電話窓口を案内する場合に「電話リレーサービス(手話・文字通訳オペレータを介した公的通話)からのご連絡も承っております」と明記し、現場のスタッフが「通訳オペレータから電話がかかってきても、本人からの正規の連絡として丁寧に応対する」手順を共有しておくことです。

2. 具体的な対策・手順:今日からできる窓口・Web改善

Field Pitfalls & Actionable Checklist

現場で陥りやすい落とし穴と回避策

良かれと思って導入した仕組みが、かえってろう者・難聴者の方の障壁になってしまうケースがあります。代表的な3つの落とし穴と、すぐに取り入れられる改善策をまとめました。

場面・領域 現場で陥りやすい落とし穴(NG例) 心地よいアクセシビリティ設計(推奨策)
お問い合わせ・緊急連絡 「お急ぎの方はお電話ください」とだけ書かれ、フォームに電話番号(音声通話用)の入力が必須になっている。 フォーム・メール・LINE等で緊急連絡も受付可能にし、「ご希望の連絡方法(メール/チャット/電話リレーサービス)」を選べるラジオボタンを設ける。
待合室・受付・呼び出し クリニックや役所の窓口で、お名前をマイクや肉声だけで呼び出し、マスクをしたまま早口で説明する。 番号表示モニターやスマホ呼び出し通知を併用し、受付に「筆談・音声文字変換タブレット対応」の案内プレートと指差し確認シートを常備する。
動画・オンライン説明会 自動音声認識の誤字だらけの字幕をそのまま載せたり、手話通訳ワイプが小さすぎて表情(NMM)が潰れている。 専門用語や固有名詞の字幕を事前校正し、手話ワイプは画面高の1/3以上・高コントラスト背景・60fpsで表情までくっきり見えるレイアウトにする。

自社のWebサイト・受付窓口「3項目セルフ点検チェックリスト」

達成状況:0 / 3 項目

ご自身の職場やお店、Webサイトに当てはまる項目をクリックして点検してみましょう。

まずは1項目からでも大丈夫です。お問い合わせフォームに「ご希望の連絡手段(メール希望など)」の選択欄を1つ足すだけでも、大きな安心につながります。

理解を深める確認クイズと関連コラム・豆知識

【確認クイズ】日本手話(JSL)において、手の動き(手指動作)と同時に行われ、「疑問文」「否定文」「条件文(もし〜なら)」などの文法的意味を決定づける大切な要素は何でしょうか?

選択肢 A:手の動かすスピードを2倍にすること クリックして判定 →

動きの強弱や速さでニュアンスが変化することはありますが、疑問や条件といった文法の核を担うのは別の要素です。選択肢Bを開いてみてください。

選択肢 B:眉の上げ下げ・視線・うなずき・首の傾きなどの「非手指動作(NMM)」 クリックして判定 →

正解です! 非手指動作(NMM:Non-Manual Markers)は単なる感情表現ではなく、日本手話の文法そのものです。そのため、手話通訳動画をWebに掲載する際は、手元だけでなく「眉や目元・口元の動き」が鮮明に読み取れる解像度とサイズを確保することが極めて重要です。

選択肢 C:必ず五十音の指文字で助詞(て・に・を・は)を一文字ずつ表すこと クリックして判定 →

日本手話では空間の位置関係や視線・手の動く方向によって主語と目的語を示すため、音声日本語の助詞を指文字で一文字ずつ挟む必要はありません。正解は選択肢Bです。

関連コラム・豆知識:Curb-Cut Effect

「歩道の段差スロープ(カーブカット効果)と同じように、視覚UIは全員を助ける」
もともと車椅子の方のために作られた歩道の段差スロープが、ベビーカーを押す親御さんやスーツケースを引く旅行者、高齢の方のつまずき防止にも役立った現象を「カーブカット効果」と呼びます。ろう者・難聴者の方のために整えた「図解ファーストの画面」「字幕付き動画」「電話不要のチャット窓口」は、電車内で音を出せないビジネスパーソンや、子育て中で電話に出られない方、専門用語が苦手な方にとっても最高の使いやすさをもたらします。

Webアクセシビリティ点検・手話AI研究のご相談

テキストチャット・Webフォーム完結でのご相談・合理的配慮対応のWeb改善を承っております。

実務確認 場面別の実務確認ポイント

ろう者・難聴者・ご家族の方へ

日常のWeb手続きや窓口で「なぜ伝わりにくいのか」を周囲の職場や学校、お店の方に知ってもらうための説明資料としてそのままご活用いただけます。

店舗・クリニック・企業経営者の方へ

2024年4月から民間事業者にも義務化された「合理的配慮」を、高価なシステムなしで今日から実践できる受付・Web改善の3ステップがわかります。

Web制作者・システム開発者の方へ

WCAG 2.2 AAA基準の視覚情報設計、日本手話の統語構造モデル、および音に依存しない非同期状態通知プロトコル(Rust 2024実装)を解説しています。

技術仕様・実装解説(WCAG 2.2 AAA VISUAL IA & JSL NMM SYNTAX TREE) 4. 詳しい技術仕様としくみ:技術仕様・実装解説
設計背景・判断基準リファレンス

WCAG 2.2 AAA 視覚優位情報アーキテクチャ、日本手話(JSL)非手指動作(NMM)構文木モデル、およびゼロ音声依存・非同期状態通知プロトコル

本モノグラフでは、聴覚情報に一切依存しない Web アプリケーションおよび公共窓口システムの形式的設計基準を定義する。(1) W3C WCAG 2.2 Level AAA(達成基準 1.2.6 手話、1.4.6 コントラスト強調、2.2.6 タイムアウト、3.3.8 アクセシブルな認証)の数理的制約、(2) 日本手話(JSL)における空間一致動詞(Agreement Verbs)と非手指動作(NMM)の階層的構文木(Hierarchical Syntactic Tree)と線形日本語テキストの変換コスト、および (3) 音声アラート・電話コールバックを排除したマルチモーダル非同期状態通知エンジンを Rust 2024 で実装する。

Standard Compliance
W3C WCAG 2.2 Level AAA / JIS X 8341-3
Linguistic Model
JSL Spatial Loci & NMM Tiered Syntax
Sign Video Spec
60 fps / ≥ 360p Crop / High-Contrast BG
Notification Guarantee
Zero-Audio Visual + Haptic Attestation
1. 設計仕様・数理モデル(Formal Architecture, Linguistic Syntax Tree & Mathematical Formulation)

01. 日本手話(JSL)の多チャネル同時並列構文と線形テキストの写像関数: 音声日本語が1次元の時間軸 t 上に形態素列 W = (w_1, w_2, …, w_n) を直列配置するのに対し、日本手話(JSL)の信号空間 S(t) は、利き手・非利き手の手形・位置・運動ベクトルを表す手指チャネル M_R(t), M_L(t) ∈ ℝ^21 × 3 と、眉挙上・眉顰め・視線ベクトル・頭部傾斜・顎引き等の非手指動作(NMM)チャネル N(t) ∈ ℝ^k の直積として同時並列的に符号化される。特に統語論において、話題化(Topic: [+brow raise, +head tilt] )や条件節(Conditional)、極性疑問(Yes/No Question)、否定スコープ(Negation headshake)はすべて上位句構造(CP: Complementizer Phrase)の指定部・主要部をなす N(t) の持続区間 [t_start, t_end] によってスコープが定義される。

T_JSL = ⟨ Locus(x_i, x_j), M_i → j(t), Scope_CP(N(t)) ⟩ where I(T_JSL) = I(M) + I(N | M) > I(W_linear)

したがって、3次元空間内の指示点(Locus x_i, x_j)間の移動ベクトル M_i → j として一撃で表現される主体・客体関係を、助詞と従属節が幾重にも入れ子になった線形日本語テキストのみで提示すると、構文解析時のワーキングメモリ負荷が増大する。Web UI において「結論3行+空間ノード図(SVG)+構造化テーブル」を先行配置する設計は、Locus(x_i, x_j) を視覚画面上に直接展開し、変換コストを最小化する情報圧縮操作に他ならない。

02. ゼロ音声依存・非同期状態遷移プロトコル(Zero-Audio Asynchronous State Notification): フォーム検証エラー、多要素認証チャレンジ、受付呼び出し、または緊急警報において、状態遷移イベント e ∈ E が発生した際、聴覚チャネル C_audio のみに通知を送出する設計は単一障害点(SPOF)となる。すべての重要イベントは、視覚的状態バナー(高コントラスト色変化+形状アイコン変化+ARIA Live Region `role="alert"`)、W3C Vibration API による触覚パルス列 V = [d_on,1, d_off,1, …]、および非同期メッセージング(WebPush / メール / チャット)の少なくとも2つ以上の独立非聴覚チャネルで送達確認(ACK)されなければならない。

2. パラメータ・構成仕様(WCAG 2.2 AAA & Deaf-Inclusive UI Engineering Parameter Matrix)
Subsystem / Layer WCAG 2.2 / JIS Criterion Engineering Parameter Verification Constraint
Authentication & Support SC 3.3.8 Accessible Auth FIDO2 Passkey + Text/Chat Support + Relay Service Ready Voice-Only Mandatory Steps == 0
JSL Sign Language Video SC 1.2.6 Sign Language (AAA) 59.94/60 fps, ≥ 640×360px Signer ROI, Solid Matte BG NMM Eyebrow/Mouth Landmarks Clear
Closed Captions (WebVTT) SC 1.2.2 / 1.2.4 Captions Speaker ID Tags + Sound Effect Cue + ≤ 14 chars/sec Human-Verified Technical Terminology
State & Emergency Alert SC 1.3.3 / 1.4.11 Non-Text Visual Banner + SVG Icon + Haptic Pulse Pattern Zero Audio-Only Dependency
3. 実装コード・設定仕様(Executable Specification Code (crates/ok-a11y-verifier/src/deaf_ux_guard.rs)) Rust 2024(Zero-Audio Notification & Text-Complete Flow Auditor)
#![forbid(unsafe_code)]
/// Channels available for delivering user-facing notifications or auth challenges.
#[derive(Debug, Clone, Copy, PartialEq, Eq)]
pub struct ModalityMask(pub u8);
impl ModalityMask {
    pub const AUDIO_SPEECH_OR_BEEP: u8 = 1 << 0;
    pub const VISUAL_TEXT_BANNER: u8   = 1 << 1;
    pub const VISUAL_ICON_BADGE: u8    = 1 << 2;
    pub const HAPTIC_VIBRATION: u8     = 1 << 3;
    pub const ASYNC_TEXT_CHANNEL: u8   = 1 << 4; — Web form, Email, Chat, Push
    #[inline]
    pub const fn has(self, flag: u8) -> bool {
        (self.0 & flag) != 0
    }
    /// Returns true if the event relies exclusively on audio without visual/haptic fallback.
    #[inline]
    pub const fn is_audio_only(self) -> bool {
        let non_audio = Self::VISUAL_TEXT_BANNER
            | Self::VISUAL_ICON_BADGE
            | Self::HAPTIC_VIBRATION
            | Self::ASYNC_TEXT_CHANNEL;
        self.has(Self::AUDIO_SPEECH_OR_BEEP) && (self.0 & non_audio) == 0
    }
}
/// Represents a customer workflow step (e.g., reservation, identity verification, cancellation).
#[derive(Debug, Clone, Copy, PartialEq, Eq)]
pub struct WorkflowStepSpec {
    pub step_id: u16,
    pub requires_voice_phone_call: bool,
    pub accepts_telephone_relay_service: bool,
    pub supports_online_text_completion: bool,
    pub has_visual_diagram_summary: bool,
    pub notification_modalities: ModalityMask,
}
/// Sign language video stream telemetry for WCAG 2.2 AAA SC 1.2.6 inspection.
#[derive(Debug, Clone, Copy, PartialEq, Eq)]
pub struct SignVideoStreamSpec {
    pub frame_rate_fps: u16,
    pub signer_roi_height_px: u16,
    pub has_verified_captions_with_speaker_id: bool,
    pub preserves_nmm_facial_landmarks: bool,
}
#[derive(Debug, Clone, Copy, PartialEq, Eq)]
pub enum DeafUxViolation {
    VoicePhoneBarrierDetected { step_id: u16 },
    AudioOnlyNotification { step_id: u16 },
    MissingVisualDiagramSummary { step_id: u16 },
    InsufficientSignVideoFrameRate { actual_fps: u16 },
    InsufficientSignerResolution { height_px: u16 },
    MissingNmmFacialClarity,
    UnverifiedCaptions,
}
/// Audits a complete customer journey and media specification against Deaf-Inclusive UX standards.
pub fn audit_deaf_inclusive_journey(
    steps: &[WorkflowStepSpec],
    video: Option<SignVideoStreamSpec>,
) -> Result<(), DeafUxViolation> {
    for step in steps {
        // 01. Never lock a user into voice-only telephone calls without text or relay alternatives.
        if step.requires_voice_phone_call
            && !step.supports_online_text_completion
            && !step.accepts_telephone_relay_service
        {
            return Err(DeafUxViolation::VoicePhoneBarrierDetected {
                step_id: step.step_id,
            });
        }
        // 02. Every notification must include visual text + icon or haptic/async text channels.
        if step.notification_modalities.is_audio_only()
            || !step.notification_modalities.has(ModalityMask::VISUAL_TEXT_BANNER)
        {
            return Err(DeafUxViolation::AudioOnlyNotification {
                step_id: step.step_id,
            });
        }
        // 03. Visual-first structure requirement.
        if !step.has_visual_diagram_summary {
            return Err(DeafUxViolation::MissingVisualDiagramSummary {
                step_id: step.step_id,
            });
        }
    }
    if let Some(v) = video {
        if v.frame_rate_fps < 50 {
            return Err(DeafUxViolation::InsufficientSignVideoFrameRate {
                actual_fps: v.frame_rate_fps,
            });
        }
        if v.signer_roi_height_px < 360 {
            return Err(DeafUxViolation::InsufficientSignerResolution {
                height_px: v.signer_roi_height_px,
            });
        }
        if !v.preserves_nmm_facial_landmarks {
            return Err(DeafUxViolation::MissingNmmFacialClarity);
        }
        if !v.has_verified_captions_with_speaker_id {
            return Err(DeafUxViolation::UnverifiedCaptions);
        }
    }
    Ok(())
}
Inclusive Engineering Note: 当社のWebサイトおよび業務システムは、すべてテキスト完結のお問い合わせ導線と視覚図解ファーストの情報設計を標準採用しています。
アクセシビリティ設計・共同研究のお問い合わせ
ご質問・公的制度の活用に関するお問い合わせ窓口

掲載資料に関するご質問・公的制度活用のご案内

本ページの図解や解説内容に関するご質問、経済産業省「SCS評価制度」やIPA「SECURITY ACTION・サイバーセキュリティお助け隊サービス」等の公的制度の確認方法について、落ち着いた参考窓口としてご案内しております。売り込みや営業連絡は一切行いませんので、社内勉強会やご家庭での確認資料としてご自由にご活用ください。

図解・ビジュアルの拡大表示

図表内のテキストもそのまま選択・検索可能です(ベクターSVG描画) 枠外クリックまたは ESC キーで閉じます