第一回に引き続き、WCAGもくもく会を開催しました。今回もご参加いただいた方、お手伝い頂いた方、ありがとうございました。
イベントの詳細はconnpassのイベントページを見てください。また当日のイベントのつぶやきを本記事の末尾にまとめています。
良かったところ
- デザイナーの方の参加が増えた
- 当事者からお話をしてもらえて腹の落ち方がすごかった
アクセシビリティの向上はエンジニアだけが頑張るものではないと考えているので、なるべく色んな職種の方に参加してもらいたいと思っています。いきなりガイドラインを読むのはかなりハードル高いと思いつつ、今回はデザインに関連する項目が多かったため意識的にデザイナーの方々へお声がけしていました。
もう少し会の知名度が向上してから...という反省もありますが、それでも複数のデザイナーの方にご参加頂いたのはうれしかったです。
また、今回たまたま参加者の中にロービジョン(弱視)の方がいらっしゃったので、なぜコントラストが必要か、文字サイズを大きくできる必要があるか、実際の閲覧方法と合わせてお話いただきました。
当事者の方の閲覧方法を見るのは初めてだった方も多く、何人かの参加者から「ガイドラインにそう書いてあるから以上のモチベーションを得られた」との感想もいくつか聞くことができ、存外の成果にとてもうれしくなりました。
思えば第一回も事前にセッティングしたわけではないのですが、読んだガイドラインに関連する当事者の方にお話いただけてたので、なんか持ってるなあと。お話いただいた中根さん、伊敷さんありがとうございました。次回はちゃんとセッティングしようかなーとか、考えてます。
反省点
今回も初めてWCAGを読むという方に多く参加してもらったのですが、やはり読み進め方が難しいようでした。どれがガイドラインで、どれが解説書でというところから、文書間の関連を把握するまでは、なかなか読み進めるのに苦労されてる様子が見られました。
また適合レベルについても事前に説明もしておらず、さらに全文も飛ばしているため、AとAA、AAAにどれぐらいの差があるものか、ということを幾つか質問いただいたりしました。
次回からはもう少し詳しく読み方を解説しようかと思います。
次回は未定ですが、9月中に開催できればいいなと。また参加者の方からは懇親会を事前に設定する要望も多いので少し検討しています。
ツイートのまとめ
開催前
これからこれ
WCAGもくもく会 #2
ca11y.connpass.com/event/62543/
#a11ymoku2
— izuizu@みょうが(@izuizu)Wed Aug 30
09:49:15 +0000 2017
受付開始しております〜〜
#a11ymoku2
pic.twitter.com/NYNb97s8r7
— ゆかこさん🍻(@becyn)Wed Aug 30 09:58:17
+0000 2017
URLどこだろう?
#a11ymoku2
ca11y.connpass.com/event/62543/
>
Google Hangout
などのビデオチャットを利用します。ビデオチャットのURLは外部に公開されます
— Masao YOMODA(@yomochan)Wed Aug
30 10:03:00 +0000 2017
絶賛誘導中です
#a11ymoku2
pic.twitter.com/ku9pRqeg07
— むゆう(@muyuu_)Wed Aug 30 10:05:46
+0000 2017
#a11ymoku2
Hangout >
hangouts.google.com/call/ucd4sz2et...
— ますぴー🅿️(@masuP9)Wed Aug 30
10:18:50 +0000 2017
Google Hangoutによるリモート参加もできます。今回は4,5名参加されてました
#a11ymoku2
(@ 渋谷プライムプラザ in 渋谷区, 東京都)
swarmapp.com/c/9NxHMNQJLID
— ナユ@9/16WCT登壇(@nayucolony)Wed
Aug 30 10:19:30 +0000 2017
一緒に来るはずだった人が来ない
孤独
#a11ymoku2
— Shunsuke Matsumoto(@ShunsukeM108)Wed Aug 30 10:22:41 +0000 2017
もくもく会スタート
#a11ymoku2
はじめます〜
— ますぴー🅿️(@masuP9)Wed Aug 30
10:24:26 +0000 2017
はじまる
#a11ymoku2
— 腹筋ローラーの力を信じろ(@8845musign)Wed
Aug 30 10:24:44 +0000 2017
お邪魔してます
#a11ymoku2
— ろす@バツイチ(@lost_and_found)Wed Aug 30 10:25:41 +0000 2017
部屋がおしゃれ
#a11ymoku2
— ナユ@9/16WCT登壇(@nayucolony)Wed
Aug 30 10:29:21 +0000 2017
WCAGとは指針集
#a11ymoku2
— 腹筋ローラーの力を信じろ(@8845musign)Wed
Aug 30 10:29:31 +0000 2017
これ来てる!始まりになんとか間に合ったー
#a11ymoku2
— emi moriya(@emim)Wed Aug 30
10:30:16 +0000 2017
みてる:Web Content Accessibility Guidelines (WCAG) 2.1 W3C
Working Draft 16 August 2017
w3.org/TR/2017/WD-WCA...
#a11ymoku2
— もんど(@momdo_)Wed Aug 30 10:31:27
+0000 2017
デザイナーです
#a11ymoku2
— ナユ@9/16WCT登壇(@nayucolony)Wed
Aug 30 10:31:34 +0000 2017
何か呟くと私以外のすごい人が答えてくれます!
#a11ymoku2
— もんど(@momdo_)Wed Aug 30 10:33:58
+0000 2017
今日はマサカリ飛んでこない日
#a11ymoku2
— ナユ@9/16WCT登壇(@nayucolony)Wed
Aug 30 10:34:08 +0000 2017
わからないことをつぶやけば、えらいひとが優しくわかりやすく教えてくれるっていってたから安心です\(^o^)/
#a11ymoku2
— izuizu@みょうが(@izuizu)Wed Aug 30
10:34:47 +0000 2017
作っておられる...(前で喋っている人は他人事のように言っていますが、WAICのメンバーです)
#a11ymoku2
— もんど(@momdo_)Wed Aug 30 10:35:22
+0000 2017
自己紹介
人数が多いので、自己紹介は各テーブル毎とTwitterのハッシュタグをつけてつぶやく(任意)形式にしました。終わった方から順次もくもくスタートです。
#a11ymoku2
いしきです。よろしくお願いします。ロービジョンの視覚障害があります。。
— 伊敷政英(Cocktailz)(@cocktailzjp)Wed Aug 30 10:37:20 +0000 2017
「腹筋ローラーの力を信じろの方ですか!?!?」
#a11ymoku2
— ナユ@9/16WCT登壇(@nayucolony)Wed
Aug 30 10:38:00 +0000 2017
よもだです。横浜からはんぐあうと中です。もくもく開始
#a11ymoku2
— Masao YOMODA(@yomochan)Wed Aug
30 10:38:41 +0000 2017
【自己紹介】
izuizuです。AccSellのポッドキャストはこのあと配信予定です。
今回のゲストは、BAの太田さんと伊原さんです。
#a11ymoku2
— izuizu@みょうが(@izuizu)Wed Aug 30
10:38:46 +0000 2017
意識低いデザイナーです
#a11ymoku2
— emi moriya(@emim)Wed Aug 30
10:39:28 +0000 2017
会場広いな?!
#a11ymoku2
— もんど(@momdo_)Wed Aug 30 10:40:00
+0000 2017
腹筋ローラーエヴァンジェリストです、あとフロントエンドエンジニアです
#a11ymoku2
— 腹筋ローラーの力を信じろ(@8845musign)Wed
Aug 30 10:40:20 +0000 2017
しゅんすけです。AbemaTVのデザイナーの者です。
#a11ymoku2
— Shunsuke Matsumoto(@ShunsukeM108)Wed Aug 30 10:40:36 +0000 2017
バツイチです。
#a11ymoku2
— ろす@バツイチ(@lost_and_found)Wed Aug 30 10:41:09 +0000 2017
#a11ymoku2
主催のmasuP9です。よろしくお願いします!
— ますぴー🅿️(@masuP9)Wed Aug 30
10:42:25 +0000 2017
Cybozuのろくろ回し見習いです
#a11ymoku2
— すこや(@sukoyakarizumu)Wed
Aug 30 10:43:31 +0000 2017
しがないけむしです
#a11ymoku2
— もんど(@momdo_)Wed Aug 30 10:43:54
+0000 2017
#a11ymoku2
誘導人員引き上げましたので、今から来られる方は自力で4Fまで上がって来てください〜
— ますぴー🅿️(@masuP9)Wed Aug 30
10:44:11 +0000 2017
瀬戸内海にある人口170人の小島からはるばるやってまいりましたよろしくお願いします。
#a11ymoku2
— Shinichi Nishikawa(@shinichiN)Wed Aug 30 10:45:13 +0000 2017
この席、うぇい?うぃ?ううううぇい??ってのから始まってしまったwww
#a11ymoku2
— emi moriya(@emim)Wed Aug 30
10:45:25 +0000 2017
Twitter基本触ってなかったのですが、この会からTwitterの世界に入ってみることにしました。よろしくお願いします。#a11ymoku2
— ジミー(@shimzy1113)Wed Aug 30
10:45:26 +0000 2017
トゥーアールという会社でフロントエンドのデザイナーをしています
#a11ymoku2
— ナユ@9/16WCT登壇(@nayucolony)Wed
Aug 30 10:45:40 +0000 2017
>ナビゲーションリンクなど、いくつかのリンクは、ページデザインや文脈から視覚的に明らかであるが
明らかの基準とは。
#a11ymoku2
— すこや(@sukoyakarizumu)Wed
Aug 30 10:46:26 +0000 2017
もんどさんの弟子のみるくですw よろしくお願いします。
#a11ymoku2
— みるく/milk(@milk54)Wed Aug 30
10:46:49 +0000 2017
受付やってました!AbemaTVでフロントエンジニアを担当しております、いいだゆかこと申します
:pray:
#a11ymoku2
— ゆかこさん🍻(@becyn)Wed Aug 30 10:47:22
+0000 2017
来月は
#a11ymoku2
へ行けるようにしたい(AbemaTVでフロントエンドを中心に実装しています)
— kubosho_(@kubosho_)Wed Aug 30
10:47:37 +0000 2017
"1.4.1 色の使用:
色が、情報を伝える、動作を示す、反応を促す、又は視覚的な要素を判別するための唯一の視覚的手段になっていない。
(レベル A)"
「、」が多いのが気になって・・・
#a11ymoku2
— izuizu@みょうが(@izuizu)Wed Aug 30
10:47:50 +0000 2017
今日私は他の方達がどこで「へー」「ほー」ってなるのかを興味に来ました(真面目な方の自己紹介
#a11ymoku2
— emi moriya(@emim)Wed Aug 30
10:47:59 +0000 2017
誘導員やってました。AbemaTVのフロントエンドやってます。むゆうです、よろしくです
#a11ymoku2
— むゆう(@muyuu_)Wed Aug 30 10:49:02
+0000 2017
もくもくスタート
ウェブサイトのコントラスト比測定で定番ツールとかあるんでしょうか
#a11ymoku2
— ろす@バツイチ(@lost_and_found)Wed Aug 30 10:50:36 +0000 2017
コントラストの項目の相対輝度を導出するsass function
css-tricks.com/snippets/sass/...
#a11ymoku2
— ナユ@9/16WCT登壇(@nayucolony)Wed
Aug 30 10:50:44 +0000 2017
さっそく疑問点と回答のツイートが。みんなで読んでる一体感を感じますね。ヌクモリティですね(古い)。
レイアウト的に先頭付近というのはページ上部ということでよいのかな
/ 音声を停止するコントロールはページの先頭付近に
waic.jp/docs/WCAG-TECH...
#a11ymoku2
— 腹筋ローラーの力を信じろ(@8845musign)Wed
Aug 30 10:50:56 +0000 2017
どこかと思ったら、F73か。。
waic.jp/docs/WCAG-TECH...
twitter.com/sukoyakarizumu...
#a11ymoku2
— もんど(@momdo_)Wed Aug 30 10:51:46
+0000 2017
最近コントラスト比の算出で便利だなと思ったツールです //
webaim.org/resources/cont...
#a11ymoku2
— kubosho_(@kubosho_)Wed Aug 30
10:52:17 +0000 2017
メカニズムって少し仰々しいのよね、だからなんだ事案だけど。
#a11ymoku2
— emi moriya(@emim)Wed Aug 30
10:53:34 +0000 2017
原文では、> While some links may be visually evident from
page design and context,
w3.org/TR/WCAG20-TECH...
#a11ymoku2
— もんど(@momdo_)Wed Aug 30 10:53:35
+0000 2017
@momdo_
いろいろな場合があるし、基準を明確に作れないのはしょうがないと思うのですけど、とはいえ試験している人からは質問がくると思います...
#a11ymoku2
— すこや(@sukoyakarizumu)Wed
Aug 30 10:58:23 +0000 2017
@sukoyakarizumu
この失敗例の基準という意味では、色無しでもリンクであることがわかればよいということが主眼なわけですから、色以外の視覚的な手がかりがあるかどうか、じゃないですかね。例えば典型的なパンくずなら「>」とかでわかるとかそういうことかと。
— もんど(@momdo_)Wed Aug 30 11:02:45
+0000 2017
そういうページを見たことがない気が・・・(あれ?気付いてないだけ?)
【達成基準
1.4.1 】
「動作を示している例では、リンクが新しいウィンドウで開くことやデータベースの項目が正常に更新されたことを示すために色を使うことがある。」
#a11ymoku2
— izuizu@みょうが(@izuizu)Wed Aug 30
10:54:37 +0000 2017
ありがとうございます〜
@kubosho_
@nayucolony
#a11ymoku2
— ろす@バツイチ(@lost_and_found)Wed Aug 30 10:55:18 +0000 2017
どうにかしようがなさそう
twitter.com/izuizu/status/...
#a11ymoku2
— もんど(@momdo_)Wed Aug 30 10:55:48
+0000 2017
僕はコントラストチェッカー、これ使ってる
#a11ymoku2
lab.syncer.jp/Tool/Color-Con...
— ますぴー🅿️(@masuP9)Wed Aug 30
10:56:48 +0000 2017
読み上げさせたときに、なるべく早く来るようにせよ、ということなのでは(てきとう)
twitter.com/8845musign/sta...
#a11ymoku2
— もんど(@momdo_)Wed Aug 30 10:56:53
+0000 2017
@momdo_
ありがとうございます!続きの文章を読むとそう理解できますね。
— 腹筋ローラーの力を信じろ(@8845musign)Wed
Aug 30 11:00:24 +0000 2017
印刷の世界にはアクセシビリティのガイドラインとかはないのだろうか??
waic.github.io/wcag20/Underst...
#a11ymoku2
— Shunsuke Matsumoto(@ShunsukeM108)Wed Aug 30 10:57:48 +0000 2017
Sketch だと
getstark.co
#a11ymoku2
— ますぴー🅿️(@masuP9)Wed Aug 30
10:57:48 +0000 2017
「かもしれない」メリット・・・
#a11ymoku2
— izuizu@みょうが(@izuizu)Wed Aug 30
10:57:49 +0000 2017
paciellogroup.com/resources/cont...
これもコントラスト比測定の定番ですね
#a11ymoku2
— Masao YOMODA(@yomochan)Wed Aug
30 10:59:52 +0000 2017
Sketchはプラグインとかも色々あるので、デザインしながらでもコントラスト比確認しやすいです。#a11ymoku2
→ Sketch-Color-Contrast-Analyser
github.com/getflourish/Sk...
— emi moriya(@emim)Wed Aug 30
11:00:58 +0000 2017
背景白で文字サイズデフォルトだと無彩色なら#666
くらいがAA達成ギリか。思ったより落とせるね
#a11ymoku2
— ナユ@9/16WCT登壇(@nayucolony)Wed
Aug 30 11:04:21 +0000 2017
最近必ずしもコントラスト比だけの話でもないよねって話をしてたりもします。文化で伝わる意味が変わってしまったりもするし。。。
#a11ymoku2
— emi moriya(@emim)Wed Aug 30
11:05:02 +0000 2017
この記事自体の行間が足りない
waic.github.io/wcag20/Underst...
#a11ymoku2
— Shunsuke Matsumoto(@ShunsukeM108)Wed Aug 30 11:05:42 +0000 2017
line-height、ブラウザデフォルトいじらないだけで達成できるんじゃん
#a11ymoku2
— ナユ@9/16WCT登壇(@nayucolony)Wed
Aug 30 11:07:12 +0000 2017
1.4.3
は写真の上に文字を置くときや背景がグラデーションのときに特に注意が必要。写真の上の文字は読みづらいことが多いので、座布団を強いてほしい(個人の見解です)。
#a11ymoku2
— 伊敷政英(Cocktailz)(@cocktailzjp)Wed Aug 30 11:07:17 +0000 2017
結構みんな達成方法集読んでるなあ(まあ、具体例があるのでしっくりくるってのはよく分かりますけど)
#a11ymoku2
— もんど(@momdo_)Wed Aug 30 11:08:06
+0000 2017
line-height: 1.5、CJKだともっと欲しそう
#a11ymoku2
— ゆうへい(@_yuheiy)Wed Aug 30
11:09:00 +0000 2017
つらい(つらい)
twitter.com/ShunsukeM108/s...
#a11ymoku2
— もんど(@momdo_)Wed Aug 30 11:09:43
+0000 2017
アンチエイリアス効かせると若干薄く見える...かな...? /
アンチエイリアスをオフにした状態でテキストのコントラスト比を評価してもよい。
waic.github.io/wcag20/Underst...
#a11ymoku2
— 腹筋ローラーの力を信じろ(@8845musign)Wed
Aug 30 11:10:57 +0000 2017
1.4.8 視覚的提示:
テキストブロックの視覚的提示において、次を実現するメカニズムが利用できる:
(レベル AAA)
幅が80字を越えない
(全角文字の場合は、40字)。
記憶
#a11ymoku2
— ジミー(@shimzy1113)Wed Aug 30
11:12:35 +0000 2017
たしかに当たり前だけど、改めて言われるとほんまや。
【達成基準
1.4.2】
「システム全体と同じ音量コントロールによって制御されていると」
#a11ymoku2
— izuizu@みょうが(@izuizu)Wed Aug 30
11:13:00 +0000 2017
FRESH!のアクセシビリティガイドラインの「判別できる」
openfresh.github.io/a11y-guideline...判別できる
#a11ymoku2
— ますぴー🅿️(@masuP9)Wed Aug 30
11:13:36 +0000 2017
そうそう、書いてある日本語が分からん(けど、GitHubに何か書くのもちょっと...)、という場合は、Twitterに書いてもらえれば検討してみます。
#a11ymoku2
— もんど(@momdo_)Wed Aug 30 11:14:20
+0000 2017
広域サイト設定ってなんだろう(恥をしのんで)
【1.4.2
でさらに対応が望まれる達成方法 (参考)】
「音声を停止できる広域サイト設定を提供する」
#a11ymoku2
— izuizu@みょうが(@izuizu)Wed Aug 30
11:16:35 +0000 2017
見てる。/openfresh.github.io/a11y-guideline...
#a11ymoku2
— 越智(@o_ti)Wed Aug 30 11:16:59 +0000
2017
コントラスト (最低限)
「(最低限)」に翻弄されているところ
#a11ymoku2
— izuizu@みょうが(@izuizu)Wed Aug 30
11:19:16 +0000 2017
サンプル見ると、行送りが2行以上ぶん以上あると「行間」としての認識無理だなw
#a11ymoku2
— ナユ@9/16WCT登壇(@nayucolony)Wed
Aug 30 11:19:40 +0000 2017
もーむずかしいからとりあえずぜんぶ4.5:1にしときゃいいんじゃないすかね
#a11ymoku2
— emi moriya(@emim)Wed Aug 30
11:20:48 +0000 2017
ギリシャ神話のオシャレの神、オシャヌスがいるなぁここには。
#a11ymoku2
pic.twitter.com/VoYmkUMxtA
— 越智(@o_ti)Wed Aug 30 11:20:56 +0000
2017
会場は勤務先のCREATIVE Loungeを使用しました。とってもおしゃれなスペースです。
ノートPCとかでは良くても4kディスプレイとかでみると辛いサイト結構ある
#a11ymoku2
— 腹筋ローラーの力を信じろ(@8845musign)Wed
Aug 30 11:21:48 +0000 2017
「装飾を目的にしていて、情報を伝えていないテキストは対象外である。例えば、背景でランダムに使われている語句があり、」
これは、こいうことですよね?
bit.ly/2mYMhdH
#a11ymoku2
— izuizu@みょうが(@izuizu)Wed Aug 30
11:24:38 +0000 2017
原文では >site-wide preference
とありますが、これ以上の説明はないので、これを書いた人のみぞ知る...
twitter.com/izuizu/status/...
#a11ymoku2
— もんど(@momdo_)Wed Aug 30 11:24:57
+0000 2017
@momdo_
site-wide preference
と言った場合は「サイト全体の設定」という意味になるので、特にページ共通の領域(いわゆるヘッダーやフッター)にそういうコントロールを置くべき、という風に解釈すればよいはず。
#a11ymoku2
— くあーる(@coeurl_tw)Wed Aug 30
11:37:05 +0000 2017
解説書 1.4.4
画像化された文字のサイズ変更にサーバーサイトスクリプトを用いる
サーバーサイ「ド」のtypoでしょうか
#a11ymoku2
— ろす@バツイチ(@lost_and_found)Wed Aug 30 11:25:41 +0000 2017
直しました!ご指摘感謝。
github.com/waic/wcag20/co...
twitter.com/lost_and_found...
#a11ymoku2
— もんど(@momdo_)Wed Aug 30 11:31:17
+0000 2017
翻訳への貢献ですね!WAICポイントゲットだぜ
えぇぇ・・・・><
#a11ymoku2
twitter.com/momdo_/status/...
— izuizu@みょうが(@izuizu)Wed Aug 30
11:25:55 +0000 2017
@izuizu
訳がおかしい。「サイト全体に渡る(に対する)設定」とでもするといいと思う
— Kotaro Kokubo(@kotarok)Wed Aug
30 11:29:22 +0000 2017
#a11ymoku2
あと15分ぐらいですー。みなさん、進捗はいかがですかー?
— ますぴー🅿️(@masuP9)Wed Aug 30
11:28:22 +0000 2017
とはいえ、3:1よりも低かったらあかんよ、ということですよね?(確認)
「18
ポイントのテキスト又は 14
ポイントの太字のテキストは、より低いコントラストで十分なサイズの大きさと判断される」
#a11ymoku2
— izuizu@みょうが(@izuizu)Wed Aug 30
11:29:31 +0000 2017
さて自分のポートフォリオでも測るかとおもったところ、最初にデカデカとaltの入ってないSVG文字コンテンツがあって死んだ
chrome.google.com/webstore/detai...
#a11ymoku2
— ナユ@9/16WCT登壇(@nayucolony)Wed
Aug 30 11:32:41 +0000 2017
#a11ymoku2
達成基準 1.4.1 を理解する
>グレー表示され、使用できない。
gray
outはIT用語辞典だと"グレーアウト"。こちらの方がしっくりくる。weblio.jp/content/%E3%82...
— Masao YOMODA(@yomochan)Wed Aug
30 11:33:10 +0000 2017
大きな文字の定義がポイントってことは、remとかで指定してもデバイスのppi/dppxによって変わるのかどうか誰か教えて
#a11ymoku2
— fukumotoy(@fukumotoy)Wed Aug
30 11:34:24 +0000 2017
ESlintの"Rule max-len"も80だったとおもうけどこれってなんでだっけ
#a11ymoku2
— ナユ@9/16WCT登壇(@nayucolony)Wed
Aug 30 11:34:41 +0000 2017
80文字って結構短いのよね。私短い文字でデザインして出したら、長くしてって言われた上に、改行を入れられるってことに見舞われたことがある。。。
#a11ymoku2
— emi moriya(@emim)Wed Aug 30
11:35:02 +0000 2017
解説書1.4.6
企業ロゴのようにデザインされた文字は、代替「え」テキストを含んでいてもいなくても〜
他では代替テキストと表記してるので「え」は衍字のようですね
#a11ymoku2
— ろす@バツイチ(@lost_and_found)Wed Aug 30 11:35:38 +0000 2017
@lost_and_found
直しておきました。多謝。
github.com/waic/wcag20/co...
— もんど(@momdo_)Wed Aug 30 12:20:58
+0000 2017
「付随的」を辞書で調べているところ・・・
日本語でつまずいていてすいません。。。
#a11ymoku2
— izuizu@みょうが(@izuizu)Wed Aug 30
11:37:09 +0000 2017
@izuizu
私も日本語の意味を調べる事多いです。やっぱり日本語が難しい件。
#a11ymoku2
— みるく/milk(@milk54)Wed Aug 30
11:40:25 +0000 2017
@milk54
@izuizu
なんかもうすみませんすみません(代表して謝っておきます><)
— もんど(@momdo_)Wed Aug 30 11:42:58
+0000 2017
ここに伊原おにいさんがいたら多分即答していた(なんかWCAG
2.1で追加されてたかもしれないし、そうじゃなかったかもしれない)
twitter.com/fukumotoy/stat...
#a11ymoku2
— もんど(@momdo_)Wed Aug 30 11:37:13
+0000 2017
Macでつくって確認してよし、としてるとダメだろうな。 /
数年間にわたって普及しているデスクトップ/ラップトップの画面解像度を考慮すべきである。
#a11ymoku2
— 腹筋ローラーの力を信じろ(@8845musign)Wed
Aug 30 11:38:01 +0000 2017
日本語警察をしだすと「実現可能」「必要不可欠」とかも摘発されるからな、、、
#a11ymoku2
— ナユ@9/16WCT登壇(@nayucolony)Wed
Aug 30 11:38:26 +0000 2017
僕この序文がけっこう好きで、アクセシビリティーに取り組むと
"しばしば利用者全般のユーザビリティを向上させる"
んですよね。/waic.jp/docs/WCAG20/Ov...
#a11ymoku2
— 越智(@o_ti)Wed Aug 30 11:39:43 +0000
2017
1.4.2
音声の制御に対して、動画の制御はないのか(背景に動画が自動再生されるような場合)と思ったら、2.2.2
でカバーするのか。あれとても読みづらい、というか読む気をなくすんだよなー。
#a11ymoku2
— 伊敷政英(Cocktailz)(@cocktailzjp)Wed Aug 30 11:40:48 +0000 2017
今回もタブを開きすぎて迷子
#a11ymoku2
— ろす@バツイチ(@lost_and_found)Wed Aug 30 11:40:58 +0000 2017
まあこれ(WCAG
2.0)を作ったときにはスマートフォンなんかなかったと思うので、WCAG
2.1でいろいろ変わってくるんじゃないでしょうか、たぶん(てきとう)
twitter.com/8845musign/sta...
#a11ymoku2
— もんど(@momdo_)Wed Aug 30 11:42:07
+0000 2017
「サイズの大きなテキスト 」にハマってしまいました
#a11ymoku2
— 👤(@ador_uko)Wed Aug 30
11:42:45 +0000 2017
ウェブサイトの動画・音声コンテンツが未だに自分ごととして捉えられない
#a11ymoku2
— ナユ@9/16WCT登壇(@nayucolony)Wed
Aug 30 11:42:47 +0000 2017
テキストによる代替 is
alt属性っていいのか、それ以上の意味を含んでいるのか。
waic.github.io/wcag20/Underst...
#a11ymoku2
— すこや(@sukoyakarizumu)Wed
Aug 30 11:43:20 +0000 2017
@sukoyakarizumu
テキストによる代替⊇alt属性の代替テキスト かと
— もんど(@momdo_)Wed Aug 30 11:46:21
+0000 2017
文字サイズ変更と、文字が読めることと、レイアウト崩れの許容についてのせめぎ合いが難しい。気がする。
#a11ymoku2
— emi moriya(@emim)Wed Aug 30
11:43:36 +0000 2017
(Twitterでのおかしい、こうした方がいいんじゃ、というのはリアルタイムで更新できていませんが、後でちゃんと消化します。。。)
#a11ymoku2
— もんど(@momdo_)Wed Aug 30 11:45:14
+0000 2017
感想戦
感想戦も同じくハッシュタグにつぶやいてもらったり、テーブルごとにお話してもらいました。
#a11ymoku2
感想戦します〜
— ますぴー🅿️(@masuP9)Wed Aug 30
11:45:56 +0000 2017
@momdo_
「普及している」デバイスの定義が困難そうですね。。。そういう表現じゃそもそもなくなるのか
— 腹筋ローラーの力を信じろ(@8845musign)Wed
Aug 30 11:46:41 +0000 2017
#a11ymoku2
達成基準 1.4.3 を理解する
>黒の背景に赤の前景を使うことを避けるという参考達成方法を提供している
advisory
techniqueはさらに対応が望まれる達成方法(参考)かな?
— Masao YOMODA(@yomochan)Wed Aug
30 11:47:02 +0000 2017
改めてもくもくしてみると見落としていたところが見えてきて面白い。あとやっぱりいろんなひとの疑問や、普段デザインしていて感じることを聞けるのは楽しいですね。
#a11ymoku2
— 伊敷政英(Cocktailz)(@cocktailzjp)Wed Aug 30 11:47:44 +0000 2017
コントラストとか、デザイナーが感覚でやってたことがロジックで理解できそうないい機会でした。
UIなどの設計はロジカルにできるけど、本当に細かい色の選定はちょっと感覚任せなとこあったな。
#a11ymoku2
— Shunsuke Matsumoto(@ShunsukeM108)Wed Aug 30 11:48:29 +0000 2017
デザインカンプありきで回っている仕事だと、それを作る人が知らないと意味ないなと思ったし、作る側に意識がないと口出しもしづらいなとおもった
#a11ymoku2
— ナユ@9/16WCT登壇(@nayucolony)Wed
Aug 30 11:48:37 +0000 2017
一番読んでるところのはずなのでふんふんって読み進めましたがやっぱ後半は斜め読みしてしまいますよね......っていう感想
#a11ymoku2
— emi moriya(@emim)Wed Aug 30
11:48:43 +0000 2017
@emim
まあ、後ろに行くほど難易度高いですしおすし。
— もんど(@momdo_)Wed Aug 30 11:49:24
+0000 2017
判定式や具体的な数字(文字量など)がキッチリ決まっていて、またそれに対してちゃんと論文の注釈があり、感動した...!!
#a11ymoku2
— ゆかこさん🍻(@becyn)Wed Aug 30 11:49:13
+0000 2017
初めて読みました。理解しながら読むのが大変でしたが、勉強になりました。日本語、単語、用語が難しい!
#a11ymoku2
— Shinichi Nishikawa(@shinichiN)Wed Aug 30 11:49:35 +0000 2017
聞きながら確認しながら読めたので、理解度が高まりました。
お騒がせしましたm(__)m
ありがとうございました!
#a11ymoku2
— izuizu@みょうが(@izuizu)Wed Aug 30
11:49:57 +0000 2017
「中根さんという界隈の方」
#a11ymoku2
— izuizu@みょうが(@izuizu)Wed Aug 30
11:50:31 +0000 2017
電子書籍クラスタとしては、最初に想定する環境がモノクロ電子ペーパーなので、すっかりお馴染み観点と当たり前すぎて逆に意識してこなかった観点がありました。
#a11ymoku2
— ろす@バツイチ(@lost_and_found)Wed Aug 30 11:50:50 +0000 2017
伊敷さんからのお話
会場のアクセシビリティ
#a11ymoku2
— 腹筋ローラーの力を信じろ(@8845musign)Wed
Aug 30 11:51:32 +0000 2017
「人が喋るから背景音止めて」
#a11ymoku2
— ナユ@9/16WCT登壇(@nayucolony)Wed
Aug 30 11:51:58 +0000 2017
会場にはBGMが流れていたのですが、伊敷さんがお話されるにあたってBGMをストップしました。会場は1.4.7 小さな背景音、又は背景音なしを達成できていますね!
伊敷さん「おしゃれだな、ということはわかります」
#a11ymoku2
— izuizu@みょうが(@izuizu)Wed Aug 30
11:53:13 +0000 2017
#a11ymoku2
久々にちゃんと読んだ。@cocktailzjp
さんと被るけどいろんな人の感じることを聞けるのは楽しい。
— Masao YOMODA(@yomochan)Wed Aug
30 11:53:38 +0000 2017
色反転でWeb見る方ってどのくらいいるのだろう、視力関係なく。Twitterアプリとかは私も黒。
#a11ymoku2
— emi moriya(@emim)Wed Aug 30
11:54:37 +0000 2017
だいたい勉強会では技術文書を読むよりかは人と会話している(間違っている)
#a11ymoku2
— もんど(@momdo_)Wed Aug 30 11:54:46
+0000 2017
「勝手にFacebookを思い浮かべてるんですけど」
#a11ymoku2
— emi moriya(@emim)Wed Aug 30
11:55:36 +0000 2017
老眼もコントラスト比低いと読めない。
#a11ymoku2
— みるく/milk(@milk54)Wed Aug 30
11:56:04 +0000 2017
伊敷さんは4.5:1でも読みづらい。読みやすいのは6:1だって!
#a11ymoku2
— emi moriya(@emim)Wed Aug 30
11:57:09 +0000 2017
私もTwitterアプリは夜間モード
#a11ymoku2
twitter.com/emim/status/90...
— izuizu@みょうが(@izuizu)Wed Aug 30
11:57:18 +0000 2017
@izuizu
それっすそれそれ
— emi moriya(@emim)Wed Aug 30
11:58:32 +0000 2017
6:1、ほぼAAAだな
#a11ymoku2
— ナユ@9/16WCT登壇(@nayucolony)Wed
Aug 30 11:57:30 +0000 2017
赤と緑はコントラスト比めっちゃ確保しづらいんすよ。
#a11ymoku2
— emi moriya(@emim)Wed Aug 30
11:57:58 +0000 2017
文字はでかくすればいいけどコントラスト比ってUAが提供してる機能でいじくれたっけ?
#a11ymoku2
— ナユ@9/16WCT登壇(@nayucolony)Wed
Aug 30 11:58:56 +0000 2017
@nayucolony
OSレベルだとハイコントラストモードってできるよ
— ますぴー🅿️(@masuP9)Wed Aug 30
12:00:17 +0000 2017
@nayucolony
PC側かエクステンションとかですかねー
#a11ymoku2
— emi moriya(@emim)Wed Aug 30
12:00:18 +0000 2017
@emim
てことは、学校のPCみたいな「インストールもレジストリ変更も権限がいる」みたいなやつだと絶&望ですか、、、
— ナユ@9/16WCT登壇(@nayucolony)Wed
Aug 30 12:03:09 +0000 2017
出たー、文字サイズ変更ボタンー!
#a11ymoku2
— emi moriya(@emim)Wed Aug 30
11:59:14 +0000 2017
"画数の多い漢字が読めるか"
"半角の記号「:」「!」とかが認識できるか"
#a11ymoku2
— izuizu@みょうが(@izuizu)Wed Aug 30
11:59:23 +0000 2017
まずズームにちゃんと対応した方が良い
#a11ymoku2
— 腹筋ローラーの力を信じろ(@8845musign)Wed
Aug 30 12:00:36 +0000 2017
「文字サイズ変更ボタン使ってる人を知らない」衝撃!
#a11ymoku2
— 👤(@ador_uko)Wed Aug 30
12:01:24 +0000 2017
a11y、ロービジョンの見え方の話聞いて一気に絵空事じゃなくなった、、、
#a11ymoku2
— ナユ@9/16WCT登壇(@nayucolony)Wed
Aug 30 12:01:28 +0000 2017
伊敷さん「文字変更ボタンを使っている人を知りません(きりっ」
#a11ymoku2
— izuizu@みょうが(@izuizu)Wed Aug 30
12:01:57 +0000 2017
主催曰く、次は9月にやりたい(らしい)
#a11ymoku2
— もんど(@momdo_)Wed Aug 30 12:02:13
+0000 2017
ロービジョンの方で文字サイズ変更ボタン使ってる人を知らない...!
#a11ymoku2
#a11ymoku2
— SOU(@sou_lab)Wed Aug 30 12:02:38
+0000 2017
想定するUAの機能がはっきりしてるとコンテンツも作りやすいけど、そもそもUAの機能を把握できていない希ガス
#a11ymoku2
— ろす@バツイチ(@lost_and_found)Wed Aug 30 12:04:14 +0000 2017
遠隔参加出来るの非常に嬉しいです。
勉強になりました。ありがとうございました。#a11ymoku2
— みるく/milk(@milk54)Wed Aug 30
12:04:49 +0000 2017
ありがとうございましたー!!!おわり。
#a11ymoku2
— emi moriya(@emim)Wed Aug 30
12:05:01 +0000 2017
#しゅきしゅきお冷やCrew
#a11ymoku2
instagram.com/p/BYatNBCgWvl/
— ナユ@9/16WCT登壇(@nayucolony)Wed
Aug 30 12:05:03 +0000 2017
#a11ymoku2
第2回もくもく会おしまい。ありがとうございました!
— Masao YOMODA(@yomochan)Wed Aug
30 12:06:15 +0000 2017
@yomochan
細かいことを考えずに差し替えてみました。
github.com/waic/wcag20/co...
— もんど(@momdo_)Wed Aug 30 12:26:26
+0000 2017
ちなみに誰も指摘しなかったというか、私もいうの忘れてたんだけど、WCAG
2.0
解説書はgithubにあるやつは10月版なんですよね(WAICサーバーにあげられるように鋭意作業中です><)
#a11ymoku2
— もんど(@momdo_)Wed Aug 30 12:34:35
+0000 2017
初めて参加しました。貴重なお話が聞けて良かったです。ありがとうございました!
#a11ymoku2
— aki(@akiko77533642)Wed Aug
30 12:35:42 +0000 2017
開催後の反応とか
Twitterトレンドにa11yのモクモクらしきイベントがあって気になってる。#a11ymoku2
pic.twitter.com/VSR0YriWeM
— Yusuke Utsunomiya(@uskay)Wed Aug
30 13:54:55 +0000 2017
参加できなかったのでログみてる...(´・ω・`)
#a11ymoku2
— あほむ🐤(@ahomu)Wed Aug 30 13:55:15
+0000 2017
#a11ymoku2
見返しながら一人反省会
pic.twitter.com/HkNcqwo7h3
— ますぴー🅿️(@masuP9)Wed Aug 30
14:46:08 +0000 2017
Super cute
#a11ymoku2
pic.twitter.com/VmbJADDWt3
— 👤(@ador_uko)Wed Aug 30
15:26:39 +0000 2017
なんで「デザイナーは薄い色の文字が好きだからー」って言われるんだろうか?それデザイナーじゃないのでは
#a11ymoku2
— emi moriya(@emim)Thu Aug 31
04:39:18 +0000 2017
@emim
薄い色のラインが入ったデザインがあがってきたら、私BBAだで見づらいからもっと濃い色にして(名古屋弁)って言ったわw
— akinori(@akinori)Thu Aug 31
04:47:42 +0000 2017
追記
まず、文書自体は、https://t.co/zKBPouobIU に。で、ウェブの制作に関わるようになって10年選手の僕としても、ぶっちゃけ苦労した。実装方法が難しいとかではなくて、できるだけ一般的に適用できるように抽象的に書かれているために、想像力が追いつかない感じでむずい。
— Shinichi Nishikawa (@shinichiN) 2017年9月4日
前のツイートは、すごく多くの感想をつぶやいて頂いたので全ては掲載しませんが、リプライで繋げておられるのでぜひ見てみてください。
このツイートまとめはmatometools.comで作成しました。(便利!)