Webアクセシビリティの すすめ 2021/03/24 nori

自己紹介 nori (Twitter: @nori0__) 普段は、フロントエンドエンジニアとして　　　　　Reactで Webアプリを開発しています。 Webサイト アイドルマスターシン デレラガールズ イメージカラー当てクイ ズ 趣味で作ったもの Alexaスキル 豆まきゲーム これまでで約100人 に使って頂きました

今回紹介したい本 デザイニングWebアクセシビリティ - アクセシブルな設計やコンテンツ制作のアプ ローチ https://www.amazon.co.jp/dp/4862462650/ref= cm_sw_r_tw_dp_KZJS6FFWMB35GHYB6HRS

アクセシビリティとは アクセシビリティ 利用状況によらず誰でも使うことが出来る状態であること ユーザビリティ 特定の利用状況、特定のユーザーによる満足度の度合い アクセシビリティを向上させることで ユーザビリティの向上に繋がることがある

アクセシビリティの今　欧米では Webアクセシビリティへの取り組みは企業義務 2019年1月にビヨンセさんのWebサイトがアクセシブルではなかったことで視覚 障害者のファンが運営会社に対し訴訟を起こしている - 画像の代替テキストが設定されていなかったためスクリーンリーダーで読 み上げられなかった https://www.mitsue.co.jp/knowledge/column/20190125.html

アクセシビリティの今　日本では Webアクセシビリティへの取り組みは民間企業では努力義務 - 障害者差別解消法より 2021年1月に障害者の意思疎通を支援する「合理的配慮」の企業義務が了承 された - 障害者差別解消法の改正案を了承 https://www.sankei.com/life/news/210225/lif2102250031-n1.html

Webアクセシビリティに取り組むために いかに自分ごとにするかが重要 - 意識を変える - 試してみる

意識を変える　きっかけ 自分も一時的に使えない状態になる場合がある - 骨折をしてマウス操作が困難になる - 通信速度が遅くて画像が表示されない 過去にWebサイトを使っていて「使いづらいな」と思ったことがある - リンクの行間が狭いため別のリンクに飛んでしまう

意識を変える　書籍を読むと　 「デザイニングWebアクセシビリティ 」を読むと - 昔 (今も) こんな不便なサイトあったなあと思う - 不便さを解消するためにどうすればいいかが書いてある 自分の作るサイトは不便だなと思わせないようにしようと意識する

試してみる　手段 - キーボード操作をしてみる - スクリーンリーダーで読み上げてみる - VoiceOver: Macに入っているスクリーンリーダー - Webサイトのアクセシビリティに問題ないか手軽に確認してみる - Chrome DevToolsでLighthouseを使う - Lighthouse: Webサイトのパフォーマンスや品質を測るツール https://developers.google.com/web/tools/lighthouse

試してみる　Lighthouse 自作のWebサイトでLighthouseを使ってみる Search Query Creatter https://search-query-creatter.web.app/

試してみる　結果　 アクセシビリティのスコア　 89 日付の入力箇所に ラベルがないと　 怒られている

試してみる　スクリーンリーダーで読み上げると　 日付の入力箇所が 何を指しているか　　　 よく分からない

試してみる　補足 Chrome DevToolsのLighthouseはあくまで簡易的なチェックツール もっと詳しく知りたくなったら - WCAG: Webサイトのアクセシビリティに関するガイドライン - https://www.w3.org/WAI/standards-guidelines/wcag/ - WAI-ARIA: アクセシビリティを高めるHTML属性 - https://www.w3.org/WAI/standards-guidelines/aria/

まとめ Webアクセシビリティに取り組む時には いかに自分ごとに出来るかが大事 「デザイニングWebアクセシビリティ - アクセシブルな設計やコンテンツ制作の アプローチ」は意識を変える初めの一歩におすすめ