PWA is Progressive Web Accessibility

PWA Night vol.16 #PWANight 発表資料

Transcript

1. PWA is
   Progressive Web
   … ?
   PWA Night vol.16 #PWANight
   Okuto Oyama
   2020/05/20 Wed
   

   View Slide

2. ● CrowdWorks Inc.
   Front End Engineer
   ● Accessibility Advocator
   Introduction
   Okuto Oyama
   Twitter @ yamanoku
   GitHub @ yamanoku
   

   View Slide

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

   View Slide

4. Reading...
   

   View Slide

5. PWA is
   Progressive Web
   App
   

   View Slide

6. I think so ...
   

   View Slide

7. PWA is
   Progressive Web
   Accessibility
   

   View Slide

8. PWA is
   Progressive Web
   Accessibility
   PWA Night vol.16 #PWANight
   Okuto Oyama
   2020/05/20 Wed
   

   View Slide

9. What is
   “Web Accessibility” ?
   

   View Slide

10. View Slide

11. View Slide

12. Accessibility is not
    for the people
    with disabilities.
    
    

    View Slide

13. Accessibility is
    for all people.
    
    

    View Slide

14. Live transcription and captioning in Android are a boon to the hearing-impaired
    

    View Slide

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

    View Slide

16. Tokyo Metropolitan Government COVID-19 Task Force website
    

    View Slide

17. PWA
    &
    Web Accessibility
    

    View Slide

18. The checklist for making a good PWA
    from What makes a good Progressive Web App?
    

    View Slide

19. Advantages of the PWA
    

    View Slide

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

    View Slide

21. ● PC
    ○ Windows, MacOS, Linux...
    ● Smart Phone
    ○ iOS, Android, Samsung...
    ● Tablet
    ● Feature Phone
    ○ KaiOS
    ● etc…
    PWA can work on any device
    

    View Slide

22. ● HTTPS Only
    ○ Not mixed content
    ○ Secure Connection
    PWA is secure by default
    

    View Slide

23. Practice
    Web Accessibility
    

    View Slide

24. Reading about accessibility book
    

    View Slide

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
    

    View Slide

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

    View Slide

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
    

    View Slide

28. ● Ameba Accessibility Guidelines
    ● freeeアクセシビリティー・ガイドライン ドキュメント
    ● 三井住友銀行Webアクセシビリティガイドライン
    ● Easy Checks – A First Review of Web Accessibility
    Check Web Accessibility Guideline
    

    View Slide

29. Lot to do ?
    
    

    View Slide

30. “Progressive”
    
    

    View Slide

31. Not 1 or 0,
    More than !
    
    

    View Slide

32. Start Small, Start Now !
    
    

    View Slide

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

    View Slide

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

    View Slide

35. Thanks for asking !
    
    

    View Slide

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
    

    View Slide