nishimotzの日記

ふつう＝ユニバーサルでアクセシブル

Written by

nishimotz

in

この記事は ふつうの広島 Advent Calendar 2015 の8日目の記事です。
昨日はkamera25さんの記事でした。
冒頭から脱線しますが「普通の人にはない技術の持ち主」といえば「職人」ですね。
今日から「職人」がテーマのイベントが広島で開催されますよ。
広島職人博覧会
12月8日（火曜）から14日（月曜）まで
旧日本銀行広島支店（広島市中区袋町）

ふつうとはなんだろう

普通じゃない人にとって「普通に生きろ」という言葉は「苦痛」の一歩手前だったりするかも知れません。
「普通の人」＝「健常者」「定型発達の人」でしょうか？
「普通の人」＝「リモートワークじゃない人」でしょうか？
もっといろんな「普通」があっていいような気がするので、グーグル先生に訊いてみました。
普＝「あまねく」「広く」
通＝「通用する」
「あまねく」は「ユニバーサル」、「通用」は「アクセス」じゃないですか。
「ふつう」＝「ユニバーサル」で「アクセシブル」ということですね！！

イベントの「ふつう」

「ふつうの広島」＝「どんな人でも学んだり働いたり活動したりできる広島」にしましょう。
そういうつもりで2015年に私が取り組んだのが Python のイベント、PyCon mini Hiroshima 2015 でした。
開催直前の告知と終了後の報告は PyCon JP のブログに書いたので、下記をどうぞ。
PyCon mini Hiroshima 2015 を開催します！
PyCon mini Hiroshima 2015 を開催しました！
報告の中でも書いたことですが、カジュアルな勉強会は行動力のある人たちに任せて、私は「アクセシビリティを切り口に質を保障できるイベント」を、今後も続けていくためにお手伝いできたらいいなあと思っています。

ソフトウェアの「ふつう」

こないだ Web アクセシビリティのアドベントカレンダーに寄稿した NVDA 日本語版の現状の記事 ですが、途中から支離滅裂で勢いだけの駄文になってしまったので、もうすこし具体的に「アクセシビリティから考える本質とか品質とか」について書いてみます。
NVDA の UI ウィジェットに wxPython が使われていることは PyCon mini でお話しましたが、おそらく NVDA の開発者たちはこのツールキット選びをかなり慎重に行ったはずです。
wxPython のさらに土台になっている wxWidgets のレベルで、すでに Microsoft のアクセシビリティ API に対応する作り込みが行われていることが、ちゃんとドキュメントになっています。
マルチプラットフォーム開発のための UI ツールキットはいろいろありますが、それぞれのプラットフォームのネイティブなアクセシビリティ API に対応した実装が施されているものはなかなかありません。
画面を Windows っぽく描画したり Mac っぽく描画したりすることだけできても、それが「ボタン」なのか「テキストフィールド」なのか、といった情報を OS のアクセシビリティ API に正しく渡すことができないフレームワークは山ほどあるのです。。
モバイル開発についてはどうでしょうか。
マルチプラットフォームといえば HTML で UI を作る「いわゆる PhoneGap」アプリを真っ先に思いつきます。
あまりよいユーザー体験を実現できない、ということで、ここ数年は敬遠されてきたような印象ですが、最近あらためて調べてみたら、Apache Cordova と Angular.js という組み合わせの新しいツールがいくつか登場していました。
ここでは Ionic Framework について最近私が調べたことをちょっと紹介しておきます。
この Ionic フレームワークは単なるライブラリではなくコマンドラインインタフェースのツールが用意されています。
ionic start コマンドで生成されるひな形の「タブ UI」アプリを Xcode でビルドして iPad にデプロイしてみたら、かなり VoiceOver でちゃんと使える、ということに気づきました。
フォーカスの移動順序にやや不自然なところはあったもののの、多くの要素が理解可能、アクセス可能でした。
Web技術はちゃんと「ユニバーサルにアクセシブル」に向かって進歩してるんですね。。
残念ながら完全に VoiceOver に無視されてしまったのは ion-toggle でした。
調べてみたらこのトグルスイッチの記述方法が他にも見つかったので、いわゆる WAI-ARIA の勉強がてら書き直してみたら、VoiceOver でちゃんと操作できて状態を読み上げられるトグルスイッチになりました。
修正前：

 <ion-view view-title="Account">
   <ion-content>
     <ion-list>
-    <ion-toggle ng-model="settings.enableFriends">
-        Enable Friends
-    </ion-toggle>
     </ion-list>
   </ion-content>
 </ion-view>

 
修正後：

 <ion-view view-title="Account">
   <ion-content>
     <ion-list>
+    <li class="item item-toggle">
+      <span role="label" id="enableFriendsLabel">Enable Friends</span>
+      <label class="toggle">
+        <input type="checkbox" ng-model="settings.enableFriends" />
+        <div class="track">
+          <div tabindex="0" class="handle" aria-labelledby="enableFriendsLabel" role="checkbox" aria-checked="{{ settings.enableFriends }}"></div>
+        </div>
+      </label>
+    </li>
    </ion-list>
   </ion-content>
 </ion-view>

 
role とか aria-checked とかこうやって使うんですね。勉強になりました。
これ Web 標準を使ってアクセシビリティを確保したので、たぶんプラットフォームごとの実装さえちゃんとしていれば「普（ユニバーサル）」に「通（アクセシブル）」なモバイルアプリになるはずですね。。
Ionic のテンプレートは Visual Studio 2015 にも入ってます。
Universal Windows Platform でもいけそうです。
アクセシビリティを「品質」と捉えると、技術を見極めたり、新しいことを勉強したりできますね。
「ふつうの広島」を目指して、開発者向けのアクセシビリティ勉強会をやったらいいですね、と提案しつつ、この記事を締めくくりたいと思います。
以下、参考書：
コーディング Web アクセシビリティ

わかりやすい「WAI-ARIA 1.0」仕様解説書 Kindle版

More posts