2018年7月1日にD2D アクセシビリティ勉強会 2018年・夏がJUSO Coworkingで開催されました。
今回の勉強会は「子連れOKな勉強会にしたいと考えています。」とのことでお子様連れの参加者の方々もいらっしゃりワイワイ柔らかい雰囲気となりました。
今回は私がくたびれていたのでw「アクセシビリティの祭典 2018」で今回のイベントの宣伝はしたものの、当日はイチ参加者として勉強しておりました。
Bootstrap4から読み解くアクセシブルかつレスポンシブなコーディング
さらにアクセシビリティに配慮されたBootstrap4のコードを読み解きながらアクセシビリティを読み解くセッション。
Bootstrapの用意されたコンポーネントを使えば、アクセシブルなサイトを手軽に作ることができる！のか？
Bootstrap4のコードを実際に見た印象では、WAI-ARIAの属性がしっかり入ってて「おぉここまでしっかり入れてくれていると自分で調べて入れる必要がないのでとても楽なのでは？」と感じました。
ただ…じゃあコピペしてそのまんま使えるのか？というとやっぱりWAI-ARIAの属性の中身を変更する必要もあるし、IDと紐付けられる属性はチャンとIDに合わせてあげる必要があるので、最低限の知識をもって対応する必要があるなと。
当たり前ですが…
例えば～パンくずリスト内にあるaria-label=”breadcrumb”は、日本人に分かりやすいように”breadcrumb”を”パンくずリスト”と変更するとか。
IDと関連付けされてコンテンツの説明を付け足すことができるaria-labelledbyなども、参照先のIDがあっているのかは確認の必要があります。
そしてカルーセル問題…
Bootstrap4のカルーセルはキーボード操作には対応しているけど、このままじゃあチョットという話。
自動的に5秒より継続する動きのあるコンテンツは、その他のコンテンツと平行して表示される場合、動く要素をユーザーがとめることができる必要がアリ。
動く要素というのに人間は自然と反応してしまって注意・意識がそれてしまうのを防ぐためです。
Bootstrap4のカルーセルの場合、カルーセル上にマウスを重ねるとスライドショーは停止されます。
けど、マウスをカルーセルに重ねて停止したところで、他の操作ができない…それが問題。
達成基準に対応するなら停止ボタンをつけるべし。。。
デフォルトカラーもそのまま使っちゃうと4.5:1のコントラストがたりないパーツがあるので、気をつけよう！
またページネーションについては、やりすぎ感がある…との話や、そこはaタグでrole=”button”じゃなくてbuttonのタグを使ってほしいわーなどダメだしもチョイチョイありましたが、絶賛、更新されているようなので、今後に期待です。
質問にあった、多言語サイトの場合のWAI-ARIA属性はどうなる？ですが、変数を使ってCMSで制御できればベストだけど、現状厳しいなら日本人が分かる程度の英語にしては？ということでした。
なので、出来るならlabeldbyでコンテンツに表示されたテキストを参照するのがベターという話もありました。
スマホで手軽に読み上げ機能を試してみよう！
VoiceOverとTalkBackの簡単マニュアルが配られました。
マニュアルを見ながら実際にいろんなサイトを聞いてみると、いろんな気づきがあるものですね。
まずは、早すぎて何言ってるかわからないので私はかなり低速で聞いていましたw。
ヤフーニュースは記事の一覧にいくまでに時間がかかりすぎる～という意見から、W杯（ダブリューさかずき）と読み上げられることの違和感…でも情報としては間違ってはいないので、過剰な親切心は不要とのこと。
アクセシブルなコーディングに便利なツールを持ち寄り紹介しよう！
・Web Developerツール
私はFirefoxのアドオンで使っていますが、画面を見ながら画像altの確認が出来るのが超便利です。
・WAVE
みるくさんからのおすすめツール。早速これもFFのアドオンに追加しました。
英語ですが、画面になんのタグで組まれているのかが表示されるので、これもページの確認するのにいいかも！
サイドにアクセシビリティに関する細かい情報も表示されます。
さいごに
アクセシビリティのレベルの説明があったときに「簡単なことから広くやっていく。」という話がありました。
狭い範囲でAAAを目指すくらいならAAの範囲をひろげたほうがいいし、AAを目指すならまずはAの範囲をひろげてみようというイメージ。
私も、アクセシビリティの勉強会はいろいろ参加していますが、バリバリやってる感じではありませんw。
スイマセン…でも出来る範囲からやろうと思っているし、時間があったらaltを見直してみようとか、手直し入れてみようとかはあります。
なので、大きな目標よりも小さいことからやってね～と言われるとちょっとホッとするというか、安心して地味に頑張ろうって思います。
(*・`д・)
今回のイベントは開催準備をまるで手伝えなくてすいませんでしたが、とても楽しめましたw。
@HissyNC、@SawadaStdDesign、@milk54、ありがとうございましたー