LoginSignup
8
3

More than 5 years have passed since last update.

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

Last updated at Posted at 2017-03-20

日本語が書かれているページなのに、 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 日追記)

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

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

8
3
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
8
3