Webアクセシビリティのすすめ / Web Accessibility Recommendations

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アクセシビリティ - アクセシブルな設計やコンテンツ制作のアプローチ」は意識を変える初めの一歩におすすめ

Webアクセシビリティのすすめ / Web Accessibility Recommendat...

Webアクセシビリティのすすめ / Web Accessibility Recommendations

nori0__

Other Decks in Programming

Featured

Transcript