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

「アクセシブルなサイトはダサイ」というイメージを払拭するデザインをみんなで作り出しましょー!!
インターネット
1
みるく/milk @milk54
@twit_natasha 気になったから今確認してみたらPC-Talkerではplaceholderの値はフォーカスした時にちゃんと読み上げたわ!後、areaじゃなくてaria-hoge属性ね。
北山朋 @tomochiisan
doorkeeper.jpへ行って来ましちた!チームでデザインをする機会はなかったので楽しかったです。母が子どもを預りにくい環境になったので、次回行けるか分からないですが、行けそうな時に行きます。楽しい時間をありがとうございました♪#d2draft
みるく/milk @milk54
@SawadaStdDesign 今日も先生に頼りっきりで(汗)大変お世話になりました& ありがとうございました!何人かの人に終わってから感想聞きましたが、面白かったって言ってもらえました♪#d2draft
宇都宮 頼子 @mojamojayo
今日はこれへ行ってきました。 珍しいデザイン系ハンズオンセミナー。学びつつ2時間でデザインというヒリヒリ感も、京都というアウェー環境も心地よくって、いつもの学んだ"つもり"からひとつ脱却できそうで大満足な帰路です。d2draft.doorkeeper.jp/events/22014 #d2draft
SAWADA STANDARD DESIGN @SawadaStdDesign
#d2draft 今回はいろいろいろいろな不安がモロに出てしまって、自分の勉強不足を痛感しましたし、準備不足でご迷惑もおかけしましたが、皆さんのご協力で何とか乗り切れました(?)。ありがとござました!
Takuro Hishikawa @HissyNC
アクセシビリティはやはりビジュアルデザインの段階から考えておかないといけないと言うことが @SawadaStdDesign 先生のスライドで分かりました #d2draft #a11y
つぶやきナターシャ @twit_natasha
placeholderやareaは読み上げないブラウザが多い。areaは対応していく方向。#d2draft
Takuro Hishikawa @HissyNC
その他、フォントフェイスによる可読性の違いも考慮すると良い。見出しのデザインは、文書構造が理解できるように(これ多い。h2よりh3の方が重く見えるデザインとか) #d2draft #a11y
Takuro Hishikawa @HissyNC
フォーカスインジケータは消さない(消す人いるんだ…)。一貫した識別性を提供する #d2draft #a11y
つぶやきナターシャ @twit_natasha
フォーカスインジケーターをCSSで消すとマウスが使えないユーザーが困る。#d2draft
Takuro Hishikawa @HissyNC
等級AA以上に対応するビジュアルデザインとは。テキストのコントラスト4.5:1以上。等級AAが必要なくても、目標値として意識したい。最近多い背景のグラデーションは、端でコントラスト比が下がりやすい #d2draft #a11y
Takuro Hishikawa @HissyNC
フォームのデザイン。データ形式や入力例を提供する。必須項目の説明はテキストフィールドより前に出す。入力欄とラベルの関係が分かるように配置する。離れていると弱視のユーザーに問題。 #d2draft #a11y
Takuro Hishikawa @HissyNC
自動的に動き、点滅、スクロールする、他のコンテンツと並行して表示される要素は、一時停止可能にする。点滅はそもそも避ける(所謂ポ○モンショック) #d2draft #a11y
つぶやきナターシャ @twit_natasha
JISシングルAに則ったデザイン:色やフォントの違いで情報を伝えている場合、マークアップもセマンティックに(emやstrong)して。#d2draft
Takuro Hishikawa @HissyNC
等級Aの達成基準を満たすビジュアルデザインとは。フォントの種類や形状、色などの感覚的な特徴だけで情報を伝えない。テキストでも情報を伝える。 #d2draft #a11y
みるく/milk @milk54
只今先生がデザイン作成について説明中。みんな食い入るように聞かれてます! #d2draft
Takuro Hishikawa @HissyNC
ビジュアルデザインに於いても「知覚可能」「操作可能」「理解可能」の原則は変わらない。アフォーダンスの延長で要素の意味を伝えるデザインを考える。 #d2draft #a11y
ヨチゴリー @yotigory
チームごとのワイヤー発表会。ここからすでにみんなのチームカラーがでてる #d2draft
るっちん(☝︎ ՞ਊ ՞)☝︎ @luchino__
さりげに「いつまで経っても たどり着けねぇぜ」キタ━(゚∀゚)━! #d2draft
Takuro Hishikawa @HissyNC
等級AAをカバーするなら。文字を拡大しても破綻しないレイアウトにする。一貫したナビゲーション、ラベル、代替テキストにする。 #d2draft #a11y
Takuro Hishikawa @HissyNC
JIS X 8341-3:2010 達成等級Aの 達成基準を満たすデザインとは、コンテンツを意味のある順序で並べる、ということに尽きる #d2draft #a11y
Takuro Hishikawa @HissyNC
CSSで無理しなくていいように、基本はシングルカラムで考える。晴眼者が見ても文書構造が理解できないレイアウトは避ける #d2draft #a11y
残りを読む(2)

コメント

ログインして広告を非表示にする
ログインして広告を非表示にする