Upgrade to Pro — share decks privately, control downloads, hide ads and more …

PWA is Progressive Web Accessibility

D65ac1a4aacb7a449bb61cef10fb7143?s=47 Okuto Oyama
May 20, 2020
Technology
0
18

PWA is Progressive Web Accessibility

PWA Night vol.16 #PWANight 発表資料

D65ac1a4aacb7a449bb61cef10fb7143?s=128

Okuto Oyama

May 20, 2020
Tweet

More Decks by Okuto Oyama

See All by Okuto Oyama
the past and future of accessible front-end development
D65ac1a4aacb7a449bb61cef10fb7143?s=48 yamanoku
3
3.7k
PWA RTA in Japan 2020
D65ac1a4aacb7a449bb61cef10fb7143?s=48 yamanoku
0
29
Material Designとは何かを知る会
D65ac1a4aacb7a449bb61cef10fb7143?s=48 yamanoku
1
640

Other Decks in Technology

See All in Technology
Power BI ”を” 可視化しよう！
0cc2ebc5781bcb2cae5f9ab7efa40ff2?s=48 hanaseleb
0
140
Poolにおける足を止めないシステム基盤構築
F811665799e1139b63140b72f3e8631f?s=48 winebarrel
3
610
#BabylonJS5 の祭ツイートまとめ Let's take a look at what people create with the latest #BabylonJS5
617bd4a28ec6cbc877c752a1b4e29e58?s=48 chomado
0
540
THETA Xの登場はジオ業界を変えるか？
5314ec2302336bf68c95bdb5b1476227?s=48 furuhashilab
0
160
LINEのData Platform室が実践する大規模分散環境のCapacity Planning
A3966f193f4bef226a0d3e3c1f728d7f?s=48 line_developers
PRO
0
220
New Features in C# 10/11
1c3658db58f755e44fc1a70255c08ff7?s=48 chack411
0
620
Power BI Premiumでデータ準備！
0cc2ebc5781bcb2cae5f9ab7efa40ff2?s=48 hanaseleb
1
180
開発者のための GitHub Organization の安全な運用と 継続的なモニタリング
9b565bcc5e776225de62be25cc30f97f?s=48 flatt_security
2
2.4k
完全に理解した　incremetal　〜そして、何もわからないへ〜
F40e385e485eafaed67850df08b122d0?s=48 mashiike
0
200
如何使用 Argo Event& Workflow 快速建置自定義的工作流程 @ #CNTUG #47
2102a6b8760bd6f57f672805723dd83a?s=48 line_developers_tw
PRO
0
370
Babylon.js で簡単 WebXR
B8a848a5d23adf51f4f5373da52c2804?s=48 yuhara0928
1
750
暗号資産ウォレット入門（MetaMaskの入門～NFTの購入～詐欺の注意事項など）
37f853c24b8c02fed3bc1b4dee46bf3e?s=48 kayato
2
150

Featured

See All Featured
JavaScript: Past, Present, and Future - NDC Porto 2020
3ab1249be442027903e1180025340b3f?s=48 reverentgeek
37
3.2k
The Mythical Team-Month
E6c6e133e74c3b83f04d2861deaa1c20?s=48 searls
208
39k
10 Git Anti Patterns You Should be Aware of
Dafc4723e9a1c067796c0fec6f509774?s=48 lemiorhan
638
52k
Gamification - CAS2011
4394ceb8b277f35ee3da7030384efb5d?s=48 davidbonilla
75
3.9k
Scaling GitHub
78b475797a14c84799063c7cd073962f?s=48 holman
451
140k
For a Future-Friendly Web
F68cb25ae3e5c2106997454b13b7737d?s=48 brad_frost
164
7.4k
Cheating the UX When There Is Nothing More to Optimize - PixelPioneers
F383c6a4dc55e331bbe2987b622cee6b?s=48 stephaniewalter
268
11k
A Tale of Four Properties
8081b26e05bb4354f7d65ffc34cbbd67?s=48 chriscoyier
149
20k
Design and Strategy: How to Deal with People Who Don’t "Get" Design
95d9f37115fbb0d13135d0f77132f856?s=48 morganepeng
103
16k
The Most Common Mistakes in Cover Letters
1ce0eb06fd6a9e9566a0cb310cfee635?s=48 jrick
PRO
4
24k
Six Lessons from altMBA
766b9746b59e6f09e280cd33cf4ed419?s=48 skipperchong
14
1.3k
Robots, Beer and Maslow
9375a9529679f1b42b567a640d775e7d?s=48 schacon
152
7.1k

Transcript

  1. PWA is Progressive Web … ? PWA Night vol.16 #PWANight

    Okuto Oyama 2020/05/20 Wed

  2. • CrowdWorks Inc. Front End Engineer • Accessibility Advocator Introduction

    Okuto Oyama Twitter @ yamanoku GitHub @ yamanoku

  3. PWA RTA in Japan @ PWA Night CONFERENCE 2020 LT

  4. Reading...

  5. PWA is Progressive Web App

  6. I think so ...

  7. PWA is Progressive Web Accessibility

  8. PWA is Progressive Web Accessibility PWA Night vol.16 #PWANight Okuto

    Oyama 2020/05/20 Wed

  9. What is “Web Accessibility” ?

  10. None
  11. None

  12. Accessibility is not for the people with disabilities.

  13. Accessibility is for all people.

  14. Live transcription and captioning in Android are a boon to

    the hearing-impaired

  15. こえのブログ by Ameba ブラウザ版先行リリース

  16. Tokyo Metropolitan Government COVID-19 Task Force website

  17. PWA & Web Accessibility

  18. The checklist for making a good PWA from What makes

    a good Progressive Web App?

  19. Advantages of the PWA

  20. PWA provide fast loading speed The Offline Cookbook | Web

    Fundamentals | Google Developers

  21. • PC ◦ Windows, MacOS, Linux... • Smart Phone ◦

    iOS, Android, Samsung... • Tablet • Feature Phone ◦ KaiOS • etc… PWA can work on any device

  22. • HTTPS Only ◦ Not mixed content ◦ Secure Connection

    PWA is secure by default

  23. Practice Web Accessibility

  24. Reading about accessibility book

  25. • Perceivable ◦ you know what it is. • Operable

    ◦ you can control it yourself. • Understandable ◦ you know what to do. • Robust ◦ It’s safe to use for any UA. The Four Principles of Accessibility

  26. 手触りのよいウェブを考える / better-mobile-web @ PWA Night vol.14

  27. • Timing Adjustable ◦ Session Timeout • Error Identification ◦

    Validation • Error Prevention (Legal, Financial, Data) ◦ Reset submit value • Error Suggestion ◦ Easily fix to form errors Accessibility check of server side

  28. • Ameba Accessibility Guidelines • freeeアクセシビリティー・ガイドライン ドキュメント • 三井住友銀行Webアクセシビリティガイドライン •

    Easy Checks – A First Review of Web Accessibility Check Web Accessibility Guideline

  29. Lot to do ?

  30. “Progressive”

  31. Not 1 or 0, More than !

  32. Start Small, Start Now !

  33. GAAD Japan 2020（2020/05/21 オンライン）

  34. アクセシビリティの祭典 2020 | Web・AI・IoT「障害者集団」が提案する アクセシビリティの近未来

  35. Thanks for asking !

  36. • https://scandiweb.com/blog/improve-website-accessibility-wi th-progressive-web-apps • https://waic.jp/docs/UNDERSTANDING-WCAG20/Overview.html • A11YJ Slack Group References