第七回 okayama-js 勉強会 「実践 WAI-ARIA」 まとめ #okajs

パトラッシュ💉💉@リーダー業 @patorash

header,footer要素って、section要素ごとに使ってよかったと思うんだけれど、どうなんだろ？ #okajs

前川 昌幸@オミ岡 @maepon

noneロール爆誕 #okajs

パトラッシュ💉💉@リーダー業 @patorash

presentation/noneロールは役割を削除する。（例：仕方なくテーブルレイアウトをした場合などに使う） #okajs

おゆき @kurokoroll

presentationロールでセマンティクスを削除。今後はnoneに。 #okajs

NISHIMOTO Keisuke @keisuke_n

#okajs WAI-ARIA これは誤解が多そうな仕様ではある。正しく組み込むのはそこそこ学習が必要かも。

パトラッシュ💉💉@リーダー業 @patorash

ulのみだとただのリストだが、 ul role="menu"をつけると、メニューになる。 #okajs

okayama-js @okayamajs

ARIA in HTML 日本語訳 momdo.github.io/html-aria/ #okajs

Yoshida Takafumi @zephiransas

momdo.github.io/html-aria/ #okajs

パトラッシュ💉💉@リーダー業 @patorash

デフォルトのroleがある場合は、重複して書いてはいけない。 #okajs

おゆき @kurokoroll

ARIA in HTML 日本語訳 momdo.github.io/html-aria/ #okajs

パトラッシュ💉💉@リーダー業 @patorash

aria-*多いよなぁ〜。まぁそれだけ役割とか関係とかがあるってことだが。 #okajs

Yoshida Takafumi @zephiransas

aria-describedbyで、その選択肢は何の選択肢かというのを説明する #okajs

ymkw@撃滅完了 @yantona

昨日「コーディングwebアクセシビリティ」読んだのでより理解が深まる気がする #okajs

おゆき @kurokoroll

SVGはそのままだと、スクリーンリーダは読んでくれない #okajs

前川 昌幸@オミ岡 @maepon

PhpStorm(WebStorm)ではサポートもバッチリ。 #okajs pic.twitter.com/Gw5cKVqdW8

拡大

Yoshida Takafumi @zephiransas

html5のrequired属性でも代用可能 #okajs

Yoshida Takafumi @zephiransas

「aria-hidden 気軽に隠すなよ」ｱｯﾊｲ #okajs

前川 昌幸@オミ岡 @maepon

Atom、role属性の候補出してくれます。 #okajs pic.twitter.com/GgtfPJnMPV

拡大

Yoshida Takafumi @zephiransas

かけ放題 #okajs

前川 昌幸@オミ岡 @maepon

3周まで #okajs

パトラッシュ💉💉@リーダー業 @patorash

aria-live。勝手に更新される領域（ライブ領域）。エラーメッセージが動的に出てくる場合など。 #okajs

NISHIMOTO Keisuke @keisuke_n

#okajs pic.twitter.com/39t0A6MyUk

拡大

前川 昌幸@オミ岡 @maepon

tabindex重要。 #okajs

Yoshida Takafumi @zephiransas

CSSの属性セレクタでaria-hogeを引っ掛ける #okajs

パトラッシュ💉💉@リーダー業 @patorash

HTMLの要素を普通に使うのが基本で、例外的なときにはWAI-ARIAを使って対応するのがよい。 #okajs