第27回リクリセミナー「Webアクセシビリティ はじめの一歩、キホンの「キ」とアリアの「ア」！」 - Re:Creator's Kansai | Doorkeeper

タイトルが長い！笑

Webアクセシビリティに対応する重要性はわかったものの、実務でどのようにしていけばいいのか？何から始めたらWebアクセシビリティを意識していると言えるのか…。

Webアクセシビリティ対応、何から始めていいのかとモヤモヤしている方にオススメのセミナーです。

この開催趣旨が、自分の現状とドンピシャだったので行ってみました。

感想

知らないことばかりでメチャクチャ勉強になりました。

まずアクセシビリティやWAI-ARIAの基礎知識を押さえてから、どのコードをどんな時にどのように記述すると良いのか等、具体例を示しつつの紹介だったので分かりやすかったです。かなり丁寧だったので、スライドとメモ、配布いただいたチェックリストがあれば、私でもスムーズにアクセシビリティ対策できそう。

内容

今日から始めるWebアクセシビリティ、まずはココから！

植木 真さん（インフォアクシア）による講演でした。

• アクセシビリティとは何か

• HTMLはどんな構成にすると良いのか

• マークアップで気をつけること（見出し、リスト、フォーム…などの各要素について）

• まずはここからチェックリスト（参加特典？）

• tabの実装例、WAI-ARIAについて？（映像）

アクセシビリティ対応について、１から懇切丁寧なご説明。「なんだか大変そう、覚えることが多そう…」というイメージがだいぶ払拭されて「なんだか出来そうだぞ」という気持ちになりました。

HTML5で今日から使えるWAI-ARIA

大藤 幹さんによる講演でした。大まかな流れはこちら。

• WAI-ARIAで覚える必要がある要素と属性

• WAI-ARIAとは？

• 各属性の解説

• 質疑応答など

「WAI-ARIA」の「ARIA」は「Accessible Rich Internet Applications」。WAI-ARIAとは、ざっくり言えば「アクセシブルなアプリケーションを作るための仕様」とのこと。HTML5ならすぐにでも実装ができること、様々なアクセシビリティの問題が解決できるので使わないのは勿体無い！というのがポイントでした。

会場が少しどよめいた（ような気がする）機能を挙げておきます。

(1) role="presentation"で要素の意味を消す

例えば、本来tableタグは「表」を意味しますが、それを消してただdivで囲ったのと同じような意味にする属性です。フォームをtableでつくる時などで使います。

他にもh1（見出し）やul（リスト）などほぼ全ての要素に適応できるようです。なんかすごい。

(2) スクリーンリーダーの順序を指定する属性がある

質疑応答タイム？でのお話。CSS3のflexboxみたい？に、htmlの順序に関係なく、指定した順序でスクリーンリーダーに読み上げさせる属性もあるそうです。なんかすごい。どう使うのが良いのか、そもそも使う必要があるのか、実際にスクリーンリーダーを使っている人の声を聞く必要がありそう。

その他

懇親会

今回、私は大阪イベント＆リクリさん初参加でした。懇親会では参加者が意外と少なめで緊張しました。そんな中で優しく接して頂き、皆様の密な話が聞けていろいろな学びがありました。

プロレスや音楽、野球が好きな方が多い感じだったので、そんな方は今後是非参加してみては。まさか、ピアノをやってみたくなるような話が聞けるとは思っていませんでした！

まとめ

どれだけユーザーに喜んでもらえるようなWebコンテンツをつくっても、そもそも情報にアクセス（操作、表示など）できないサイトでは意味がありません。意識してコードを書くだけで、より多くの人がアクセスできるサイトになり得ます。

SEO同様に「正解」はないですが、意識して制作することが大切。せっかく今回学んだので、その知識をデザイン制作の段階から積極的に取り入れて、エンジニアの皆さんとも連携を図っていきたいです。

実際に参加してよかったと思えるイベントでした。名古屋でもまたアクセシビリティ関係のイベントが開催されるという噂なので、そちらも楽しみにしています。