ライトニングトーク57回目（新ライトニングトークとして15回目）の今回は、発表者が自由にテーマを用意する「自由テーマ」。フロントエンド開発Teamのメンバーが「アクセシビリティについて意識できるようになって欲しい」と、これまで学んできた知識を紹介してくれました！

ブラウザで確認できるアクセシビリティの情報

アクセシビリティはブラウザで簡単に確認することができます。

• 名前（name）　それぞれの要素を識別するためのもの
• ロール（role）　要素が持つ役割
• コントラスト　色の差

では早速確認していきましょう！

確認方法

日々の業務の中で、コントラスト比について疑問を抱いた際には、この方法で確認しているそうです。

名前とロールがあると何者かわかる

スクリーンリーダーを使用してサイトを閲覧する場合、名前（name）とロール（role）が無いとサイト内の情報がきちんと読み上げられず、ユーザーに正しい情報が伝わりません。

同じように音声コントロールでも、名前（name）が無ければ音声に反応しないといった問題が発生します。

まとめ

今回は、アクセシビリティについて、実際の操作方法を交えてご紹介いただきました。
少しの操作で簡単に確認できるため、「気になったら確認する」という習慣をつけることが大切だと伝えてくださいました。
発表者の方は、コントラスト比の確認にはFirefoxをおすすめしていました。
もしChromeの検証ツールでうまく確認できない場合は、ぜひFirefoxを試してみてはいかがでしょうか？

関連ブログ

アクセシビリティやデザインに関するブログ記事を多数掲載しています。
ぜひ一度ご覧ください。

コントラスト比のチェックにはFirefoxのアクセシビリティインスペクターを使うと良さそう
WebアクセシビリティのガイドラインWCAG 「達成基準3.1.2 一部分の言語」のチェックを一部自動化
North Detailが入るビルでアクセシブラリしてみた（アクセシビリティなものを見つけに街ブラリ）
ユニバーサルデザインに配慮したWebデザインを考える(いろいろな見え方に対応するWebデザイン vol.1)