右から左に読む系の言語をスクリーンリーダーはどう読むか
この記事は「アクセシビリティ Advent Calendar 2023」20日目の記事です。
日本語は左から右に読む。htmlも左から右に読む。
当たり前に左から右に書かれているものを読んでいましたが、以前にアラビア語で書かれた全てのレイアウトが逆になったサイトを社内勉強会で見かけました。（リンクは忘れました。。）
きっとアラビア語がアラビア語であることを知らなかったら、必死に左の文字からググっていたことでしょう。
わからない言語はコピペでググるか、発音を必死に聞き取ってアルファベットかカタカナでググる派ですが、スクリーンリーダーは果たして適切な方向で読んでくれるのでしょうか。
気になったので雑に検証しました。
右から左に読む言語は、スクリーンリーダーにどう読まれる？
まずは適当なページを作ってみる
「こんにちは、私たちのサイトへようこそ」と書いてある簡単なhtmlを作ってみました。ChatGPT曰く、アラビア語では「مرحبا بكم في موقعنا」と読むそうです。
カタカナで発音を書くなら「マルハバ ビクム フィ モーカナ」
自分の聞き取りを信じるなら「まりはばん びこんふぃーま」
といったところでしょうか。
htmlは以下の通りです。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>Arabic and Japanese Text Example</title>
</head>
<body>
<h1>Arabic and Japanese Text</h1>
<p>Arabic: مرحبا بكم في موقعنا</p>
<p>Japanese: こんにちは、私たちのサイトへようこそ</p>
</body>
</html>MacのVoice Overで読み上げてもらう
読み上げてもらった結果を、自分の聞き取り能力を信じて評価すると以下のようになりました。（Voice Over上の文字はアラビア語で表示されていた）
htmlにlang属性をつけなかった場合
読み上げ結果「アラビック マルハバ ビクム フィ モーカナ」
lang属性にJapaneseを指定した場合
読み上げ結果「アラビック マルハバ ビクム フィ モーカナ」
lang属性にArabicを指定した場合
読み上げ結果「アラビック マルハバ ビクム フィ モーカナ」
画像のAltタグがアラビア語ならどうなるの？
<img src="sample.png" alt="مرحبا بكم في موقعنا" width="500" height="500" />altタグに書かれたアラビア語は読み上げられませんでした。
また、別の発見として、日本語・英語の箇所は女性の機械音声で読み上げられたが、アラビア語の箇所だけ男性の機械音声で読み上げられました。
おまけ
VScode上でもアラビア語は右から左に解釈された。
アラビア語上でキーボードの右矢印を押すと、左にカーソルが移動しました。すごい。逆も然りでした。
結論
Mac OSのChrome上では、スクリーンリーダーがよしなに言語を解釈してくれるようです。ただし、img要素のaltタグに書かれてあるアラビア語は読み上げてくれませんでした。もしかしたらOSかブラウザの言語設定次第では読み上げられるのかもしれません。
引き続き、右から左に読む系言語の奥地へと足を踏み入れていきたいと思います。
この記事が気に入ったらサポートをしてみませんか？