ユーメニューは視覚障害者向けに飲食店のメニューを掲載しているサイトです。
ユーメニューの紹介と技術上の工夫とこれから
Web Accessibility Advent Calendar 2017の12月8日を担当させていただきます、有限会社時代工房の柴田と小寺です。
「きけるおしながき umenu（以降「ユーメニュー」）」の紹介と、技術的なメモを書きます。
なお文中、「Docomoのらくらくホン」が度々登場しますが、これはらくらくホンが、スクリーンリーダを搭載したガラケーとして、視覚障害者の利用率が大変高い（高かった）ためです。
まず基本的な紹介から（柴田）
ユーメニューは、視覚障害者向けのサービスです。視覚障害者が飲食店を利用する際、飲食店のメニューを知るためには、以下のいずれかの方法が確保されている必要があります。
- 飲食店が点字のメニューを用意している
- 飲食店のサイトでメニューを表示していてアクセシブルである
- お店のひと、あるいは同伴者に教えてもらう
しかし、点字のメニューを備えている店舗は少なく、飲食店のサイトがバリアフルであることも多々あり、ハードルが高いのが現状です。飲食店のサイトに関して、もうひとつ付け加えると、たとえメニュー（お品書き）のページがアクセシブルでも、お店ごとにサイトの構造が違うため、それなりに苦労しないとお店を見つけられません。
というわけでつくったのがユーメニューでした。このサービス構築に至った経緯のご説明を、自身が全盲視覚障害者で、一緒に開発をした小寺にバトンタッチします。
スクリーンリーダーで読み上げさせたときにわかりやすいレイアウト（小寺）
視覚障害者のウェブアクセシビリティを考えるとき、正しいHTMLタグや属性を用いる、とか、見ればわかるが読み上げない箇所をなくすよう気をつける、とかが重要と言われます。
それらとは、また別の観点として、レイアウトの問題があると思います。
通常は、まずは視覚的なデザインに合わせてレイアウトを行なうと思います。
その結果、読み上げさせるとぎくしゃくしたり、必要な情報にたどり着くためにはキー操作がたくさん必要だったり、今ひとつ、使いやすくないことになりがちです。
そこで、レイアウトで重視するのは、視覚的なデザインではなく、スクリーンリーダーとの相性。
スムーズに読み上げ、スムーズに情報にたどり着けること。
それにより視覚障害者のウェブアクセシビリティのさらなる向上を狙う、という方法が考えられます。
ユーメニューは、そんな方法で作成しました。
当初は、パソコン、ドコモらくらくホンの両方に最適化し、後にそれらに加えて iPhoneなどiOS端末でも使いやすいようにしました。
スクリーンリーダ ファースト（柴田）
スクリーンリーダに偏重したマークアップやコンテンツ作成には賛否あると思いますが、ユーメニューについては、比較的稀有な「スクリーンリーダのユーザのためのサイト」であることから、スクリーンリーダの利便性を最優先しています。
そのうちの一つの事例を紹介します。
以下のような一行があります。
【はいからうどん】 小うどん160円. 並280円. (なか卯の定番はいからうどん。はいからとは「あげ玉」の入ったうどんです)
一番最初はこんなマークアップだったと思います。
<dl> <dt>はいからうどん</dt> <dd>小うどん160円. 並280円. (なか卯の定番はいからうどん。はいからとは「あげ玉」の入ったうどんです)</dd> </dl>
なんとなく気持ちはわかりますよね？
でも、いまはこうです。
【はいからうどん】 小うどん160円. 並280円. (なか卯の定番はいからうどん。はいからとは「あげ玉」の入ったうどんです)<br>
もちろん、
<p>【はいからうどん】 小うどん160円. 並280円. (なか卯の定番はいからうどん。はいからとは「あげ玉」の入ったうどんです)</p>
でも、いいとは思うのですが、いまのところ、一品目ごとにbrで改行しているだけで、商品名とその説明は意味付けのあるマークアップは行なっていません。
文章を見たら、マークアップを考えてしまう「マークアップ脳」からすると、結構ツラいのですが、
<strong>はいからうどん</strong> 小うどん160円. 並280円. (なか卯の定番はいからうどん。はいからとは「あげ玉」の入ったうどんです)<br>
みたいなことをしただけで、当時、らくらくホンの行読み時に「はいからうどん」が、一行として扱われてしまいました。（どうもiPhoneのサファリでも一行として扱われてしまうようです）
実際のスクリーンリーダユーザからのフィードバックでは「一行一品目で金額と説明を知りたい」という要望があり、dlはもちろん商品名をspanで囲うこともNGになってしまいました。pの中のspanなどを一行として扱うかどうかについては、今後の変化もあると思うので、ユーメニューも変わっていくかもしれません。
すこし話が変わりますが、スクリーンリーダの行読みについては、覚えておくと良い挙動があります。html5で許されるようになり、喜んだ人もいると思うのですが、a要素の中にブロック要素を入れることができるようになりました。
以下例をご覧ください。
<a> <h3>foo</h3> <span>bar</span><span>baz</span> <span style="display:block;">foobar</span> </a>
NVDAの例ですが、このhtml片を含んだページを全文読みをすると、ひとつのa要素として扱うのですが、行読みをすると、
リンク foo リンク barbaz リンク foobar
と読み上げます。ポイントはCSSによるdisplay:blockが、それがインライン要素であるかどうかをさておいて、一行として判定されていることかと思います。
一つのリンクではあるものの、行読みをすると、各行がリンクである、という扱いになることは、ある意味当然なのですが、覚えておくと良い挙動かと思います。
ガラケーのアクセスってどれくらい？（柴田）
小寺が書いている通り、ユーメニューは、開始当初はDocomoのらくらくホンをターゲットの主要なものとして捉えて構築していました。時代を経ても、ずっとらくらくホンでの動作確認を続けてきたものの、いったいどれくらいのらくらくホンのアクセスがあるのかを測定できていませんでした。
しかし、最近のアクセス数解析のデファクトスタンダードであるGoogle Analyticsでは、JavaScriptが必要なため、ガラケーのアクセスを測定できませんでした。
アドベントカレンダーに手を上げた時に、GoogleのMeasurement Protocolについて知りました。
これなら、ガラケーのアクセスを測定できると、短い間ですが測定してみました。11月17日から12月6日までのガラケーからのアクセス数は114。全体のおよそ2.6%程度のアクセスがありました。
正直にいうと、わりとあるな、という印象でした。後述する「ユーメニューの今後」を実現したとしても、しばらくガラケー対応は続けていこうと思っています。
ユーメニューの今後（柴田）
いま仲間内で話しているユーメニューの今後は、「パーソナルユーメニュー（仮称）」です。
ユーメニューは、受益者が多い、全国展開しているチェイン店を中心に店舗を登録していますが、「視覚障害のある友人のために、近所の定食屋をユーメニューに載せたい」というような要望に応えることができません。
ので、ユーメニューを自由にユーザ登録できるシステムに変更して、YouTubeの限定公開のような仕組みでメニューを足せるようにできたらと考えています。
一般公開されるユーメニューに関しては、これからも時代工房でメンテナンスすることで情報の品質を保ち、「パーソナルユーメニュー」では、限定的な範囲で利用できる、というわけです。
もうひとつ要望がそれなりにあるのが「季節のメニュー」です。ユーメニューでは、メンテナンスの手の数に限りがあるので、「季節のメニュー」はサポートせず、いわゆる「グランドメニュー（固定的なメニュー）」のみを掲載対象にしています。
でも、やっぱり「季節のメニュー」の情報が欲しいものだというのはよくわかります。この課題については、じつは解決の糸口がありません。んが、ときどき、外食産業の公式の方がユーメニューに情報提供をしてくださることがあるのです。
もしユーメニューをユーザ登録できるようにしたら、そして、外食産業の方がユーメニューをサポートしてくださるなら、「季節のメニュー」の情報も提供できるようになるかもしれません。
というわけで、とりとめのないことを書きましたが、2017年12月8日のアドベントカレンダーでした。明日は、junnamaさんです。
