第1回mgnアクセシビリティ公開社内勉強会
https://gyazo.com/b37d5079c3ee5e22e625f60301743a5c
mgnではアクセシビリティ対応を推進すべく勉強中です。
社内勉強会を開催するにあたって、これを公開することでアクセシビリティに興味があって
いまはまだ対応できていないがこれから対応していきたい
対応し始めているがまだ詳しくない
プロジェクトとしてアクセシビリティ対応を進めていきたい
と考えている制作者・ディレクター・プロジェクトマネージャーと意見交換・知識の共有ができる場にしたい、と考えています。
イベントコード#Qa11y_mgn_1stを入力
イベント『第一回 mgnアクセシビリティ公開社内勉強会』を選択
セッション1『音声ブラウザをとおして見るWeb』
https://gyazo.com/139b794818a3327caebdab4520780542
定義
誰もが
年齢、性別
使用環境（デバイスなど）
身体的特徴
ほぼ同じコストで
金銭面だけではない
操作するための時間
作業量・ステップ
精神的負担
通信コスト
ほぼ同じ情報、サービスに
同じタスクを実行
同じ情報を得られる
アクセスできる
視覚障害（今回取り上げる障碍）
全盲
対策
音声出力（スクリーンリーダー）
PC Talker
JAWS
NVDA
Windows ナレーター
iOS VoiceOver
macOSとiPhone, iPadとで違う
TalkBack
点字出力
点字キーボード
画面全体の鳥瞰図が得られないのが欠点
ロービジョン
視力の矯正をしても弱い人達
視野の欠損
対策
大画面と拡大表示
コントラスト調整
適切な画面表示方法の選択
デモ
Eを押すとinput type="text"に移行してフォーカスするモードがある（フォーカスモード）
単純にEを押すためには入力するためのモードがある（ビジュアルモード）
親指シフトモード
Hキー→見出しのレベルを聞くことができる
https://gyazo.com/9a79fc0bbdaa6ff3e887cf0e20dda915
上部の広告見出しと
下部のWeb見出しとで
見分けができる（Googleのマークアップが優秀）
中根さんは価格ドットコムはあんま見ない（説明が足りない・ある程度情報を取り入れて比較する分には便利） 実際に見たページ
見出しモードで見出しを確認
yamanoku.icon 見出しマークアップはよくできている、とのこと
見出しレベルがちゃんと構造立てられているサイトを読み上げると
まず見出しだけ読み上げてから目的の情報が書いてありそうな本文へ行くことができるので助かる
特定のレベルの見出しにジャンプする機能を使うとより便利
価格ドットコムで最安値を探して
楽天はショップによって使いやすい・使いづらいが分かれる
セッション2『デザイナーができるアクセシビリティ対応』
https://gyazo.com/15a15293d50605729e8de85774f1243a
守谷 絵美
2003〜2013年 Web制作会社
ミッション：働くをもっと楽しく、創造的に
「すべての人」に
果たして中根さんのおっしゃられる「全て」をできているか？
Webアクセシビリティ
ガイドラインには以下のグループでまとめられている
知覚
理解
操作
堅牢
うち、知覚・理解・操作がデザイナーのやるべきこと
Webアクセシビリティのうちデザイナーのできること
色
コントラスト
読めるように表す
21 : 1
この比率をおおきくしていけばいくほど見やすい
#f00と#000だと 19.6 : 1
#f00と#fffだと 1.9: 1
ツール
Colour Contrast Analyser
ColorTester
Material.io - Color Tool
Theming Editor
Sketch Color Contrast Analyser
Stark
毎回確認するのは大変…
カラースキームを設定
Contrast Grid
Accessible Color Matrix
色覚障碍対応
赤と緑がやっかい
P型、D型色覚の人は判定ができない
色覚
３色覚（正常）
２色覚（２色型）
１色覚（色盲）
３パターンの色覚とは別に、明暗の合計４覚で物を見ている
色覚障害割合
日本で320万人
軽度障碍：5％
白人：10%
社内で勉強会など使用してもらって初めて分かりづらいという話があがった
検索結果のフォーカスを赤で行なっていたが、見えにくい人がいるということで、黄色に変更された
表示→校正設定→P型・D型色覚
Adobe7くらいからあった機能？
ほかツール
Color Oracle
Chrome エクステンション
Color blindly
Funkify - disability simulator
形
グラフ
色だけで見分けられるだけにしない
https://gyazo.com/4db7a3d10a02a736942c3f8e373314a1
アイコン
SVGデータで拡大・縮小してもみやすいように
アイコンに複数の意味を持たせないようにする
https://gyazo.com/53d3d20e7d38701c9a48c513d5fdde16
このアイコンは家なのか、矢印なのか？
形と意味
inputのフォームは
最近フラットデザインで作られる
ボタンであるか、そうでないか
さわれるか・さわれないか等
表現
デザイナー以外でもできる箇所
レイアウト
拡大
Webフォント
画像のSVG化
言い回しの工夫
アニメーション
マイクロインタラクション
セッション3『アクセシブルなウェブの実装のためにWAI-ARIAを使いこなす』
https://gyazo.com/b83b05a9c0fe7ab5b9273dc2232bd4b2
桝田 草一
マシンリーダビリティ
キーボード操作
実装腕力
アクセシブルな実装は大変
それを大変じゃなくなるような実装力をつける
大変じゃなくなるようにしたい
code:(良くない例だけど)例.html
<header role="banner">
hogehoge
</header>
WAI
Web Accessibility Initiative
ARIA
Accessible Rich Internet Applications
何を補強できるか
役割（role）
状態 (aria-expandedなど)
プロパティ（aria-labelなど）
これらの付与したセマンティクスはどのように支援技術が必要なユーザに伝わるか
アクセシビリティAPI
ブラウザがレンダリングしているコンテンツをAPIのオブジェクトに変換して提供する
リンクかボタンかそれ以外か
遷移と実行
フォーカス可能
<h1> <section>
文書構造
画面の領域分割
適切なマークアップができているとラベリングができる
共通言語ができる
<table> <th> <td>
列、行の関係性をしっかりわかるようにする
<input> <label>
code:good.html
<label>
会社名
<input type="text" name="company">
</label>
datalist
Safariは未対応
alt, title属性
tabindex属性
キーボード操作の制御
0か-1を使用する
1以上にしない
視覚的なものとキーボードの判定がごちゃごちゃになる
まずはHTMLの仕様書を読みましょう！
HTML Living Standard
考え方
ホスト言語のセマンティクスを補強
HTMLで表現できないものを表現する
ネイティブ要素が使えない時
構造上、セマンティクスを上書きする時
HTMLで表現できないものを表現する
HTMLにないrole
よく使うもの
tab
alert
ライブリージョン、要素内の変化を監視
aria-label
フォームのアラートをリアルタイム報告
オフラインになったときに検知
dialog
search
ステート、プロパティ
頻出（aria-*）
label
expanded
hidden
controls
current
describedby
live
<h7>というものはないが
<div role="heading" lavel="7">という方法もある
ブラウザごとで提供されていない機能を提供する時
input type="datetime"とか
困った時みるとよいもの
支援技術で検証
質疑応答コーナー
中根 雅文
守谷 絵美
桝田 草一
https://gyazo.com/9259bcb064853a8602d3ee389a34d3ac
IA/UXデザイナー・アクセシビリティエバンジェリスト
yamanoku.iconフォーカスをそのままにしておくとデフォルトでOSに準拠したアウトラインなどがでるが、あれを毛嫌いするデザイナーがおり「outline: none」を強制してくるのですが、どういうアプローチでアウトラインを無くすこと自体を回避できるかアドバイスが欲しい
桝田
かっこいいアウトラインをデザインしてくれ
マウスの操作のときは出さない（妥協案）
守谷
タブで遷移して使ってみてもらう
自分がどこにいるか分からない
ダサいならその代替デザインを出して欲しい
工数が足りない場合はデフォルトでもいい
ヘディングタグが『h1>h2>h3』となっているのがいいのか、セクショニング内はh1から組むのがいいのか、もし「こういうパターンはこうするのがいい」というものなどあったりするのでしょうか？
桝田
セクショニングルートだとしても
h1が最初に決まっていたら次はh2に合わせる、を守る
ページ内の全体のtree構造に合わせていい
中根
桝田さんの言うとおりに実装でよさそう
しばらくはセクショニング要素は無視になるんだろうな
見出しのレベルという意味合いで
記事一覧において、アイキャッチ画像とタイトルが列記されて、一覧されている場合に、アイキャッチにaltは必要でしょうか。 投稿者がaltをつけることがなかなかないので、自動的に同記事のタイトルをaltに入れてるのですが、それだと画像のaltとタイトルとで同じものを読み上げるだけで、返って邪魔なんじゃないかと思っています。
中根
かえって邪魔です
画像に書かれているものがタイトルと違うものは書くべき
アイコン、写真くらいだったら情報あってもいいが、無理に入れず空というのもいい
伊原
alt=""がいいのかそれとも画像要素があることを書くべきか？
意味を持ってないものは空
画像があること自体を知りたい
保存したい
人に伝えたい場合
中根
画像の存在を明らかにするときはあったほうがいい
飾りだったらいらない？
地図の画像alt
印刷して人に聞くこと
画像自体を検索したい
yamanoku.icon中根さんはPCのメイン機はWindowsなのかと思いますが、freeeでの業務用PCはWindowsかMacのどちらをお使いになっていますでしょうか。
中根
理由
日本語変換のとき
しゃべるのがはやい
エディタの種類が豊富
中根さんに質問です。例えば今日のデモのような「何かを検索するとき」に『音声検索』は使いますか？PCを使う時に『音声検索』を使うことはありますか？
中根
手入力したほうが速い
音声だと間違いがある可能性
それを直す手間が発生する
検索のときは音声検索を使う
SSHのターミナルはどのように読み上げられるのでしょうか。
中根
書かれているとおりに出ます
開発は普通にやっている
開発時は点字表示
キャメルケースだと読み上げてもらう時わからないことがある
中根さんが「慣れてくると価格.comの方が便利」と仰っていましたが、表組みの多いコンテンツを見るときに「こんな表組みはイヤだ」というものはどんなものがありますか？ また表組み以外にチャートやグラフといったものについて、サマリーがあるのと、数値を羅列するのとどちらが好ましいでしょうか（両方あるのがベストだとは思いますが）
中根
セル結合が多用はつらい
見て分かりづらいものはそもそもやめろう
セル内にbackground-imageで表現するときはやめろと思う
チャートやグラフ
情報を出す側がどういう意図で出しているか と読み手を一致するようにしているか？
書き手の押しつけになっていないか？
事実を押し曲げることはない
抑制的にやってくれとしかいえない
「受け手の余地」を考えてみる
altは見えない前提だけど見せる必要があるなら出しなさい
画像が見えても見えなくてもわかる情報はキャプション
「楽しそう」とか
財務諸表など、セル結合を使わないと表現できない場合のポイントがありましたら、教えてください。
桝田
列はcolgroup, rowgroup
行はtbodyを複数使うなど
特定のフォーマットの読み方をしっている人に甘えている
中根
読み方を知っている人だけを前提にしてていい
「知らない人はお前の勉強不足」
チャットワークのリブランディングはどの段階でアクセシビリティを考慮しましたか
守谷
段階というか、最初から考慮した
先月末にCI（ロゴのガイドライン等）を変更しました
リニューアルの案（３年前）
リブランディングを引っ張っていった人がアクセシビリティをわかっていた
重要性はわかっているが、優先度が下がってしまう場合は社内でどの様に認識をしてもらって進めていくのが良いでしょうか？重要性が高いが事業を進めていくには開発が優先となるとアクセシビリティ対応が下がってしまうということは起こるし、社内の啓蒙活動はできる（始めているが）実務の部分で始められていないので何かアドバイスが欲しいです
桝田
腕力を鍛える
サイバーエージェントというジムがあります
アクセシビリティに限らずパフォーマンス・セキュリティなどの根本の問題
反対はされないが、優先度は低い
ゲリラ戦
こそこそやる
粛々と啓蒙活動
「最低限それは守ろう」をつくる
通常状態はこれをやろう
守谷
ヤバいになってから対応してまずいのがアクセシビリティ
ただそれが伝わらない
事業会社としてやっていく方向をしっかり定める
啓蒙について
わからない人たちについて合わせてやる
職務に合わせた話をやるのがいい
エンジニア→支援技術
ディレクター→PVや流入など
当事者のプラスのフィードバックがくると嬉しい
中根
重要なのは分かるが、そもそもそういう人たちって居るの？
だったらそういう人が居るというのを目の間に見せる
当事者を実際に雇ってみるのが意外と大きくなる
「こういうところはこうなっているよ」と教えられる
精神的にも分かるようになる
実際に困っている人を焚き付けるようにする
伊原
中根さんが使えないのは仲間としてまずい
そういう近いひとを助けることにもなる
ほかにも色覚障害者はいる
赤文字が黒に見える
赤はマイナス、黒はプラスを付与する
0か1かで大きく変わる
『受託案件におけるアクセシビリティ』を「チーム」としてどのように進めていけばいいのかわかりません。実例などはありますか？（差し支えない範囲で
桝田
受託はクライアントがいるかどうか
対価をとるにはどうすればいいか？
まずは標準品質を保つ
既存の人に提案するのは難しい
「アクセシビリティをやる」ことを宣言していく
そうするとそれに必要なお客さんが付いてくる
差別化要因となる
伊原
対応した対価の記事はない
少しでも実績をつくっていく
それを紹介することはできる