Qiita Teams that are logged in
You are not logged in to any team

Log in to Qiita Team
Community
OrganizationAdvent CalendarQiitadon (β)
Service
Qiita JobsQiita ZineQiita Blog
Help us understand the problem. What is going on with this article?

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

More than 3 years have 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 日追記)

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

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

Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away