Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Speaker Deck
PRO
Sign in
Sign up for free
PWA is Progressive Web Accessibility
Okuto Oyama
May 20, 2020
Technology
0
18
PWA is Progressive Web Accessibility
PWA Night vol.16 #PWANight 発表資料
Okuto Oyama
May 20, 2020
Tweet
Share
More Decks by Okuto Oyama
See All by Okuto Oyama
the past and future of accessible front-end development
yamanoku
3
3.7k
PWA RTA in Japan 2020
yamanoku
0
29
Material Designとは何かを知る会
yamanoku
1
640
Other Decks in Technology
See All in Technology
Power BI ”を” 可視化しよう!
hanaseleb
0
140
Poolにおける足を止めないシステム基盤構築
winebarrel
3
610
#BabylonJS5 の祭ツイートまとめ Let's take a look at what people create with the latest #BabylonJS5
chomado
0
540
THETA Xの登場はジオ業界を変えるか?
furuhashilab
0
160
LINEのData Platform室が実践する大規模分散環境のCapacity Planning
line_developers
PRO
0
220
New Features in C# 10/11
chack411
0
620
Power BI Premiumでデータ準備!
hanaseleb
1
180
開発者のための GitHub Organization の安全な運用と 継続的なモニタリング
flatt_security
2
2.4k
完全に理解した incremetal 〜そして、何もわからないへ〜
mashiike
0
200
如何使用 Argo Event& Workflow 快速建置自定義的工作流程 @ #CNTUG #47
line_developers_tw
PRO
0
370
Babylon.js で簡単 WebXR
yuhara0928
1
750
暗号資産ウォレット入門(MetaMaskの入門~NFTの購入~詐欺の注意事項など)
kayato
2
150
Featured
See All Featured
JavaScript: Past, Present, and Future - NDC Porto 2020
reverentgeek
37
3.2k
The Mythical Team-Month
searls
208
39k
10 Git Anti Patterns You Should be Aware of
lemiorhan
638
52k
Gamification - CAS2011
davidbonilla
75
3.9k
Scaling GitHub
holman
451
140k
For a Future-Friendly Web
brad_frost
164
7.4k
Cheating the UX When There Is Nothing More to Optimize - PixelPioneers
stephaniewalter
268
11k
A Tale of Four Properties
chriscoyier
149
20k
Design and Strategy: How to Deal with People Who Don’t "Get" Design
morganepeng
103
16k
The Most Common Mistakes in Cover Letters
jrick
PRO
4
24k
Six Lessons from altMBA
skipperchong
14
1.3k
Robots, Beer and Maslow
schacon
152
7.1k
Transcript
PWA is Progressive Web … ? PWA Night vol.16 #PWANight
Okuto Oyama 2020/05/20 Wed
• CrowdWorks Inc. Front End Engineer • Accessibility Advocator Introduction
Okuto Oyama Twitter @ yamanoku GitHub @ yamanoku
PWA RTA in Japan @ PWA Night CONFERENCE 2020 LT
Reading...
PWA is Progressive Web App
I think so ...
PWA is Progressive Web Accessibility
PWA is Progressive Web Accessibility PWA Night vol.16 #PWANight Okuto
Oyama 2020/05/20 Wed
What is “Web Accessibility” ?
None
None
Accessibility is not for the people with disabilities.
Accessibility is for all people.
Live transcription and captioning in Android are a boon to
the hearing-impaired
こえのブログ by Ameba ブラウザ版先行リリース
Tokyo Metropolitan Government COVID-19 Task Force website
PWA & Web Accessibility
The checklist for making a good PWA from What makes
a good Progressive Web App?
Advantages of the PWA
PWA provide fast loading speed The Offline Cookbook | Web
Fundamentals | Google Developers
• PC ◦ Windows, MacOS, Linux... • Smart Phone ◦
iOS, Android, Samsung... • Tablet • Feature Phone ◦ KaiOS • etc… PWA can work on any device
• HTTPS Only ◦ Not mixed content ◦ Secure Connection
PWA is secure by default
Practice Web Accessibility
Reading about accessibility book
• 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
手触りのよいウェブを考える / better-mobile-web @ PWA Night vol.14
• 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
• Ameba Accessibility Guidelines • freeeアクセシビリティー・ガイドライン ドキュメント • 三井住友銀行Webアクセシビリティガイドライン •
Easy Checks – A First Review of Web Accessibility Check Web Accessibility Guideline
Lot to do ?
“Progressive”
Not 1 or 0, More than !
Start Small, Start Now !
GAAD Japan 2020(2020/05/21 オンライン)
アクセシビリティの祭典 2020 | Web・AI・IoT「障害者集団」が提案する アクセシビリティの近未来
Thanks for asking !
• https://scandiweb.com/blog/improve-website-accessibility-wi th-progressive-web-apps • https://waic.jp/docs/UNDERSTANDING-WCAG20/Overview.html • A11YJ Slack Group References