第5回 D2D アクセシビリティ勉強会

みるく/milk @milk54

@twit_natasha どういたしまして～

みるく/milk @milk54

@twit_natasha 気になったから今確認してみたらPC-Talkerではplaceholderの値はフォーカスした時にちゃんと読み上げたわ！後、areaじゃなくてaria-hoge属性ね。

北山ともこ @tomochiisan

doorkeeper.jpへ行って来ましちた！チームでデザインをする機会はなかったので楽しかったです。母が子どもを預りにくい環境になったので、次回行けるか分からないですが、行けそうな時に行きます。楽しい時間をありがとうございました♪#d2draft

みるく/milk @milk54

@SawadaStdDesign 今日も先生に頼りっきりで(汗)大変お世話になりました& ありがとうございました！何人かの人に終わってから感想聞きましたが、面白かったって言ってもらえました♪#d2draft

mojamojayo @mojamojayo

今日はこれへ行ってきました。 珍しいデザイン系ハンズオンセミナー。学びつつ2時間でデザインというヒリヒリ感も、京都というアウェー環境も心地よくって、いつもの学んだ"つもり"からひとつ脱却できそうで大満足な帰路です。d2draft.doorkeeper.jp/events/22014 #d2draft

SAWADA STANDARD DESIGN @SawadaStdDesign

#d2draft 今回はいろいろいろいろな不安がモロに出てしまって、自分の勉強不足を痛感しましたし、準備不足でご迷惑もおかけしましたが、皆さんのご協力で何とか乗り切れました（?）。ありがとござました！

▲ @misumi_takuma

勉強なる #d2draft

SAWADA STANDARD DESIGN @SawadaStdDesign

#d2draft もくもく会状態 pic.twitter.com/kLNhB1J67O

拡大

菱川拓郎 💉💉 @HissyNC

アクセシビリティはやはりビジュアルデザインの段階から考えておかないといけないと言うことが @SawadaStdDesign 先生のスライドで分かりました #d2draft #a11y

つぶやきナターシャ @twit_natasha

placeholderやareaは読み上げないブラウザが多い。areaは対応していく方向。#d2draft

菱川拓郎 💉💉 @HissyNC

その他、フォントフェイスによる可読性の違いも考慮すると良い。見出しのデザインは、文書構造が理解できるように（これ多い。h2よりh3の方が重く見えるデザインとか） #d2draft #a11y

菱川拓郎 💉💉 @HissyNC

フォーカスインジケータは消さない（消す人いるんだ…）。一貫した識別性を提供する #d2draft #a11y

つぶやきナターシャ @twit_natasha

フォーカスインジケーターをCSSで消すとマウスが使えないユーザーが困る。#d2draft

菱川拓郎 💉💉 @HissyNC

等級AA以上に対応するビジュアルデザインとは。テキストのコントラスト4.5:1以上。等級AAが必要なくても、目標値として意識したい。最近多い背景のグラデーションは、端でコントラスト比が下がりやすい #d2draft #a11y

菱川拓郎 💉💉 @HissyNC

フォームのデザイン。データ形式や入力例を提供する。必須項目の説明はテキストフィールドより前に出す。入力欄とラベルの関係が分かるように配置する。離れていると弱視のユーザーに問題。 #d2draft #a11y

菱川拓郎 💉💉 @HissyNC

自動的に動き、点滅、スクロールする、他のコンテンツと並行して表示される要素は、一時停止可能にする。点滅はそもそも避ける（所謂ポ○モンショック） #d2draft #a11y

つぶやきナターシャ @twit_natasha

JISシングルAに則ったデザイン：色やフォントの違いで情報を伝えている場合、マークアップもセマンティックに(emやstrong)して。#d2draft

菱川拓郎 💉💉 @HissyNC

等級Aの達成基準を満たすビジュアルデザインとは。フォントの種類や形状、色などの感覚的な特徴だけで情報を伝えない。テキストでも情報を伝える。 #d2draft #a11y

みるく/milk @milk54

只今先生がデザイン作成について説明中。みんな食い入るように聞かれてます！ #d2draft

菱川拓郎 💉💉 @HissyNC

ビジュアルデザインに於いても「知覚可能」「操作可能」「理解可能」の原則は変わらない。アフォーダンスの延長で要素の意味を伝えるデザインを考える。 #d2draft #a11y

ヨチゴリー @yotigory

チームごとのワイヤー発表会。ここからすでにみんなのチームカラーがでてる #d2draft

るっちん @luchino__

さりげに「いつまで経っても たどり着けねぇぜ」ｷﾀ━(ﾟ∀ﾟ)━! #d2draft

菱川拓郎 💉💉 @HissyNC

等級AAをカバーするなら。文字を拡大しても破綻しないレイアウトにする。一貫したナビゲーション、ラベル、代替テキストにする。 #d2draft #a11y

菱川拓郎 💉💉 @HissyNC

JIS X 8341-3:2010 達成等級Aの 達成基準を満たすデザインとは、コンテンツを意味のある順序で並べる、ということに尽きる #d2draft #a11y

菱川拓郎 💉💉 @HissyNC

CSSで無理しなくていいように、基本はシングルカラムで考える。晴眼者が見ても文書構造が理解できないレイアウトは避ける #d2draft #a11y