機械翻訳のためのWebアクセシビリティ

英語がわからないため機械翻訳によく頼る。最近は精度もあがっているらしく助かってる。しかし折角の精度が上がっても「元」がダメだとどうしようもない。今回は機械翻訳視点でのWebアクセシビリティの話。

マシンリーダブル

アクセシビリティが大きく2つの要素にわけられるのは、この記事のタイトルの琴線に触れた方ならご存知だと思う。ヒューマンリーダブルとマシンリーダブルだ。

カラーコントラストやフォントサイズ、1行の文字数やラベリングなどヒューマンリーダブルはわりとわかりやすい。文字通り人間が読める（認識）できるかどうかだからだ。

一方マシンリーダブルはSEOやスクリーンリーダー、またはスクレイピングのためなど目的が挙げられがちで、縁のない人には関係ないと思われやすいと感じている（主観）。その「関係ない」の垣根なくしましょうというのがWebアクセシビリティ向上の目的ではあるんだけど、やっぱり比べるとユースケースを想像しにくいと思う。

機械翻訳もHTMLの中のテキストを解析して翻訳処理をするためマシンリーダブルなシステムだ。アクセシビリティが低い、つまりマシンリーダビリティが低いときちんと解析できずに精度の低い翻訳結果ができあがる。

機械翻訳の例を介して、マシンリーダブルのユースケースの想像の糧を増やしてもらえたらと思う。

正しいタグを使用せよ

Web技術者のはしくれなのでGithubを利用することが多い。そこのドキュメントのほとんどが英語だ。なので必要なときは機械翻訳に頼る。ドキュメントの中にはプログラムのソースコードの断片が記載されることが多いが、これがGoogleの翻訳を利用するとエラいことになってしまう。

例に上げた画像は、Reactというライブラリのドキュメントを翻訳したスクリーンショットだ。一部にプログラムのソースコードがサンプルとして記載されているが、このコードはアルファベットや記号など一文字逃さずそのまま翻訳せずに読みたいのだが、コードのキーワードや変数などが日本語に訳されてしまっている。

なぜこれが起きるのかというと、Githubのこのドキュメントが正しくマークアップされておらずアクセシビリティが低いからである。Googleの翻訳システムの問題ではない。このドキュメントのHTMLを確認すると一目瞭然で、codeタグがない。codeタグは「プログラムのソースコードやコンピューターのコード」であること意味付けするためのタグなので、プログラムのソースコードにはこのタグを使用するべきだ。

一方、先に上げた画像はDev.toのとある記事のスクリーンショットだ。ソースコードはそのままに、それ以外はきちんと翻訳されていることがわかる。HTMLも確認するときちんとcodeタグが使用されている。

インラインコンテンツ

HTML5以降、HTMLにコンテンツモデルの概念が導入されたが、そのタグがインラインのフレーズとして利用されているのかどうかも機械翻訳では（少なくとも今のGoogle翻訳では）重要らしい。

画像はChrome Platform Statusというページを翻訳したスクリーンショットだ。ナビゲーションメニューの翻訳が残念なことになっている。実際の英語では「All features」「Releases」「Samples」「Stats」という並びになってるが画像では「すべての機能」「が」「サンプルを」「リリース」「（謎の空白）」「統計」という並びに変わっている。しかもそれぞれのリンクはデタラメに紐付いてしまっていてアクセシビリティ以前の問題となってしまっている。

なぜこのようなことになっているのかHTMLを確認する。するとaタグをそのまま他のタグで囲わずにそのまま並べているのがわかる。

<nav>
	<a href="/features">All features</a>
	<a href="/features/schedule">Releases</a>
	<a href="/samples" class="features">Samples</a>
	<paper-menu-button vertical-align="top" horizontal-align="right">
		<a href="javascript:void(0)" class="dropdown-trigger">Stats</a>
		<div class="dropdown-content" hidden="">
			<a href="/metrics/css/popularity" class="metrics">CSS</a>
			<a href="/metrics/feature/popularity" class="metrics">JS/HTML</a>
		</div>
	</paper-menu-button>
</nav>

（Web Componentsらしきものがあって気になるが今回はほっておいて…）つまり翻訳システム側からするとそれぞれで区切られているわけではなく「All features Releases Samples」という一つの文章を翻訳したわけだ（「Stats」は別のタグで囲わているので少し判定が異なっている様子）。

翻訳後のHTMLは次のようになっている。

<nav>
	<a href="/features">
		<font style="vertical-align: inherit;"><font style="vertical-align: inherit;">すべての機能</font></font>
	</a>
	<a href="/features/schedule">
		<font style="vertical-align: inherit;"><font style="vertical-align: inherit;">が</font></font>
	</a>
	<font style="vertical-align: inherit;">
		<a href="/samples" class="features">
			<font style="vertical-align: inherit;">サンプルを</font>
		</a>
		<a href="/features/schedule">
			<font style="vertical-align: inherit;">リリース</font>
		</a>
	</font>
	<a href="/samples" class="features">
		<font style="vertical-align: inherit;"></font>
	</a>
	<paper-menu-button vertical-align="top" horizontal-align="right">
		<a href="javascript:void(0)" class="dropdown-trigger"><font style="vertical-align: inherit;"><font style="vertical-align: inherit;">統計</font></font></a>
		<div class="dropdown-content" hidden=""> <!-- hidden removed by lazy load code. -->
			<a href="/metrics/css/popularity" class="metrics"><font style="vertical-align: inherit;"><font style="vertical-align: inherit;">CSS </font></font></a>
			<a href="/metrics/feature/popularity" class="metrics"><font style="vertical-align: inherit;"><font style="vertical-align: inherit;">JS / HTML</font></font></a>
		</div>
	</paper-menu-button>
</nav>

このリンク付き文章の解析については若干Google翻訳の問題もありそうだけど、これらのリンクをpタグやliタグなどでタグによって区別できるようにマシンリーダビリティを上げていれば問題なく翻訳されたナビゲーションメニューができたはずだ。

気づかないところでアクセシビリティは影響を与えている

こんな些細なセマンティックでも、きちんと使用することに大きな意味がある。機械翻訳に限らず、意外なところでアクセシビリティは活きてくるかもしれない。いろんなユースケースを想定して、限りなく最高にアクセシブルな実装ができるように日々腕力（実装力）を高めていきたい。

※ちなみにnoteに埋め込めるソースコードはcodeで囲われているので、他の言語に訳されてもちゃんと見ることができると思います。