レビューを依頼する
日本語アクセシビリティ · スクリーンリーダー · ARIAラベル · JIS X 8341-3

日本語アクセシビリティ ローカライゼーション:
SaaS製品のためのスクリーンリーダー・代替テキスト・ARIAラベル

2024年4月施行の改正障害者差別解消法により、民間事業者にも、障害のある人から求めがあった場合の合理的配慮の提供が義務づけられました。ウェブサイト等の環境の整備は引き続き努力義務ですが、日本市場に参入するSaaS製品にとって、日本語スクリーンリーダーの挙動、JIS X 8341-3への適合、代替テキストの書き方、ARIAラベルのローカライゼーションは、リリース後に後追いで対処するのではなく、設計段階から考えておくべき事項です。

Munehiro Hiraki
開 宗弘(ひらき むねひろ)
日本語ローカライゼーションQAスペシャリスト
2026年6月6日 読了時間 10分 日本語アクセシビリティ
クイックアンサー
日本にはSaaS製品向けのアクセシビリティ要件がありますか?
一部は義務です。2024年4月施行の改正障害者差別解消法により、求めがあった場合の合理的配慮の提供が、ソフトウェアやオンラインサービスを含む民間事業者に義務化されました。ウェブサイト等の環境の整備(第5条)は努力義務です。技術的な基準としては、WCAG 2.0と一致するJIS X 8341-3:2016が参照されます。
SaaS製品はどの日本語スクリーンリーダーに対応すべきですか?
日本で広く使われているのは、日本語の読み上げを前提に作られたPC-Talkerと、日本語で使えるNVDAです。英語版VoiceOverやJAWSだけでテストすると、日本語テキストが実際にどう読み上げられるかを見落とします。
日本語の代替テキストは英語の代替テキストとどう違いますか?
日本語の代替テキストは英語より短めに書くのが普通です。左から右への読み順に沿って書き、スクリーンリーダーが読み方を取り違えない漢字を選ぶ必要もあります。英語の代替テキストを字義どおりに訳すと、不自然な文になったり、誤読されたりすることがよくあります。

TL;DR

日本語アクセシビリティのローカライゼーションは、翻訳作業ではありません。押さえるべき点は次のとおりです。日本市場で広く使われているスクリーンリーダー(JAWSに加えてPC-Talkerと日本語版NVDA)、長さと漢字の読みの扱いで英語と異なる日本語の代替テキストの書き方、敬語ではなく機能を伝える日本語のARIAラベルの書き方、フォームで使う日本語の4部構成のエラー読み上げの仕組み、そしてJIS X 8341-3(WCAG 2.0と一致する日本の規格)を日本語に当てはめる方法です。2024年4月以降、民間事業者にも、障害のある人から求めがあった場合の合理的配慮の提供が義務づけられています(ウェブサイト等の環境の整備は努力義務)。本稿では、それぞれの判断をコード例とともに解説します。

キーポイント

  • 2024年4月から、民間事業者にも合理的配慮の提供が義務化された——ウェブサイト等の環境の整備は努力義務のままですが、個別の求めに応じるには、あらかじめ整備しておくことが近道です。
  • 日本で広く使われているPC-Talkerと日本語版NVDAでも確認する——JAWSだけを前提に組んだテスト戦略では、日本のユーザーが使うスクリーンリーダーでの読み上げを見落とすおそれがあります。
  • 日本語の代替テキストは英語版より簡潔——漢字は情報密度が高いので、短いテキストでも同じ情報を伝えられます。代替テキストが長すぎると、日本語スクリーンリーダーで聞く側が疲れてしまいます。
  • ARIAラベルは敬語ではなく機能本位であるべき——スクリーンリーダーの読み上げは操作をこなすためのものです。aria-labelに丁寧な敬語を入れても、移動が遅くなるだけの雑音にしかなりません。
  • JIS X 8341-3:2016の本文はWCAG 2.0と同じ内容——日本語特有の要件が上乗せされるわけではなく、差は同じ基準を日本語に当てはめる段階で出ます。漢字の読みの扱いはWCAGの達成基準3.1.6 発音(AAA)の領域です。

2024年の障害者差別解消法改正:何が変わったか

2024年4月より前、日本の障害者差別解消法(Shougaisha Sabetsu Kaishou Hou)は、行政機関等には合理的配慮の提供を義務づける一方、民間事業者には努力義務としていました。2024年4月1日施行の改正により、民間事業者にも合理的配慮の提供が義務化されました。ソフトウェアやオンラインサービスの提供者も対象です。ここでいう合理的配慮は、障害のある人から社会的障壁の除去を求められた場合に、負担が過重でない範囲で対応することを指します。一方、ウェブサイト等のアクセシビリティを事前に整える「環境の整備」(法第5条)は、改正後も努力義務のままです(内閣府「障害者差別解消法」解説ページ)。

SaaS企業にとっての実務上の影響は、個別の事例や行政のガイダンスを通じてなお形成途上です。ただ、ウェブサイトやサービスの環境の整備が進んでいれば、利用者から個別の求めがあったときにも対応しやすくなります。公共部門、金融、医療、教育などの顧客に提案する場合は、JIS X 8341-3の適合状況を説明できるようにしておくと、検討の場で答えに詰まらずに済みます。

ローカライゼーションの面では、日本語のアクセシビリティ対応を、製品のリリース後に足す追加機能として扱うことはもうできません。翻訳と並行して日本語UI層に作り込む必要があります。ARIAラベル、代替テキスト、フォームのエラー読み上げ、フォーカス管理のどれについても、ツールチップを読む晴眼ユーザー向けではなく、スクリーンリーダーで聞く人に向けて日本語を書かなければなりません。

2024
改正障害者差別解消法の施行年(民間事業者の合理的配慮の提供が義務に)
AA
WCAG 2.0とJIS X 8341-3:2016に共通する3段階(A・AA・AAA)の中間の適合レベル
PC-Talker
株式会社高知システム開発の日本語スクリーンリーダー。日本で広く使われている

日本語スクリーンリーダーの全体像

英語製品のアクセシビリティテストは、通常JAWS(Job Access With Speech)を中心に組まれます。英語圏で広く使われているためです。日本向けの製品でこの前提をそのまま使うと、日本のユーザーが実際に使っているスクリーンリーダーでの読み上げを見落とすテスト戦略になりかねません。

日本で広く使われているのが、PC-Talkerと日本語で使えるNVDAです。PC-Talkerは株式会社高知システム開発が開発・販売する日本語のスクリーンリーダーで、漢字の読み(同じ漢字でも複数の読みがありうる)や日本語の句読点を扱えるよう作られています。NVDAはオープンソースで無償のため、アクセシビリティをテストする開発者にも使いやすい選択肢です。日本語対応のApple VoiceOverは、iOS関連のワークフローやmacOSでのテストに関わるツールです。

これらのツールとJAWSの挙動の違いは、ローカライゼーションに直接関わります。PC-Talkerは、組み込み辞書で発音を決めながら漢字を読み上げます。業務の文脈によって同じ文字列でも読みが変わる熟語では、スクリーンリーダーが誤った読みを選ぶことがあります。日本のアクセシビリティのベストプラクティスが、誤読されやすい専門用語にふりがな(ルビ)を付けるよう勧めているのはこのためです。WCAGの達成基準3.1.6 発音(レベルAAA)が扱う実務で、JIS X 8341-3:2016にも同じ基準があります。

スクリーンリーダー 市場での位置づけ(日本) 主要な日本語対応能力 テストの優先度
PC-Talker 日本で広く使われている 日本語向けに開発。漢字の発音、読み順、日本語の句読点に標準で対応 高——日本市場の主要テスト対象
NVDA+日本語 第二・開発者が使用 オープンソース。日本語の読み上げに対応し、無償で使える 高——アクセシビリティQAのオープンソース基準
VoiceOver(日本語) Appleエコシステム 日本語対応が強力。iOSのウェブアプリやmacOS向けSaaSに関係 中——モバイルやmacOSの利用者がいる製品では必須
JAWS 英語圏で広く使われる 英語圏のテストで基準にされることが多い 補助——日本語の読み上げ確認はPC-TalkerやNVDAと併用する

日本語の代替テキスト:長さ・漢字戦略・読み順

日本語の代替テキストは、英語の代替テキストを日本語に訳したものではありません。書き方の慣行がかなり違うため、翻訳作業として扱うと、長すぎて聞き疲れする、漢字の読みが曖昧で誤読される、説明の順序が内容と合わない、のいずれかの問題を抱えた代替テキストができあがります。

長さ:日本語は漢字を使うため、英語の文章より1文字あたりの情報量がかなり多くなります。うまく書けば、20〜30文字の日本語の代替テキストで、英語なら60〜80文字かかる内容を伝えられます。「日本語の代替テキストは短くせよ」と言いたいわけではありません。長すぎる日本語の代替テキストは、スクリーンリーダー利用者にとって特に疲れるものになる、という制約の話です。英語にありがちな網羅的な説明を持ち込まず、画像の本質的な内容と役割を書くのが慣行です。

漢字の読み戦略:グラフのラベル、製品名、ドキュメントのタイトルなど、画像に漢字のテキストが含まれる場合は、代替テキストで読みをはっきり扱う必要があります。alt属性に漢字をそのまま書くだけでは、読み方の推測をスクリーンリーダーに任せることになります。読みが一通りしかない一般的な語ならそれで問題ありません。金融用語、法律用語、変わった読みの製品名といった専門的な業務用語では、漢字に読みを添えるか、漢字の代わりに読みを示すべきです。

改善前(altで漢字に読みなし)
alt="売上高の推移グラフ"
スクリーンリーダーは「売上高」を「うりあげたか」とも「うりあげこう」とも読みうる——読みが曖昧です。「推移」は比較的フォーマルな語で、耳で聞いて認識できない読者もいます。
改善後(発音の明確さを追加)
alt="売上高(うりあげだか)の推移グラフ"
音(読み)を括弧で併記しています。スクリーンリーダーは漢字に続けてふりがなを読み上げるので、グラフの説明で最も大事な用語の読みが曖昧になりません。

装飾的な画像:ルールはWCAGと同じで、装飾的な画像には空のalt属性(alt="")を使います。ただし機械的には決められず、一つずつ判断する必要があります。日本語UIで何を装飾とみなすかは、英語の原版と違うことがあるからです。英語のデザインでは単なる飾りだったアイコンが、テキストを切り詰めた日本語UIでは意味を担うこともあります。

日本語におけるARIAラベルの慣行

日本語SaaS製品のARIAラベルの失敗は、決まった4つのパターンに分かれます。4つとも原因は同じで、ARIAラベルのローカライゼーションを、読み上げを聞いて操作する人に向けたコンテンツ作りではなく、翻訳作業として扱ったことにあります。

パターン1:英語のARIAラベルが未翻訳のまま。最も多い失敗です。画面に見えるUIテキストは日本語になっているのに、晴眼ユーザーには見えないaria-label属性が英語のまま残っています。すべて日本語化された画面をスクリーンリーダーでたどっていくと、操作できる要素のところだけ英語で読み上げられます。聞く側には耳障りな言語の切り替わりで、アクセシビリティ層がローカライゼーションの範囲から漏れていたことがはっきり分かります。

改善前 — 日本語UIの中の英語aria-label
<button aria-label="Close dialog">×</button>
<!-- スクリーンリーダーの読み上げ:「Close dialog, button」と英語で。
     UIの他の部分は日本語なのに -->
改善後 — 日本語のaria-label、機能本位の語調
<button aria-label="ダイアログを閉じる">×</button>
<!-- スクリーンリーダーの読み上げ:「ダイアログを閉じる、ボタン」
     全体を通じて一貫した日本語 -->

パターン2:ARIAラベルに敬語の語調。日本語には丁寧さの段階がいくつもあり、製品UIの日本語を書くときは、つい丁寧語や敬語を使いたくなります。しかしARIAラベルは操作のための読み上げであって、社交の言葉ではありません。スクリーンリーダー利用者はツールバーをたどりながら、ボタンのaria-labelを一つずつ順に聞きます。敬語を足しても情報は増えず、利用者の操作が遅くなるだけです。日本語のARIAラベルに合うのは常体の簡潔な日本語で、その要素が実行する操作をそのまま書きます。

改善前(敬語の語調、冗長すぎる)
aria-label="ファイルをアップロードしてください"
「ください」は説明文なら自然ですが、ARIAラベルでは余計な長さになるだけです。スクリーンリーダー利用者は、ボタンに行き当たるたびにこれを聞かされます。
改善後(機能的な常体)
aria-label="ファイルをアップロード"
常体で直接書いています。語調の飾りを付けずに操作だけを読み上げます。日本市場向けにスクリーンリーダー対応をしている製品では、これが標準です。

パターン3:機能の説明ではなく見た目の説明。要素の働きではなく見た目を説明するaria-labelは、その要素が見える人にしか役に立ちません。スクリーンリーダー利用者が知りたいのは、その要素で何ができるかです。「青いアイコン」はARIAラベルではありません。「通知を確認する」がARIAラベルです。

パターン4:ランドマークのラベルが欠落、または未翻訳。ARIAのランドマークロール(navigation、main、complementary、form、search)があると、スクリーンリーダー利用者はセクション間を移動しやすくなります。読み上げをそろえるため、日本語の製品ではこれらのランドマークにも日本語のラベルを付けるべきです。ランドマークのラベルが英語のままだと、ボタンのラベルが未翻訳の場合と同じく、途中で言語が切り替わってしまいます。

日本語のランドマークラベル
<nav aria-label="メインナビゲーション">...</nav>
<nav aria-label="パンくずリスト">...</nav>
<section aria-label="関連記事">...</section>
<!-- スクリーンリーダー:「メインナビゲーション、ナビゲーション」
     日本語UIの途中で「Main navigation, navigation」とならずに -->

日本語フォームのアクセシビリティ:ラベル・エラー・必須項目

日本語フォームのアクセシビリティには、ARIA仕様の既定値とも英語圏の慣行とも違う作法があります。ローカライゼーションで判断を迫られることが特に多いのは、必須項目の表示、エラーの読み上げ方、フォーム項目と説明文のラベルの関連付けの3つです。

必須項目の表示:英語のフォームでは、必須項目にアスタリスク(*)を付け、「*印の項目は必須です」という凡例を添えるのが慣例です。日本語のフォームは違います。項目ラベルの横に赤やオレンジのタグで必須(hissu — required)と表示するバッジを使います。アスタリスクも日本のユーザーに通じますが、海外の流儀に見えます。「必須」バッジは日本で標準の表示なので、スクリーンリーダー向けにはプログラム上のaria-required="true"と組み合わせて使うべきです。

日本語の必須項目表示
<label for="company-name">
  会社名 <span class="required-badge" aria-label="必須">必須</span>
</label>
<input type="text" id="company-name"
       aria-required="true"
       aria-describedby="company-name-error">
<!-- スクリーンリーダー:「会社名、必須、テキストフィールド、必須項目」 -->

エラーの読み上げパターン:日本語のフォームの送信がバリデーションで弾かれたとき、エラーの読み上げは、日本語のスクリーンリーダー利用者が期待する4部構成に沿っている必要があります。(1) どの項目にエラーがあるか、(2) 入力の何が誤っていたか、(3) 正しくはどう入力すべきか、(4) 再送信の前にその項目を直す必要があること、を順に伝えます。問題を指摘するだけで直し方を示さないエラーメッセージでは、晴眼者に手伝ってもらわない限り、ユーザーは自分で問題を直せません。

改善前 — 不完全なエラーメッセージ
<span role="alert" id="email-error">
  メールアドレスが正しくありません。
</span>
<!-- 欠落:この項目で正しいメールアドレスの形式は何なのか -->
改善後 — 4部構成のエラー読み上げ
<span role="alert" id="email-error">
  メールアドレス欄にエラーがあります。
  入力されたメールアドレスの形式が正しくありません。
  半角英数字で「[email protected]」の形式で入力してください。
</span>
<!-- 項目を特定 / 問題を提示 / 正しい形式を提示 / 行動を示唆 -->

日本語のモーダルダイアログのフォーカス管理では、英語にそのまま対応するものがない判断が一つ出てきます。閉じる操作の読み上げです。英語のアクセシビリティの慣行では、×ボタンに aria-label="Close dialog" や aria-label="Close" を使うのが普通です。日本語には、日本のUIドキュメントがこの操作を説明するときの定番の言い回し「×で閉じる」があります。aria-labelとしてより自然なのは「ダイアログを閉じる」、タイトルのあるモーダルなら「[モーダルのタイトル]を閉じる」です。

フォーカス管理でさらに踏み込むべきなのは、モーダルダイアログのロールの読み上げです。日本語のモーダルダイアログが開いたら、スクリーンリーダーには汎用のロール名だけでなく、そのダイアログが何のためのものかを日本語で読み上げさせるべきです。日本語のタイトル要素をaria-labelledbyで、日本語の説明をaria-describedbyで指しておけば、フォーカスがダイアログ内に移った時点で文脈が伝わります。

適切なフォーカス管理を備えた日本語のモーダルダイアログ
<div role="dialog"
     aria-labelledby="modal-title"
     aria-describedby="modal-desc"
     aria-modal="true">
  <h2 id="modal-title">削除の確認</h2>
  <p id="modal-desc">このファイルを削除してもよいですか?この操作は取り消せません。</p>
  <button>削除する</button>
  <button aria-label="削除の確認を閉じる">×</button>
</div>
<!-- フォーカス時:「削除の確認、ダイアログ、このファイルを削除してもよいですか…」 -->

JIS X 8341-3とカラーコントラスト

JIS X 8341-3(正式名称:高齢者・障害者等配慮設計指針——情報通信における機器、ソフトウェア及びサービス——第3部:ウェブコンテンツ)の現行版JIS X 8341-3:2016は、国際規格ISO/IEC 40500:2012の一致規格で、規格本文はWCAG 2.0と同じ内容です(WAIC=ウェブアクセシビリティ基盤委員会の解説による)。適合レベルもA・AA・AAAの3段階で共通しています。そのため、カラーコントラスト比、キーボード操作、時間依存メディアの字幕といった達成基準は、WCAG 2.0と同じものとして確認できます。WCAG 2.1以降で追加された達成基準はJIS X 8341-3:2016には含まれていません。

規格本文がWCAG 2.0と同じである以上、日本語だけに課される追加の要件があるわけではありません。日本語SaaSのローカライゼーションで差が出るのは、同じ達成基準を日本語の文字と読み上げに当てはめる段階です。たとえば漢字の読みの示し方は、WCAGの達成基準3.1.6 発音(レベルAAA)で扱われており、W3Cの実装方法H62はruby要素で読みを示す方法を挙げています(具体的な手順は後述の「日本語の読み上げ点検」で扱います)。

カラーコントラストの要件はWCAG 2.0と同一です(WCAG 2.1でも変わっていません)。レベルAAで、通常のテキストは4.5:1、大きなテキスト(18pt、または14ptの太字)は3:1。日本語で実装するときに注意したいのは、日本語の本文では同じフォントサイズの中に漢字・かな・ラテン文字が混在することが多く、実際にレンダリングされた太さでこの比率を満たす必要がある点です。日本語フォントとラテン文字のフォールバックフォントは太さが違って見えることがあり、デザイン仕様どおりにならない場合があるからです。

英語でWCAG 2.1 AAに合格する製品でも、日本語のアクセシビリティQAでは不合格になることがあります。技術的な適合要件が違うからではありません。日本語の言語層(ARIAラベル、代替テキスト、フォームのエラー読み上げ、ふりがな)を、アクセシビリティのためのコンテンツ作りではなく、翻訳作業として扱ったからです。

日本語アクセシビリティ ローカライゼーション チェックリスト

🧪

テストと適合

  • スクリーンリーダーのテスト:日本語の読み上げはPC-Talkerと日本語版NVDAで確認する(JAWSだけで済ませない)。
  • JIS X 8341-3の目標:目標とする適合レベル(A・AA・AAA)を決め、達成基準ごとの確認結果を文書に残して検証できるようにする。
  • カラーコントラスト:4.5:1の比率を、デザイン仕様上の太さではなく、日本語フォントの実際のレンダリングの太さで検証する。
📝

代替テキスト

  • 漢字の読み:専門的な漢字を含む画像の代替テキストは、スクリーンリーダーに誤読されうる用語について音(読み)を提供する。
  • 長さ:日本語の代替テキストは簡潔に——漢字の密度により、英語が60文字以上を要することを20〜30文字で表せることが多い。
  • 装飾的な画像:空のalt=""を正しく使う。テキストを切り詰めたUIで意味を担う日本語のアイコンには、空でない代替テキストを付ける。
⚙️

ARIAラベルとランドマーク

  • 英語のARIAラベルを残さない:すべてのaria-label、aria-labelledbyの参照先テキスト、aria-describedbyの参照先テキストが日本語であること——アクセシビリティ層に英語の痕跡を残さない。
  • 機能本位の語調:ARIAラベルは常体の日本語(ダイアログを閉じる)を使う——聴取の疲労を加える敬語の語調(〜してください、〜ます)は使わない。
  • ランドマークのラベル:nav、main、aside、sectionのランドマークに日本語のラベル(メインナビゲーション、パンくずリスト)を付け、スクリーンリーダーでの移動時の読み上げをそろえる。
  • 見た目より機能:ARIAラベルは、要素がどう見えるかではなく、何をするかを説明する。
📋

フォームとエラーメッセージ

  • 必須項目の表示:アスタリスクの代わりに、またはアスタリスクと併せて「必須」バッジを使う。凡例がなくても通じる、日本で標準の表示。
  • エラーの読み上げ:すべてのバリデーションエラーが4部構成のパターンに従う——項目を特定/問題を提示/正しい形式を提示/行動を示唆。
  • モーダルのフォーカス:ダイアログは日本語のタイトルと説明のテキストを指すaria-labelledbyとaria-describedbyを使う。閉じるボタンには「ダイアログを閉じる」または「[タイトル]を閉じる」とラベル付けする。

あなたの日本語アクセシビリティ層は本番対応できていますか?

ARIAラベルのローカライゼーション、代替テキストでの漢字の扱い、フォームのエラー読み上げ、JIS X 8341-3への適合は、どれも英語のアクセシビリティ監査に通った製品が日本語の監査で引っかかる領域です。ミニ診断は、日本語のアクセシビリティ層に絞って点検します。技術的な適合チェックツールでは拾えない、コンテンツ面の判断です。

ミニ診断を依頼する

日本語の読み上げ点検:lang属性・ルビ・空白の実装手順

日本語ページの読み上げ品質は、訳文が正しいかどうかとは別の問題です。支援技術に「この部分は何語か」「この漢字をどう読むか」「どこまでが1語か」を伝えられているかで決まります。WCAG 2.2では、この3点がそれぞれ別の達成基準に対応しています。

達成基準(レベル) 要件の要旨 日本語版での実装
3.1.1 ページの言語(A) 各ページの既定の言語をプログラムで判定できる <html lang="ja">。英語版のテンプレートを複製して作ったページで lang="en" が残っていないかを確認する
3.1.2 一部分の言語(AA) 文章や語句ごとの言語を判定できる。ただし固有名詞、技術用語、言語が特定できない語、周囲の文章に定着した語は除く 英語のまま残した一文や引用には <span lang="en"> を付ける。製品名や「API」のような技術用語は例外に当たるため、1語ずつ囲む必要はない
3.1.6 発音(AAA) 文脈の中で発音が分からないと意味が曖昧になる語について、発音を特定する仕組みがある <ruby> で読みを示す。W3Cの解説書は、日本語のルビは「発音」より「読み」を示すものだと注記している

ルビは rt と rp をセットで書く

W3Cの実装方法H62(ruby要素の使用)は、3.1.6を満たす方法として、各親文字に対応する読みが rt 要素に入っていること、簡易ルビでは rp 要素で括弧を補い、ルビ非対応の環境でも読みだと分かるようにすることを検証手順に挙げています。たとえば「重複」は「ちょうふく」とも「じゅうふく」とも読まれる語です。

rt と rp をセットにした簡易ルビ
<ruby>重複<rp>(</rp><rt>ちょうふく</rt><rp>)</rp></ruby>

見た目の組み方は、W3Cの「日本語組版処理の要件(JLREQ)」3.3節が整理しています。1字の親文字に付けるモノルビ、複数字にまとめて付けるグループルビ、熟語を構成する字に振り分ける熟語ルビの3種があり、ルビ文字は親文字のおおむね半分の大きさで組むのが一般的とされています。UIのラベルやボタンに多用すると行の高さが揃わなくなるため、ルビは本文や説明文の難読語に絞り、ボタンの文言は読み違えにくい語に言い換えるほうが実務的です。

字間を空白文字で調整しない

見出しや表の見出しセルで「東 京」のように全角スペースを入れて字間を広げる書き方は、日本語サイトでよく見られます。W3Cは、単語の中の空白文字で間隔を調整することを達成基準1.3.2(意味のある順序)の不適合事例F32として挙げ、「東 京」が1語として認識されず、別の語として読まれてしまう例を示しています。縦書き風に1字ずつ改行した表の見出しも、同じ事例の中で不適合とされています。字間は letter-spacing などCSSで調整します。

リリース前の読み上げ点検手順

  1. 言語指定:html 要素が lang="ja" になっているか。英語の一文・引用に lang="en" が付いているか(3.1.1/3.1.2)。
  2. 空白の混入:見出し・表・ナビゲーションで、字間調整のための空白文字や1字ごとの改行がないか(F32)。
  3. 誤読候補の洗い出し:難読語・同形異音語、数字と単位の組み合わせ(容量・料金・日数)、全角英字(「API」など)、範囲を示す「〜」を含む表記を一覧にする。読み上げ辞書や設定によって読み方が変わるため、ここは机上ではなく実機で聞いて確かめる。
  4. 実機確認:日本語版NVDAとVoiceOver(日本語)で一覧の語を読み上げさせ、誤読した語を記録する。
  5. 修正:誤読した語は、全角英字を半角に直す、表記を言い換える、本文中ならルビを付ける、のいずれかで直す。
  6. ルビの再確認:ルビを付けた語で、親文字と読みが二重に読み上げられるなど聞き取りにくくなっていないかを再度聞いて確かめる。

出典:W3C「Web Content Accessibility Guidelines (WCAG) 2.2」達成基準3.1.1・3.1.2・3.1.6の解説書(Understanding SC 3.1.2、Understanding SC 3.1.6)、実装方法H62、不適合事例F32、W3C「日本語組版処理の要件」(2020年8月11日版)3.3節。

よくある質問

2024年の日本のアクセシビリティ法改正で、SaaS企業にとって何が変わりましたか?

2024年4月1日施行の改正障害者差別解消法により、事業者による合理的配慮の提供が、努力義務から法的義務に変わりました。対象はソフトウェアやオンラインサービスの提供者を含む民間事業者全般です。ここでいう合理的配慮は、障害のある人から社会的障壁の除去を求められた場合に、負担が過重でない範囲で個別に対応することを指します。一方、ウェブサイト等のアクセシビリティを事前に整える環境の整備(法第5条)は、改正後も努力義務のままです。とはいえ、環境の整備が進んでいれば個別の求めにも応じやすくなるため、日本市場向けSaaSでも計画的に取り組む価値があります。

SaaS製品はどの日本語スクリーンリーダーに対応する必要がありますか?

日本で広く使われている日本語スクリーンリーダーには、株式会社高知システム開発のPC-Talkerと、日本語で使えるオープンソースのNVDAがあります。PC-Talkerは日本語の読み上げを前提に作られた製品で、漢字の読みや日本語の句読点を扱えるよう設計されています。NVDAは無償で入手でき、開発者のテスト環境としても使いやすい選択肢です。英語圏で広く使われるJAWSでの確認だけでは、日本語テキストの実際の読み上げを見落とすおそれがあるため、日本の利用者が使うツールでも確認することをおすすめします。iOSやmacOSでは、日本語のApple VoiceOverも確認対象になります。

日本語の代替テキストは英語の代替テキストとどう書き分けるべきですか?

日本語の代替テキストは、英語との構造的な違いをいくつか踏まえて書く必要があります。まず読み順です。スクリーンリーダーは既定で横書きを左から右へ読むので、代替テキストもその順で画像を説明します。次に長さです。漢字は1文字あたりの情報量が多いため、日本語の代替テキストは英語版より短くなるのが普通で、長すぎると聞き疲れの原因になります。スクリーンショットや画像に漢字の多いテキストがあり、用語を正確に理解してもらう必要がある場合は、代替テキストで音(読み)を明示します。たとえば「売上高」というグラフのラベルは、漢字だけで残さず「売上高(うりあげだか)」のように書くべきです。装飾的な画像には、英語の慣行と同じく空のalt属性(alt="")を使います。

日本語SaaSのローカライゼーションで最も多いARIAラベルの誤りは何ですか?

日本語SaaSで最も多いARIAラベルの誤りは4つです。(1) 他のUIテキストはすべて翻訳されているのに、ARIAラベルだけ英語のまま残っている。日本語の画面の中で、スクリーンリーダーが英語を読み上げてしまいます。(2) ARIAラベルに丁寧すぎる敬語を使う。スクリーンリーダーの読み上げは操作のためのもので、社交の言葉ではありません。丁寧な表現は聞き疲れを増やすだけです。(3) ARIAのロール名を、日本語のアクセシビリティツールが想定する標準的な日本語の用語にせず、直訳してしまう。(4) aria-labelに、要素の働きではなく見た目を書く。「青いアイコン」では役に立ちませんが、「通知を確認する」ならボタンで何ができるかがユーザーに伝わります。

JIS X 8341-3とは何で、WCAGとどう関係しますか?

JIS X 8341-3は、ウェブアクセシビリティに関する日本産業規格で、正式名称は「高齢者・障害者等配慮設計指針——情報通信における機器、ソフトウェア及びサービス——第3部:ウェブコンテンツ」です。現行のJIS X 8341-3:2016は国際規格ISO/IEC 40500:2012の一致規格で、規格本文はWCAG 2.0と同じ内容です。適合レベルもA・AA・AAAの3段階で共通しています。そのため、日本語だけに課される追加の要件があるわけではありません。差が出るのは、同じ達成基準を日本語の文字と読み上げに当てはめる段階です。たとえば漢字の読みの示し方は、WCAGの達成基準3.1.6 発音(レベルAAA)で扱われています。

日本語アクセシビリティQA

あなたの日本語UIは、スクリーンリーダーで通用しますか?

2024年4月の法改正で、民間事業者にも合理的配慮の提供が義務化されました。ARIAラベル、代替テキストの書き方、フォームのエラーの出し方、JIS X 8341-3への適合は、どれも技術的には正しく作られた製品が日本語のアクセシビリティQAでつまずく領域です。ローカライズはしていても、アクセシビリティまではローカライズしていなかったからです。