第1回 mgnアクセシビリティ公開社内勉強会メモ（後編）

前編はこちら

◾️アジェンダ
＜前編＞　
・音声ブラウザを通してみるウェブ（中根さん）
・ブラウジング操作のデモ（中根さん）
＜後編＞このノートです
・デザイナーができるアクセシビリティ対応（守谷さん）
・アクセシブルなウェブの実装のためにWAI-ARIAを使いこなす（桝田さん）

登壇資料
（画像はコチラから引用しています）

第1回 mgnアクセシビリティ公開社内勉強会 #a11y_mgn を開催いたしました。

『デザイナーができるアクセシビリティ対応』守谷 絵美さん

制作会社からchatwork社のデザイナーへ

■chatwork社のvision
すべての人に、一歩先の働き方を
　　すべての人って‥？→障害の有無、働き方、国籍、宗教・・・

■Webアクセシビリティのガイドライン

Webアクセシビリティの4原則→知覚／理解／操作／堅牢
https://waic.jp/docs/UNDERSTANDING-WCAG20/intro.html

そのうち、デザイナーがメインで担保するのはここ
→知覚、理解、操作

■デザイナーが担保すべきところ
・表現
・色
　- コントラスト
　- 色覚対応
※視覚による知覚のため、全盲の方ではなく、ロービジョン向けの対応

色の組み合わせのコントラスト比を意識する

コントラスト比とは‥色と色の組み合わせ比率

→色と色の組み合わせのコントラスト比が見易さに影響する。

黄色×黒＝コントラスト比率大　…文字が見やすい！
灰×黒＝コントラスト比率小　…文字が見にくい。。
　

見やすい印象がある色の組み合わせ（濃✕淡）でも、
実際はそうでなかったりする

逆に見づらいイメージが有る組み合わせ（濃✕濃）でも、
見やすいこともある

→白✕緑、黒✕緑を見比べてみると、意外と黒✕緑のほうが見やすい。。
→色のコントラスト比の差が大きい方が、見やすいという定義がある

★W3Cガイドラインでは、コントラスト比4.5:1以上が推奨★
https://waic.jp/docs/UNDERSTANDING-WCAG20/visual-audio-contrast-contrast.html

コントラスト比を確認できる便利なツール

＜chrome拡張＞
Colour Contrast Analyser
https://weba11y.jp/tools/cca/

ColorTester
https://alfasado.net/apps/colortester-ja.html

＜サービス＞
Material.io
https://material.io/tools/color/#!/?view.left=0&view.right=0

■カラースキームの設定も便利ツールが
背景色×文字の組み合わせが、
4.5:1 で、の比率を担保できる組み合わせだけをOKとする

contrast grid
https://contrast-grid.eightshapes.com/

※モデレーター伊原さんによる補足ツイ

色覚障害の対応

・色覚障害…いくつか種類がある
　１型（P型）、２型（D型）など
・光の3原色＋明暗で、色の捉え方が異なる
　赤が茶色に見える…など
・色覚障害の方→日本に300万人ぐらい

色覚障がいのタイプ | 「色覚障がい」とは | カラーユニバーサルデザイン | SUSTAINABILITY | TOYO INK 1050+

■chatworkでの事例

■検索結果のハイライト表示
検索結果で、検索クエリを赤太字で強調表示していたが、
色覚障害の方には左のように黒字で見えていた（＝強調のいみなし）
　→ 色覚障害の方の見え方を参考に、
　　赤太字の強調表示ではなく、文字に別の色の背景ベタハイライトを
　　つけることで、色覚障害の方でもわかりやすくなった
　→ 社内の色覚障害のある方「わかりやすくなった！」
　　（もともと色覚障害があるとわかっていなかった、
　　　そんな強調表示をしているとは知らなかった）

色覚障害の見え方をツールで再現してセルフチェック

＜photoshop標準機能＞
表示＞校正設定＞（設定）＞p型、d型
※CS3以前からある機能

＜chrome拡張＞
coler blindly

＜サービス＞
Funkily
https://www.funkify.org/
色覚障害以外のシュミレーションができる
・文字が散らかる障害 など

■形状

形を操作できるのはデザイナーだけ！

■グラフ
・色の違いだけでグラフを作ると、色の違いを知覚できない方にとっては
差がわからない
　→斜線、模様、パターンを使い分けて色の違い以外で差をつける

■アイコン
・画面を拡大してみるユーザーには、
　解像度によって、jpgなどの画像だと拡大すると荒くなる
　→SVGのアイコンを利用する
・矢印アイコン、家アイコン、差がわかりにくいので差をつける

■ボタンやフォームの形状
・デザインの主流がフラットになってきたので、ボタンなのかinputフォームなのかわかりづらいことがある

■そのほか
・画面構成のレイアウト
・拡大に耐える仕様を検討する
・webフォントの利用
・画像のSVG化
・言い回しの工夫
　→ディレクター、プランナーでもできる
・マイクロインタラクション
→表現をプラスすることで、理解ができるようになる
　エンジニアとも相談して実装しよう

アクセシブルなウェブの実装のためにWAI-ARIAを使いこなす（桝田さん）

サイバーエージェントのフロントエンドデベロッパーさん
アクセシビリティエヴァンジェリストでもある

■フロントエンドが担保するアクセシビリティとは
・マシンリーダビリティ
・キーボード操作

（Webアクセシビリティの4原則　知覚／理解／操作／堅牢…
だいたい全部がフロントエンドの守備範囲）

■息を吐くようにアクセシブルな実装をする
・息を吐くように？→実装の腕力が大事。
　初めは困難でも、自分の実力、チームの実力、組織の仕組みを
　段階的に整えていけば、いつの間にかそれが浸透し、大変じゃなくなる

■WAI-ARIAとは
アクセシビリティにおけるマークアップ言語のセマンティクスを補強するためのもの

・要素の役割、状態、プロパティを補強する
　→例えばツリー構造は、晴眼者は明示的に見えるの理解できるけれど、
　　支援技術を使うユーザーに向けて、マシンリーダビリティでも
　　晴眼者と同等に伝わるように役割を補強して実装する必要がある

　→文章だけでできているようなシンプルなドキュメント的サイト
　　では良かったが、Webがアプリ化、動的化、複雑化しているので、
　　HTMLだけでは現在の状態（＝画面上の変化）がわかりにくい
　　視覚だけに頼ったリッチな表示では、支援技術ユーザには理解できない

■WAI-ARIAを使いこなす前に、そもそもHTMLをしっかり書けているか？

■要素選択
・遷移と実装
ユーザーが選択して実行するものは属性を指定してリンク先を示してあげる

・フォーカス可能か？
キーボードでwebを見ているユーザー（四肢の障害、tabキーでリンク先を選択しているユーザなど）でも使いやすいか？
　→リンクかボタンかそれ以外か？
　　http://takenspc.hatenablog.com/entry/2013/10/21/063807

■見出し
・画面構造とラベリング
ウェブアプリケーションの場合でも見出しをつけよう
→例えばWordPressの管理画面でも、見出しによる情報関係がわかるようになっている。逆に見出しがついていないということは画面構造がわかりづらいかも。

→アプリケーションだからといって、無秩序な画面レイアウトになっているわけではないはず

■データの参照構造を示す
テーブル構造も、見出しのレベルや役割を指定して
マシンリーダビリティをあげる

■input / label
→フォーカスしても何を入力するのかわかるようにする
　labelを使用する

■alt/title
→altちゃんと書こう、alt無いと詰む。
→わかりにくい略語もそのままにせず、altはわかりやすく書く（100pt のaltは100point　など）

■Tabindex
・キーボードフォーカスを制御

アクセシビリティの機運

■アクセシビリティを担保するには特別なことが必要か？

→アクセシビリティを担保するにはまずHTMLが第一歩、
　HTMLの仕様を読みましょう。
→それでも足りない時に、wai-ariaを使おう

どういう時に使う？
・HTMLで表現できないものを表現する時

■よく使うrole
Tab / alert / dialog (モーダルとか) / search 「このフォームは検索するためのエリアです」

- Alert
→ajaxでコンテンツをとってきた時の変更を教えてくれる
　（株価、ボタン操作によらない動的なコンテンツの変化とか）
→他のコンテンツを読み上げている時に割り込んでくるので、
　緊急の時に使う（フォームのアラート）

■WAI-ARIAも仕様を見よう
困ったらここを見てキーボードインタラクションや役割を参考にする
　https://www.w3.org/TR/html-aria/

■WAI-ARIAの検証
・ブラウザのアクセシビリティツリーで検証するのがまず手っ取り早い
　検証＞elements>Accessibility で見てみる

・支援技術で検証してみる
無料の読み上げツールを導入して、実際に触ってみる
実装しながらスクリーンリーダーで確認してみる

（この後ライブコーディングもあり、アクセシブルな実装をするときの思考内容や流れが垣間見れてとても参考になりました）

感想２

初めのセッションで当事者目線の気づきを得て、後半は実制作時にデザイン／マークアップフェーズでどうアクセシビリティを担保していくか？という実践的内容だったため、聴講していて点と点が繋がっていくイメージがあり、自分のような初学者にはありがたいお話ばかりでした。

アクセシビリティを意識した配色の基準も、何をガイドラインにしてどう作っていくか？というポイントや便利なツールの存在を知ると、今までの制作内容大丈夫かよ！？！？と胸の内がみるみる不安になりました。。

WAI-ARIAについても、自社のコーディングガイドラインで明確に基準を設けていなかったので、まずはアクセシビリティに関する啓蒙活動、人の巻き込み草の根活動をやっていくことがめちゃくちゃ大事だと思いました。
質疑応答でも、アクセシビリティに対する社内意識の低さ・啓蒙に関する話が多く、現場ではどこも似たような悩みを抱えていましたがまずは社内の第一人者になって、できることから地道にやって腕力を付けていこうと思います。。