2014年12月14日日曜日の14時から開催された第3回 D2D アクセシビリティ勉強会 で今回勉強する内容の説明と進行を担当しました。今回のメインは、第15回宝塚映画祭のサイトのトップページがJIS 8341-3:2010の等級Aに準拠しているかどうかを試験するという事でした。

グループに分かれてサイトをチェック！

私と@SawadaStdDesignさんは模範解答を作るべく事前に試験を済ましていたので2人を除いた参加者の皆さんに3グループに分かれてもらい(1グループ3名)、 第15回宝塚映画祭のトップページがJIS X 8341-3:2010の等級Aに準拠しているかどうか試験をしてもらいました。

試験時間は1時間。1時間ではすべての項目をチェックするのは不可能なので、 各グループ、下記の分担でチェックしてもらいました。

• グループAは、7.1.1.1から7.1.2.3まで。
• グループBは、7.1.3.1から7.2.1.2まで。
• グループCは、7.2.2.1から7.4.1.2まで。

試験の手順とチェックシート(WAICのウェブアクセシビリティの達成等級：Aの実装チェックリスト例を使用させていただきました)の記入方法の説明をした後、依存するウェブコンテンツ技術は、 HTML5, CSS 2.1 及び CSS3, JavaScriptになる事も伝え、 試験終了後にグループ発表をしてもらうので、まず グループ内で発表者兼リーダー1人と試験結果をチェックシートに記入してもらう書記1人を決めてもらい、その後 試験に臨んでもらいました。

3グループとも割り当てられたチェックを1時間では終えられなかったので、15分間時間を延ばし1時間15分でなんとか試験を終える事が出来ました。

皆さん真剣に作業されていたので、私が少し話しかけようと思っても入る余地なんてないくらいの雰囲気で、 結果をどう判断するかグループ内で話し合われており、適合か不適合か2つに1つを判断するのが難しいと頭を抱えながら結果を出されていました。

試験を行っている参加者の皆さんを見ていて非常に嬉しかった事がありました。それは、第2回 D2D アクセシビリティ勉強会で短く熱く語ったり長く縛ったり。で勉強した事を皆さん楽々とこなされていた事です！WCAG2.0実装方法集と解説書のページを迷うことなく行き来して調べたり確認されたりされていました。これこそシリーズものの勉強会の良さだと痛感しました。

グループ発表で情報を共有

1グループ15分間で試験結果と感想等発表してもらいました。

グループAの発表内容

• どのツールを使うか意見が分かれたが、Firefoxの"Web Developerツール"を使用した。
• 7.1.1.1のリンクの説明が正確に出来ているかどうかのところでは「詳細を見る」だけになっている箇所があり、それだけでは説明として過不足なので不適合にした。
• 結構ちゃんと出来ているなぁと思った。
• スライドの画像が映画のタイトルだけになっていたので情報として万人にわかるように「映画タイトル：蝶々夫人」のようにした方が良い。
• 気付かなかった事として、ページ中央部「今年のテーマは「100年」です」の下にある外側の画像がCSSで設定されているという事がわからなかった。

グループBの発表内容

• チェックシートに書いてある文章の意味がよくわからない。
• ちゃんとコーディングされているかどうか問われる事が多かった。
• 見出しをちゃんと整理した方が良い。
• 7.1.3.3の「感覚的にだけ伝える」というのが具体的にどういう事なのかわからなかった。

グル－プCの発表内容

• 動きを止める物がなかった。
• 雪も動いている物なので止めるボタンがないとだめ。
• 7.2.4.4のリンクの目的が明確になっているかどうかのところでは、「詳細を見る」だけになっている箇所があるが上にある見出しと合わせればリンクの目的が明確になるので適合にした。

発表中になるのですが、間違った判断をされている箇所等は、私と@SawadaStdDesignさんで逐一正しい結果と判断理由を説明させてもらいました。

グループBの発表で「単語の文字間に空白があった」と報告されたので、どこにその箇所があるか聞いてみたところ、 見つけられた箇所は単語間ではなかったのですが「ここまで細かくチェックされたとは！」とそのチェック力に脱帽しました。

総括は勉強になるね

私と@SawadaStdDesignさんで作成した模範解答を見ていただきながら@SawadaStdDesignさんに試験結果で重要な箇所の説明を行っていただきました。

参加者の皆さん@SawadaStdDesignさんの説明を聞きながら「そうかぁ。なるほど。勉強になるなぁ。」と言いながらメモを取られており、 だいたい1人1つ以上は、「それは知らなかった」という事があったようで良い話が聞けたと思ってもらえたのではないかと思ってます。

ただ話を聞いているだけじゃなく、実際に手を動かしてもらっているので今回の勉強会で知った事覚えた事は忘れずに自分のものにしてもらえるだろうとも思ってます。

今回の勉強会でツイートされたものをまとめたのものはこちらです。参加者の方々の生の声もチェックしてくださいね！

結果を書くのが遅くなりましたが、今回チェックした「第15回宝塚映画祭」サイトのJIS X 8341-3:2010 等級Aの試験結果は、不適合箇所があったので一部準拠という結果になりました。が、そんなに難しい修正はなく、ここを押さえておけばすぐに等級Aに準拠出来るレベルだったと思います。

後、勉強会の最後で話題になったのが、PC-Talkerのナビゲーションスキップの動作がおかしいという件です。PC-Talkerの動作がおかしいからこの実装は実用的ではないのでは？という意見をもらったのですが、 私が検証した時には正常な動きをしていたので「PC-Talkerのバージョンの違いでそういう事が起こっているのではないか」と伝えたのですが、気になって家に帰ってから再検証し直したところ、 やはり第15回宝塚映画祭のサイトのナビゲーションスキップはちゃんと飛び先に移動した後、Tabキーで移動出来ました。(皆さんに言った事が間違ってなくてホッとしました)
が、もう1つくらい検証した方が良いと思い、このサイトの動作も確認したところ同じく問題なく動作し飛び先からもTabキーで移動出来ました。 ※私の検証した環境は、Win7 PC-Talker7 64bit version2.13 β5 Firefox34.0.5 IE9になります。

しかし、@SawadaStdDesignさんが勉強会中に確認してくださったWAICのアクセシビリティ・サポーテッド（AS）情報の アクセシビリティ・サポーテッド（AS）情報：G124-1と アクセシビリティ・サポーテッド（AS）情報：G124-2のテストファイルを 上記と同じように検証した結果、WAICで検証された結果と同じ動作(飛び先からはCtrl+↓で移動。Tabキーで移動すると「メインコンテンツへスキップ」に戻ってしまう) でした。正確に移動するページ(第15回宝塚映画祭のサイトとこのサイト)としないページ(WAICのテストページ)のマークアップの違いをなくして再度検証してみましたが、WAICのテストページの動作は同じで (飛び先からはCtrl+↓で移動。Tabキーで移動すると「メインコンテンツへスキップ」に戻ってしまう)正確な動作はしてくれませんでした。

正確な動作をしない場合の原因がどこにあるのかは不明なのですが、どちらにしてもブロックをスキップして移動出来なくはないので今のところこの実装は有効であると判断しています。 (原因をご存じのかたがいらっしゃいましたら教えてください)

模範解答の試験結果と参加者の皆さんが作成した試験結果

先ほども書きましたように今回試験した「第15回宝塚映画祭」サイトは、JIS X 8341-3:2010 等級Aの試験結果は不適合箇所があり、残念ながら等級Aには準拠出来ていなかったので、 試験結果を公表するのは難しいかと思っていたのですが、 「第15回宝塚映画祭」サイトの作成及び管理をされている@nipper_onsideさんとディレクターのかたから試験結果を公表しても良いという返事をいただいた上、 「その結果を見せてもらって私達も勉強させてもらいますし、また勉強会には参加出来なかったけれどサイトと試験結果を見て「なるほど、こういうところがダメなんだね」という感じで、少しでも参考になればいいと思ってます。」と言っていただきました。「なんて素晴らしい方達なんだ！私も見習わなければいけない。」と頭が下がる思いでした。

という訳で、私と@SawadaStdDesignさんで作成した模範解答の試験結果1(7.1.1.1から7.2.4.1)がこちらになり(縦に長すぎるので2分割しています)、同じく模範解答の試験結果2(7.2.4.2から7.4.1.2)がこちらになります。そして、グループAが作成した試験結果(7.1.1.1から7.1.2.3)がこちらになり、グループBが作成した試験結果(7.1.3.1から7.2.1.2)がこちらなり、グループCが作成した試験結果(7.2.2.1から7.4.1.2)がこちらになります。

尚、参加者の皆さんが作成されたもので間違った判断をされている箇所は発表の際指摘させてもらってますが、試験結果の修正はされてない状態の物になります。

まとめ

今回も「アクセシビリティ＝難しい」というイメージが変わるように、そしてD2Dの勉強会で学んだ事を実務に生かしていただき1つでもアクセシブルなサイトが増える様にと色々考え行った勉強会でしたが、 「時間が長すぎたから集中切れた」という意見をもらい、説明と進行をもっとスムーズに行わなければいけないと感じ、私のしゃべりと仕切りがもっとうまくならなければいけないと反省しました。 次の回までに上達するよう普段からいつも以上にしゃべりまくりますので関係者の皆さん覚悟しててください(笑)

次回の内容は

アクセシブルなナビゲーションとスライドショーを作成する予定です。次回もわくわくするような勉強会にしたいと思っているので皆様お楽しみに！