日本語が書かれているページなのに、 iOS の VoiceOver だと英語しか読み上げないページがあった。なんとなく Lang 属性の指定が問題なのかな?と思いながら検索したところ、やはりそのようで、 iOS の VoiceOver については HTML の Lang 属性で読み上げる言語を変えるらしい。(2017 年 4 月 23 日追記:テストしたページの文字コードは UTF-8)
以下はそれに関するチェック方法について。
iOS の VoiceOver での読み上げが Lang 属性に左右されることが書いてあったリソース
- VoiceOver は HTML の lang 属性値によって読み上げる言語を切り替えるのか •• connecting dots
- 【iPhone 3GS使用レポート5】 バージョンアップで向上した読み上げ機能 | アクセシビリティBlog | ミツエーリンクス
OS X 環境の VoiceOver や Android の TalkBack だと日本語を読み上げるので、そっちに揃えてくれればよいのにと思ったり(※良い子は正しい言語を指定しましょう)。
リモートデバッグについて
Mac のローカルにある HTML であれば HTML のソースを直接書き換えれば良いが、今回は iOS 上の Safari なので、リモートデバッグの機能を使って "lang=en" を "lang=ja" に書き換え、その上で VoiceOver で日本語が読み上げられるかを確認。
- Safari でのリモートデバッグ設定は Safari Web Inspector Guide (英語) を参照
- Android でのリモートデバッグについては Android 端末のリモート デバッグを行う | Web | Google Developers を参照。
iOS 環境で Lang 属性が変わると読み上げ結果が変わるかどうかの確認方法:
- Mac 上で Safariを開き、Web Inspector でリモートデバッグを設定する。
- メニューの Safari > 環境設定 > 詳細 から「メニューバーに"開発"メニューを表示」にチェックを入れる
- iPhone の詳細設定で Web インスペクタを使用することを許可する
- 設定 > Safari > 詳細 > Web インスペクタ を ON にする
- iPhone と Mac を USB ケーブルで Mac と繋いで、 Mac に繋ぐことを許可する
- Mac上の Safari で開発 > iPhone から該当の Web サイトを選び、 Web インスペクタを開く
- 要素タブを開き、lang="en" を lang="ja" に書き換える
- iOS 上の VoiceOver を起動して、確認したい Web サイトを読み上げる。
Android 環境で Lang 属性が変わると読み上げ結果が変わるかどうかの確認方法:
- Android 端末をリモート デバッグ用に設定
2. 詳細は端末開発者向けオプションを有効にするを参照 - USB ケーブルで Android 端末と Mac を繋ぐ
- PC 上で Google Chrome のデベロッパーツールを起動してリモートデバッグを指定する
- Elements パネルを開き、lang="en" を lang="ja" に書き換える
- Android 端末上で TackBack を起動して、確認したい Web サイトを読み上げる。
- TackBack の起動方法については Talkback を有効にする - Android Accessibility ヘルプを参照
どんなページで起きやすいのか? (2017 年 4 月 23 日追記)
- 英語圏で作られたテンプレをベースに作成されたページ or コピペページ
- 英語圏のサービスを多言語化したページ
いやこれ毎回読み上げしなくても事象わかってればソース見ればわかるよね? (2017 年 4 月 23 日追記)
- 日本語だらけなのに英語しか読み上げない、ということを理解してもらう上では意味があるかと思います(特にクライアント)。
最後のは多分に願望入ってますが。