D2D アクセシビリティ勉強会 ~WAI-ARIAでアクセシブルにしてみよう~

D2D アクセシビリティ勉強会 ~WAI-ARIAでアクセシブルにしてみよう~のつぶやきをまとめました。 https://d2draft.doorkeeper.jp/events/57069
1
SAWADA STANDARD DESIGN @SawadaStdDesign

@SawadaStdDesign @_tsmd さんよりChromeのタブが複数選択できることを教わりまして、「multiselectable」な状態で「selected」なタブが複数あっても「expanded」ではない状態も存在することを体験しましたので。 #d2draft

2017-03-10 15:07:32
SAWADA STANDARD DESIGN @SawadaStdDesign

@SawadaStdDesign w3.org/TR/wai-aria-1.…はSHOULDなので「必須」ではなく、同#aria-multiselectableはtablistに限る話ではないのでaria-expandedに関する言及がないことも納得。(今頃か #d2draft

2017-03-10 15:07:10
SAWADA STANDARD DESIGN @SawadaStdDesign

tablistロールの要素にaria-multiselectableを使った際の子要素にaria-expandedは必須か?という問いに対しては「必須ではないがtabpanelの開閉状態を示すために使う"べき"」という答えになりました。 #d2draft (WAIには聞かずじまい

2017-03-10 15:06:48
SAWADA STANDARD DESIGN @SawadaStdDesign

閲覧者の方から指摘がありましたので、スライドの一部(P.17、P.23、P.30、P.77)を加筆修正しました。 #d2draft slideshare.net/nozomisawada96…

2017-03-09 09:16:22
みるく/milk @milk54

けど、今回のアコーディオンは 澤田さんが返事されているように role="tab" にするより元の要素のセマンティクスを優先すべきでした。 #d2draft

2017-03-08 16:02:14
みるく/milk @milk54

グループDのこの問題、@shima_x_o さんは role="tab"が原因だと思われてましたが、そうではなく aria-hoge の付ける位置を変えとaria-controlsを使う事で開閉状態も読み上げます。jsdo.it/milk55/mzu0 #d2draft twitter.com/luchino__/stat…

2017-03-08 15:58:34
るっちん @luchino__

ただ、アコーディオンにロールでtabを追加しても、読み上げでアコーディオンの時のように「下位項目が隠されました」とは読んではくれなかった #d2draft

2017-03-05 18:07:11
SAWADA STANDARD DESIGN @SawadaStdDesign

宿題「アコーディオンUIに対してtablistロールを使ってもよい?」 回答:元の要素のセマンティクスを優先すべき(見出しをボタンにしてる等)場合はNG。元の要素のセマンティクスを優先する必要性が低い(divとか)場合はOK。 #d2draft

2017-03-08 01:02:08
SAWADA STANDARD DESIGN @SawadaStdDesign

宿題「tablistロールで定義されるタブを複数同時に開くことはアリなのか?」 回答:aria-multiselectable属性を設定すれば、アリです。その際aria-expanded属性が必須なのかどうかは、仕様上グレーな部分があるので後日WAIに聞きます。 #d2draft

2017-03-08 00:54:10
SAWADA STANDARD DESIGN @SawadaStdDesign

「D2D アクセシビリティ勉強会 ~WAI-ARIAでアクセシブルにしてみよう~(3月5日)」で使用したスライドを公開しました。 #d2draft #a11y #accessibility slideshare.net/nozomisawada96…

2017-03-07 23:43:54
みるく/milk @milk54

忙しい時期にもかかわらず5日の勉強会にご参加いただいた皆様、ありがとうございました! #d2draft

2017-03-06 02:13:47
SAWADA STANDARD DESIGN @SawadaStdDesign

歯切れが悪かったり、うまく答えられなかった点もありましたが、概ね理解してもらえたみたいで良かったです!(能天気 #d2draft

2017-03-05 23:01:22
るっちん @luchino__

ただ、アコーディオンにロールでtabを追加しても、読み上げでアコーディオンの時のように「下位項目が隠されました」とは読んではくれなかった #d2draft

2017-03-05 18:07:11
るっちん @luchino__

単一表示のものがタブ?複数表示できるものがアコーディオン?と思っていたがWAI-ARIAの原文と日本語の翻訳とは少しニュアンスが違うような感じがするとの意見もあり。回答は後日… #d2draft

2017-03-05 17:57:11
トミー @SaekiTominaga

@momdo_ (澤田さんが)もんどさんに確認します、と。 #d2draft

2017-03-05 17:55:20
トミー @SaekiTominaga

原文だと複数選択に関するニュアンスが違うという指摘あり。 w3.org/TR/wai-aria-1.… #d2draft

2017-03-05 17:54:39
るっちん @luchino__

タブの定義とは?アコーディオンとの違いを議論 #d2draft

2017-03-05 17:54:38
sponge design @sponge_design

まさかの問題提起をしてしまった。Tabってなに? #d2draft

2017-03-05 17:54:11
トミー @SaekiTominaga

「タブ」とは何かという話。WAI-ARIA仕様を確認中。 momdo.github.io/wai-aria-1.1/#… #d2draft

2017-03-05 17:51:45
トミー @SaekiTominaga

Windows 10 でデフォルトで読み上げソフトが入っているのは知らなかった。設定から「ナレーター」を有効にすると。 #d2draft pic.twitter.com/yMm5bg42hl

2017-03-05 16:16:14
拡大
SAWADA STANDARD DESIGN @SawadaStdDesign

Bグループはタブメニュー、あとのグループはアコーディオン #d2draft

2017-03-05 16:03:44
SAWADA STANDARD DESIGN @SawadaStdDesign

「厳しいぞ」 「いつものことです」 #d2draft

2017-03-05 15:33:24
SAWADA STANDARD DESIGN @SawadaStdDesign

「タブメニューと新着情報」か、「アコーディオンと新着情報」のどちらかにWAI-ARIAを足して、アクセシブルにする! #d2draft

2017-03-05 15:30:46
SAWADA STANDARD DESIGN @SawadaStdDesign

4グループに分かれて、ワークショップ開始〜 #d2draft

2017-03-05 15:27:05