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

PWA is Progressive Web Accessibility

PWA is Progressive Web Accessibility

PWA Night vol.16 #PWANight 発表資料

D65ac1a4aacb7a449bb61cef10fb7143?s=128

Okuto Oyama

May 20, 2020
Tweet

More Decks by Okuto Oyama

Other Decks in Technology

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