kurokoroll（クロコロール）

2017.6.11

第七回 okayama-js「実践 WAI-AIRA」に参加してきました。セッションからグループワークというスタイルで、講師の澤田望さん（SAWADA STANDARD DESIGN）の教えのもと4時間弱みっちり学ばせていただきました。

澤田さんが、スライドシェアしてくださってます。とてもありがたいです。

こちらを振り返りつつ抜粋させていただきながら、学んできたことを整理してみました。

WAI-ARIAとは？

WAI-ARIA（Web Accessibility Initiative Accessible Rich Internet Applications）とは、WAI（W3Cでアクセシビリティ関連の活動を行っている部門）によって作成された、アクセシブなリッチ・インターネット・アプリケーションを制作するための仕様。「ワイ・エリア」でなく「ウェイ・アリア」と読む。（つい数ヶ月前まで間違えてました…汗）

Accessible Rich Internet Applications (WAI-ARIA) 1.1 日本語訳

セッションでは、「role属性」「aria-○○○属性」「tabindex属性」について具体例を交えながら詳しく説明してくださいました。

role属性（役割）

その要素が何の役割なのかを定義するための属性。次の4つに分類される。

ランドマーク・ロール：HTML5でそのままつかえるものはそのまま使うのがよし。
文書構造ロール：セマンティクスを定義。CSSが必要
ウィジェット・ロール：UI部品として機能する各種ウィジェットを示す。JavaScriptが必要
抽象ロール：ロール全体の分類や定義を行う。role属性の値として指定できない。

HTMLの要素に対するrole属性利用の可否

2. in HTMLの使用に対する文書適合性要件 – ARIA in HTML 日本語訳

※HTMLに元々ある要素はそのまま使うのが原則！

aria-○○○属性（ステートとプロパティ）

オブジェクトの状態や性質・特製を表す属性。ロールとの組み合わせで「何が/いつ/どう」変化したかを通知できる。

グローバル・ステート&プロパティ属性：すべてのHTML要素、すべてのロールに使用可能。
関係属性：要素と要素の関係を明確に示す属性。
ウィジェット属性：ウィジェット・ロールの要素で使用される属性。JavaScriptが必要
ライブ領域属性：ライブ領域（勝手に更新されるエリア）に固有の属性。
ドラッグアンドドロップ属性：ドラッグ&ドロップ機能をサポートするための属性。WAI-ARIA1.1で非推奨

ロールに対するステート&プロパティ利用の可否

3. 許可されるロール、ステートおよびプロパティ- ARIA in HTML 日本語訳

tabindex属性

要素にフォーカスを与えある属性。tabindex自体はHTMLの仕様。tabindex=”-1″でフォーカス不可となり、VoiceOverで読まないようになる。

CSSでの書き方

属性セレクタで指定できる。

ul[role="tablist"]{
  margin: 30px 0;
}
li[aria-hidden="true"]{
  display: none;
}

グループワークで理解を深める

アコーディオンとタブを、アクセシブルなコードにしていくお題のもと、ひとグループ6人前後で4つのグループに分かれてのグループワーク。みんなであーでもない、こーでもないといいながら課題にとりくみました。聞くのと実践するのとでは大違い。なかなか苦戦しましたが、チームのみなさんのおかげでなんとか。チーム4の方々、お世話になりました。

グループワークの後には、それぞれの成果発表。たったこれだけのコードでも、チームによってそれぞれ個性があっておもしろかったです。

次のコードは、澤田さんのコードを元におさらいしたものです。

アコーディオン

See the Pen WAI-ARIA accordion by kurokoroll (@kurokoro) on CodePen.

タブ

See the Pen WAI-ARIA tab-nav by kurokoroll (@kurokoro) on CodePen.

まさかの落とし穴、Voice Overにも翻弄されました…汗　慣れないと操作難しいんですね。ソフトによっても違うらしいので、難しいところ。

Voice Overの操作

第 2 章 VoiceOver の基本を学習する- Apple

まとめ

role属性、aria-○○○属性って、jQueryのプラグインなどでコードをコピペして使ってるときに、出てきたやつやないか！？はずかしながら、以前からあるもののあまり深く追求せず（追求しろや…）曖昧なままここまでやってきましたが、ようやく意味がわかりました。昔はこれいるんかな？って消して動かなくなったこともあったなー笑

セッションのはじめに『「WAI-ARIAの何を足せばアクセシブルになるの？」を解決すること』を今日の目標にすると澤田さんがおっしゃられました。まだ、どの属性がいいのか、どこに足せばいいかは、正直全く自信ないですが、role属性とaria-○○○属性でできること、WAI-ARIAとアクセシビリティの関係は理解。

今回はアクセシビリティをよくするのにWAI-ARIAを使いましたが、アクセシブルなマークアップができるだけでなくて、CSSやJavaScript書くときにも無駄に独自の命名したクラスつけたりしなくていいので、コーディングが楽になりますね！！少しずつ実践して取り入れていきたいと思います。

講師の澤田さん、主催してくださった前川さん、お疲れさまでした。ありがとうございました！

おまけ

懇親会までに時間が少しあったので、倉敷を少し歩いてきました。「倉敷にフクロウがいるらしい」という情報を元に、フクロウを愛でることに。

毛並が荒れたりするらしく、手の甲でなでます。フサフサで一気にとりこになってしまいました♡

倉敷フクロウの森

県外の勉強会に行くと、ちょこっと観光もできていいですね！それもちょっとした楽しみだったりします。

WAI-ARIA、研究しましょう