Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
PWA is Progressive Web Accessibility
Search
Okuto Oyama
May 20, 2020
Technology
0
76
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
転生したらTypeScriptのEnumだった件 ~型安全性とエコシステムの変化で挫けそうになっているんだが~ / TSKaigi 2025
yamanoku
0
11
React 18からのAPI useIDを使おう!/ Let's Use the useID API from React 18
yamanoku
0
41
リアクティブシステムの変遷から理解するalien-signals / Learning alien-signals from the evolution of reactive systems
yamanoku
3
1.3k
ブラウザ互換の重要性 - あらゆるユーザーに価値を届けるために必要なこと
yamanoku
0
230
画面遷移から考えるNuxtアプリケーションをアクセシブルにする方法 / How to make Nuxt applications accessible based on page transitions
yamanoku
0
800
Vue.js でアクセシブルなコンポーネントをつくるために / To make accessible components in Vue.js
yamanoku
0
3.2k
アクセシブルなフロントエンド開発のこれまでとこれから / the past and future of accessible front-end development
yamanoku
3
5.6k
PWA RTA in Japan 2020
yamanoku
0
130
Material Designとは何かを知る会
yamanoku
1
850
Other Decks in Technology
See All in Technology
それでもぼくらは貢献をつづけるのだ(たぶん) @FOSS4GLT会#002
furukawayasuto
1
240
OTel meets Wasm: プラグイン機構としてのWebAssemblyから見る次世代のObservability
lycorptech_jp
PRO
0
200
RDRA3.0を知ろう
kanzaki
2
330
Slackひと声でブログ校正!Claudeレビュー自動化編
yusukeshimizu
3
120
君だけのオリジナル async / await を作ろう / TSKaigi 2025
susisu
17
12k
勘違いから始まったProxmox on ProxmoxでGPUパススルー【JPmoxs勉強会#7】/JPmoxs7_GPU_Passthrough_on_Proxmox_on_Proxmox-A_Journey_That_Started_with_a_Misunderstanding
tsukimi_site
1
180
マップを速く表示するために
tsuboyan5
0
170
会社員しながら本を書いてきた知見の共有
sat
PRO
2
640
Oracle Base Database Service 技術詳細
oracle4engineer
PRO
8
65k
Oracle Database オプティマイザ・ヒントの活用
oracle4engineer
PRO
1
120
データ戦略部門 紹介資料
sansan33
PRO
1
3.1k
VueUseから学ぶ実践TypeScript #TSKaigi #TSKaigi2025
bengo4com
3
5.3k
Featured
See All Featured
How to Create Impact in a Changing Tech Landscape [PerfNow 2023]
tammyeverts
52
2.8k
Connecting the Dots Between Site Speed, User Experience & Your Business [WebExpo 2025]
tammyeverts
1
59
How to Ace a Technical Interview
jacobian
276
23k
Refactoring Trust on Your Teams (GOTO; Chicago 2020)
rmw
34
3k
Scaling GitHub
holman
459
140k
Fight the Zombie Pattern Library - RWD Summit 2016
marcelosomers
233
17k
Code Review Best Practice
trishagee
68
18k
Bootstrapping a Software Product
garrettdimon
PRO
307
110k
Fireside Chat
paigeccino
37
3.5k
How To Stay Up To Date on Web Technology
chriscoyier
790
250k
Build The Right Thing And Hit Your Dates
maggiecrowley
35
2.7k
jQuery: Nuts, Bolts and Bling
dougneiner
63
7.8k
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