#a11y アクセシビリティとサイト翻訳についてのポエム
この記事は「アクセシビリティ Advent Calendar 2024 - Adventar」 の6日目の記事を遅刻して書いたものです🙏ごめんなさい🥺🥺
なお人生初アドベントカレンダーの模様。
……さて本題です！
これは私自身がよくサイトの翻訳機能（主にGoogle翻訳かDeepL）を使うことから思った話なのですが、例えば海外のおしゃれなヘッドフォンを買おうとする。商品のことを詳しく知りたいのでサイトをブラウザの機能で翻訳した。すると大きな文字で書かれたキャッチコピーが、とんでもなく大きい日本語になってしまって肝心のボタンが隠れてしまった────クリックできない────
なんてことが時々起こるわけです。
それって他言語の人にとってアクセシブルじゃないんじゃないか？ということを思った、というポエム。
例えば日本語と英語では文の長さが違うから
例えば海外の有名なサイトを日本語訳してみたり、日本の大手のサイトを英語訳してみると、なるべく短く平易なコピーを使うようにしているので翻訳してもとんでもないことになりづらいようですね（すごい）。でも有名じゃないサイトだと……例えばこの例では商品写真が隠れてしまっていますね。これではせっかくの商品画像が台無しです。（でも安心してください、私が15分で作ったサイトですから😇）
line-height に潜む罠
このボタンは line-height: 60pxで実装されています。ボタンの高さが60pxだし一行だし。
でもこれを翻訳したら？こんなふうに文字がボタンの外に飛び出してしまうかもしれません。
ボタンやメニューなどで「line-height=要素の高さ」にするのはやめた方がいいかもしれません。
日本語サイトを英語に訳してみよう
さて私は日本語話者ですから英訳する機会はたくさんありますが、じゃあ日本語のサイトを海外の人が翻訳したら？よく見かけるのは「詳細はこちら」ボタン。ピッチピチに作ってあると、はみ出して飛び出してしまいます。こんな感じ。ピッチピチに作る時は気をつけましょう。（どう気をつけるかはお任せっと）
じゃあ英語に翻訳するには？
ChromeだとGoogle翻訳がコンテキストメニューやアドレスバーからアクセスできますが、ちょっと一工夫必要です。日本語のサイトではアドレスバーにアイコンが出ません。
そこで以下の手順でアクセスしましょう。
- コンテキストメニュー（右クリックメニュー）をクリック。
- 「日本語に翻訳」をクリック。
- Google翻訳のメニューが表示されるので……
- ケバブメニューから「別の言語を選択」をクリック。
- 「翻訳先の言語」で「英語」を選択。
これで日本語サイトを英語に翻訳できるようになりますよ！
戻す時も同じ感じの手順で。
画像は翻訳ableではないのか？
さてYahoo!さんとか楽天さんのサイトをワクワクして見てきたあなた。
結構英語に訳してもイケるじゃないかとお思いでしょう。でもバナーはめっちゃ日本語。これはどう考えたらいいのか？以下ぼやき。
- altは英訳されるようだが弱視の人以外には伝わりづらいな……それにほとんどのバナーはaltが空だし……
- 少なくともiOSのモバイルSafariの翻訳では画像内の文字も日本語訳されるから、これが普及するのを祈ってセーフとするべきか。
- SVGならいけるのでは？テキストデータ残したSVG。→いけませんでした。
今の所、2のようにブラウザやOSがAI等で補完してくれるようになるのを祈るしかなさそうです…
3. SVGならいけるのでは？の実験結果を補足（蛇足）
- いけませんでした。
- Figmaから書き出すとデフォでアウトライン化されるのでイラレで実験しました。
- htmlに書き出したSVGを埋め込んでブラウザへポン！
- 日本語に翻訳/英語に翻訳してもウンともスンとも言いません。
- 脇道にそれて。GoogleフォントをSVG内に@importしてfont-familyしたらMacのFinder上ではフォントが反映された（！）けど、Chrome/Safariに突っ込んだらフォントは反映されませんでした。Why？
- というわけでSVGの文字を翻訳させるのは無理そうです。
どこまで対応するべきか？
さて、翻訳、どこまで対応するべきか？
英語？スペイン語？韓国語？中国語は？
こういう問題は翻訳に限らずアクセシビリティにはつきもの。
でも外国語の訪問者が多いサイトなら。気をつけてみてもいいかもしれませんね！（他言語サイトを作るのももちろん良いと思いますが！）また、これをきっかけに身近なサイトを翻訳してみると楽しいかもしれませんね！
……と無責任に締め括らせていただきまして。
ここまでポエムにお付き合いいただきありがとうございました。
Discussion