マクドナルドの謝罪における不完全さ

2015年1月21日 著

（ [ 2015-01-22 追記 ] 以下の文章で取り上げている実装は、既にマクドナルドのPC版サイトトップページからは消えて無くなっています（代わりにテキストで謝罪文を読めるページへのリンクがイメージマップで設けられました）。area 要素に alt 属性が無い、という点において好ましくない実装のままではあるのですが。）

何やらマクドナルドのwebサイトのトップページのお詫びとお知らせの文が画像だけで文字情報が無いとかでdisられており、それはつまりWebアクセシビリティ的に言及せざるを得ない事案かも、ということで早速HTMLソースを確認しようと思ったんですね。その時はちょうど地下鉄に乗っており、iPhoneを使っていたわけで、モバイルサイト（http://sp.mdj.jp/）のトップページでソースを確認したのです（ソースの確認にはThe Snoopy bookmarkletを使用）。

すると、当該画像のところには物凄く長くて、かつ杓子定規に文字情報を記述しているがゆえに文脈的に不自然さを感じるところはあるにせよ、相応の代替テキストが記述されており、アクセシビリティ的に非常にまずいという状況にはない（その画像の実装に関しては）。はて？と思っていたところ、どうやらPCサイトでは実装が違うらしい、ということを@kubosho_さんから教えていただきました。なるほど、PCサイトでは本稿執筆時点において当該画像は

<p class="pickup"><img src="http://img.mcdonalds.co.jp/index/graphic/image_01.jpg" alt="" border="0" usemap="#Map">
	<map name="Map">
		<area shape="rect" coords="253,740,590,760" href="/news/150114b.html" target="_blank">
		<!--area shape="rect" coords="188,263,971,475" href="/campaign/curlyfry/index.html">
		<area shape="rect" coords="188,483,972,564" href="/news/150107.html" target="_blank"-->
	</map>
</p>

みたいに実装されています（このPCサイトのトップページ、モバイルサイトに対しlink要素でリンクしているところでmedia属性値にhandheldを指定していたり、viewport metaで幅1000pxを指定している点など個人的に興味深いけれど脱線するので敢えてスルーしておく）。どのような事情なり背景があってのことか知りませんが、これでは確かにdisられても仕方ないかなと。なにせこの状態では、画像に掲載されている文面がスクリーンリーダーなどの音声読み上げ環境でPCサイトにアクセスするユーザー、主には視覚障害者の方々には一切伝わらないわけで、そういうユーザーには謝罪をしている事実に気づかれすらしない可能性が高い。つまりこの状況では、モバイルサイトのユーザーにはちゃんと謝罪しているけれど、PCサイトのユーザーに対する謝罪は不完全と言わざるを得ません。

この手の文面をいかにもやっつけ仕事的に、適切な代替テキストを伴わない画像でもって実装するケースというのは昔から見かけますけど、いったい何故なのでしょうか。本当かどうか知りませんが、それがSEO上の理由というような話を聞きかじった記憶はありますが......1分1秒を争って掲載すべき事情があったとか、一字の誤りもなく掲載するためだとか、この手の謝罪文を掲載するためのモジュールなりコンポーネントを用意していなかったので止むを得ず、などと理由を推測することはできても、どれも今ひとつ説得力に欠けます。そして今回のように、「モバイルサイトでは」ちゃんと代替テキストが提供されているという不完全さに至っては、謎が深まるばかり。

ちなみに申し添えますが、僕、朝マック好きなんです。なので、異物混入は残念だけれど、正すべきは正し、これからも美味しい朝マックを提供し続けて欲しい。それだけに、今回の謝罪にみられる不完全さというのは、たまたまWeb業界にいてHTMLを多少なりとも知っている立場だからこそ気づけたこととはいえ、とても残念です。近日中に、PCサイトでも代替テキストが提供されるよう改善していただきたいですし、このような残念な実装が早く世の中から消えて無くなって欲しいと思いますし、そうなるためにも僕はWebアクセシビリティの大切さを叫び続けなければならない。今夜のポエムは以上です。