Upgrade to PRO for Only $50/Year—Limited-Time Offer! 🔥

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

Avatar for nori0__ nori0__
March 24, 2021
Programming
1
21k

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

イベント:
https://rakus.connpass.com/event/204979/
Google Slide:
https://docs.google.com/presentation/d/1URbLv9GGvcGaLf57eDpZV2uxeVB1Uub4ShUIP3ze1KM/edit?usp=sharing

Avatar for nori0__

nori0__

March 24, 2021
Tweet

Other Decks in Programming

See All in Programming
認証・認可の基本を学ぼう後編
Avatar for kaza kouyuume
0
240
Rediscover the Console - SymfonyCon Amsterdam 2025
Avatar for Robin Chalas chalasr
2
170
実は歴史的なアップデートだと思う AWS Interconnect - multicloud
Avatar for maroon1st maroon1st
0
210
Context is King？ 〜Verifiability時代とコンテキスト設計 / Beyond "Context is King"
Avatar for r-kagaya rkaga
10
1.3k
Developing static sites with Ruby
Avatar for Masafumi Okura okuramasafumi
0
300
非同期処理の迷宮を抜ける: 初学者がつまづく構造的な原因
Avatar for PADAone pd1xx
1
720
認証・認可の基本を学ぼう前編
Avatar for kaza kouyuume
0
250
「コードは上から下へ読むのが一番」と思った時に、思い出してほしい話
Avatar for HideyukiKitao panda728
PRO
38
26k
dotfiles 式年遷宮 令和最新版
Avatar for masawada masawada
1
780
Canon EOS R50 V と R5 Mark II 購入でみえてきた最近のデジイチ VR180 事情、そして VR180 静止画に活路を見出すまで
Avatar for kazuhiro hara karad
0
120
著者と進める！『AIと個人開発したくなったらまずCursorで要件定義だ！』
Avatar for yasuna yasunacoffee
0
140
AIコードレビューがチームの"文脈"を 読めるようになるまで
Avatar for Takumi Maruyama marutaku
0
360

Featured

See All Featured
Building a Modern Day 
E-commerce SEO Strategy
Avatar for Aleyda Solis aleyda
45
8.3k
個人開発の失敗を避けるイケてる考え方 / tips for indie hackers
Avatar for panda_program panda_program
122
21k
GraphQLとの向き合い方2022年版
Avatar for Yosuke Kurami quramy
50
14k
Why Our Code Smells
Avatar for Brandon Keepers bkeepers
PRO
340
57k
Performance Is Good for Brains [We Love Speed 2024]
Avatar for Tammy Everts tammyeverts
12
1.3k
The Straight Up "How To Draw Better" Workshop
Avatar for Dennis Kardys denniskardys
239
140k
Fight the Zombie Pattern Library - RWD Summit 2016
Avatar for Marcelo Somers marcelosomers
234
17k
Distributed Sagas: A Protocol for Coordinating Microservices
Avatar for Caitie McCaffrey caitiem20
333
22k
Java REST API Framework Comparison - PWX 2021
Avatar for Matt Raible mraible
34
9k
The Art of Programming - Codeland 2020
Avatar for Erika Heidi erikaheidi
56
14k
Dealing with People You Can't Stand - Big Design 2015
Avatar for Cassini Nazir cassininazir
367
27k
Visualizing Your Data: Incorporating Mongo into Loggly Infrastructure
Avatar for mongodb mongodb
48
9.8k

Transcript

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

  2. 自己紹介 nori (Twitter: @nori0__) 普段は、フロントエンドエンジニアとして　　　　　Reactで Webアプリを開発しています。 Webサイト アイドルマスターシン デレラガールズ イメージカラー当てクイ

    ズ 趣味で作ったもの Alexaスキル 豆まきゲーム これまでで約100人 に使って頂きました

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

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

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

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

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

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

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

  10. 試してみる　手段 - キーボード操作をしてみる - スクリーンリーダーで読み上げてみる - VoiceOver: Macに入っているスクリーンリーダー - Webサイトのアクセシビリティに問題ないか手軽に確認してみる

    - Chrome DevToolsでLighthouseを使う - Lighthouse: Webサイトのパフォーマンスや品質を測るツール https://developers.google.com/web/tools/lighthouse

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

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

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

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

    WAI-ARIA: アクセシビリティを高めるHTML属性 - https://www.w3.org/WAI/standards-guidelines/aria/

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