【レポート】Frontrend Vol.9 - 春の新人歓迎マークアップ/アクセシビリティのキホンに参加してきました。

f:id:sitk:20170524224457p:plain

https://frontrend.connpass.com/event/53985/

サイバーエージェントが主宰の勉強会。サイバーエージェントはイケイケな人が多いのかなと言うイメージでしたが、そんなことはなかった。みんな真面目なエンジニアでしたｗイメージだけでお話したらだめですね。アクセシビリティに対しても実直に取り組んでおります。そのあたりは、見習わないと。。。ということで、振り返りです。

継続的にアクセシビリティを高めるために ~ まずは無理なく基本を押さえる ~
マークアップの最適解を見つけ出す方法
アウトラインチョットデキル
動画配信もあります

継続的にアクセシビリティを高めるために ~ まずは無理なく基本を押さえる ~

masup.net

サイバーエージェントのアクセシビリティおじさんこと、ますぴー(@masuP9) さんによる講演。Freshというサービスに関わっています。その、Freshでの取り組みのご紹介です。

大事なポイントとして、下記2点を挙げてました。

まずはできるところから
みんなでやる

まずはできるところから

現状を把握する（WCAG / 日本語訳）
altの確認とキーボード操作ができるか（知覚可能と操作可能の基本）
適宜、WAI-ARIA（日本語訳）を使う

みんなでやる

ガイドラインの作成/展開
内容としては、「指針、実装方法と解説、テスト方法」を記載
WCAGをそのまま使わない理由は、実際に使われるガイドラインにしたいから
非技術者でも理解できる内容
無理な項目を入れない
サービス特性に合わせたガイドラインにしたい
管理画面はATAG2.0を参考にしたい
ドキュメントは書くだけではだめ
関係者を巻き込む
自分事と捉えてもらうことが大事

雑感

まずはできることからやっていくのと、まわりを巻き込んでいくことが大事。うるさいくらい言わないとまわりも振り向いてくれないんだなということは、自分の経験上よくわかります。ますぴー(@masuP9) さんは、サイバーエージェントのアクセシビリティおじさんとして精力的に活動しています。講演の中でも自己ブランディングが大事ということを話してましたが、確かにそう思います。まわりから「アクセシビリティおじさん」と認識されることが、啓蒙活動するにあたっての第一歩なのかもしれません。そこから、まわりをどんどん巻き込んでいく。

実際の案件で、アクセシビリティ対応が要件に入ってるのは、そんなに多くはないですが、当たり前にできることを当たり前にしておけば、必要最低限の「アクセシビリティ」は担保されます。まずは、そこの認識を社内で持ってもらえれば、「アクセシビリティは特別なもの」ではない、ということが理解してもらえるはず。

「アクセシビリティ」は、エンジニアだけが意識しておけばいいというものでもありません。デザイナーであれば、コントラスト比やフォントサイズなど、考えるべき項目はたくさんあります。ディレクターも、ワイヤーフレーム書く時に、JSで動く箇所とか、むやみに動かしたりしないとか、UIの検討とか、考えるべき項目はたくさんあります。

いずれも、ひとりで推し進めていくのは無理があります。まずはチームで、そこから波及して、徐々に社内に浸透させていかなければなりません。まずは、できることからやっていこう。

マークアップの最適解を見つけ出す方法

speakerdeck.com

森田かすみ(@KasumiMorita) さんによる講演。時間の関係で、途中退席。時間がなかったので、気になったポイントを箇条書きで残しておきます。

マークアップに正解はない
マークアップすることは、人と機械をつなぐ翻訳する作業のこと
まずはできるところから

マークアップに関しては、他人のコードが見れるので勉強し放題！僕が良く使う「脳内マークアップ」という言葉。頭の中で、マークアップしていくという、なんとも変態な作業です。以前、森田かすみ(@KasumiMorita) さんが主宰していた「名古屋マークアップ勉強会」でもお話させていただきました。他人のコードを見て、自分ならこう組むのにな〜とか、こんな命名規則で作ってるのか〜とか、新たな発見がでてきます。自分のコードを見られるのは恥ずかしいですがｗ他人のコードを見るのは楽しいです。

「脳内マークアップのススメ」も、ご参考まで。 speakerdeck.com