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 発表資料

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

    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