Android
iOS
voiceover
accessibility
TalkBack

HTML の lang 属性が違うと iOS 版の VoiceOver で日本語が読み上げられない問題について

More than 1 year has passed since last update.

日本語が書かれているページなのに、 iOS の VoiceOver だと英語しか読み上げないページがあった。なんとなく Lang 属性の指定が問題なのかな?と思いながら検索したところ、やはりそのようで、 iOS の VoiceOver については HTML の Lang 属性で読み上げる言語を変えるらしい。(2017 年 4 月 23 日追記:テストしたページの文字コードは UTF-8)

以下はそれに関するチェック方法について。


iOS の VoiceOver での読み上げが Lang 属性に左右されることが書いてあったリソース

OS X 環境の VoiceOverAndroid の TalkBack だと日本語を読み上げるので、そっちに揃えてくれればよいのにと思ったり(※良い子は正しい言語を指定しましょう)。


リモートデバッグについて

Mac のローカルにある HTML であれば HTML のソースを直接書き換えれば良いが、今回は iOS 上の Safari なので、リモートデバッグの機能を使って "lang=en" を "lang=ja" に書き換え、その上で VoiceOver で日本語が読み上げられるかを確認。


iOS 環境で Lang 属性が変わると読み上げ結果が変わるかどうかの確認方法:


  1. Mac 上で Safariを開き、Web Inspector でリモートデバッグを設定する。


    1. メニューの Safari > 環境設定 > 詳細 から「メニューバーに"開発"メニューを表示」にチェックを入れる



  2. iPhone の詳細設定で Web インスペクタを使用することを許可する


    1. 設定 > Safari > 詳細 > Web インスペクタ を ON にする



  3. iPhone と Mac を USB ケーブルで Mac と繋いで、 Mac に繋ぐことを許可する

  4. Mac上の Safari で開発 > iPhone から該当の Web サイトを選び、 Web インスペクタを開く

  5. 要素タブを開き、lang="en" を lang="ja" に書き換える

  6. iOS 上の VoiceOver を起動して、確認したい Web サイトを読み上げる。


Android 環境で Lang 属性が変わると読み上げ結果が変わるかどうかの確認方法:


  1. Android 端末をリモート デバッグ用に設定


    1. 詳細は端末開発者向けオプションを有効にするを参照



  2. USB ケーブルで Android 端末と Mac を繋ぐ

  3. PC 上で Google Chrome のデベロッパーツールを起動してリモートデバッグを指定する

  4. Elements パネルを開き、lang="en" を lang="ja" に書き換える

  5. Android 端末上で TackBack を起動して、確認したい Web サイトを読み上げる。


    1. TackBack の起動方法については Talkback を有効にする - Android Accessibility ヘルプを参照




どんなページで起きやすいのか? (2017 年 4 月 23 日追記)


  • 英語圏で作られたテンプレをベースに作成されたページ or コピペページ

  • 英語圏のサービスを多言語化したページ


いやこれ毎回読み上げしなくても事象わかってればソース見ればわかるよね? (2017 年 4 月 23 日追記)


  • 日本語だらけなのに英語しか読み上げない、ということを理解してもらう上では意味があるかと思います(特にクライアント)。

最後のは多分に願望入ってますが。