-
- いいね！19
SAWADA STANDARD DESIGN
@SawadaStdDesign
説明だけでは解りにくいかもしれないので、VoiceOverで読み上げてみよう。 #okajs
2016-11-19 15:18:41
さく％モートレ(エアなし)仮運用中
@S_a_k_U
WAI-ARIA の基礎知識 website-usability.info/2014/04/entry_… #okajs
2016-11-19 15:19:46
パトラッシュ@中間管理職
@patorash
role="button"をつけておくと、aタグやspanタグでもVoiceOverはボタンとして認識してくれる。 #okajs
2016-11-19 15:26:24
SAWADA STANDARD DESIGN
@SawadaStdDesign
role="button"は便利。でも基本はbutton要素を使いましょう。 #okajs
2016-11-19 15:27:53
SAWADA STANDARD DESIGN
@SawadaStdDesign
role属性だけではフォーカスが当たらないからtabindexつけましょう。 #okajs
2016-11-19 15:28:50
パトラッシュ@中間管理職
@patorash
リンクやボタンはタブでフォーカスするけれど、spanタグとかは無視される。そういう場合はtabindex属性を付けておくとよい。 #okajs
2016-11-19 15:30:09
さく％モートレ(エアなし)仮運用中
@S_a_k_U
そうかぁ〜視覚でイベントのコントロールとわかるようにしても、ブラウザとかUserAgentは理解できんから、tabindex=0でも指定しとかんとおえんのかぁ〜 #okajs
2016-11-19 15:30:12
SAWADA STANDARD DESIGN
@SawadaStdDesign
わかりやすい「WAI-ARIA 1.0」仕様解説書 大藤 幹 amazon.co.jp/dp/B016XKNV9M/… #okajs
2016-11-19 15:36:46
さく％モートレ(エアなし)仮運用中
@S_a_k_U
roleは大きく４つに分類され６１種類ある 抽象ロール、ウィジェットロール、文書構造ロール、ランドマークロール #okajs
2016-11-19 15:37:30
SAWADA STANDARD DESIGN
@SawadaStdDesign
コーディングWebアクセシビリティ - WAI-ARIAで実現するマルチデバイス環境のWebアプリケーション ヘイドン・ピカリング amazon.co.jp/dp/4862462669/… #okajs
2016-11-19 15:38:16
パトラッシュ@中間管理職
@patorash
[aria-hidden="true"] { display: none; }を定義しておくと、aria-hidden属性を変更するだけで表示・非表示ができる。is-hiddenとかのクラス作らなくてよくなる。 #okajs
2016-11-19 15:39:49
パトラッシュ@中間管理職
@patorash
aria-hidden="true"だと、画面上に表示があったとしても、VoiceOverで認識しなくなる。 #okajs
2016-11-19 15:42:35
SAWADA STANDARD DESIGN
@SawadaStdDesign
「「is-visible」「is-hidden」などとクラスを作成することはこれまでは常でしたが、WAI-ARIAを利用すれば、プロジェクトやチームで独自にルールを作ることなく、W3Cによって策定された仕様に則った形で進めることができます。」 #okajs
2016-11-19 15:43:57
さく％モートレ(エアなし)仮運用中
@S_a_k_U
視覚的に「見える／見えない」とデータとして「有効／無効」みたいな考え方を整理しておく必要があるな #okajs
2016-11-19 15:44:06