$30 off During Our Annual Pro Sale. View Details »
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
97
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
DenoとJSRで実現する最速MCPサーバー開発記 / Building MCP Servers at Lightning Speed with Deno and JSR
yamanoku
2
530
転生したらTypeScriptのEnumだった件 ~型安全性とエコシステムの変化で挫けそうになっているんだが~ / TSKaigi 2025
yamanoku
0
39
React 18からのAPI useIDを使おう!/ Let's Use the useID API from React 18
yamanoku
0
120
リアクティブシステムの変遷から理解するalien-signals / Learning alien-signals from the evolution of reactive systems
yamanoku
3
1.8k
ブラウザ互換の重要性 - あらゆるユーザーに価値を届けるために必要なこと
yamanoku
0
320
画面遷移から考えるNuxtアプリケーションをアクセシブルにする方法 / How to make Nuxt applications accessible based on page transitions
yamanoku
0
890
Vue.js でアクセシブルなコンポーネントをつくるために / To make accessible components in Vue.js
yamanoku
0
3.3k
アクセシブルなフロントエンド開発のこれまでとこれから / the past and future of accessible front-end development
yamanoku
3
5.8k
PWA RTA in Japan 2020
yamanoku
0
140
Other Decks in Technology
See All in Technology
Gemini でコードレビュー知見を見える化
zozotech
PRO
1
240
研究開発×プロダクトマネジメントへの挑戦 / ly_mlpm_meetup
sansan_randd
0
100
品質のための共通認識
kakehashi
PRO
3
230
re:Invent 2025 ふりかえり 生成AI版
takaakikakei
1
190
Reinforcement Fine-tuning 基礎〜実践まで
ch6noota
0
160
打 造 A I 驅 動 的 G i t H u b ⾃ 動 化 ⼯ 作 流 程
appleboy
0
220
WordPress は終わったのか ~今のWordPress の制作手法ってなにがあんねん?~ / Is WordPress Over? How We Build with WordPress Today
tbshiki
1
600
re:Inventで気になったサービスを10分でいけるところまでお話しします
yama3133
1
120
AIと二人三脚で育てた、個人開発アプリグロース術
zozotech
PRO
1
700
AWSを使う上で最低限知っておきたいセキュリティ研修を社内で実施した話 ~みんなでやるセキュリティ~
maimyyym
2
240
AWS Trainium3 をちょっと身近に感じたい
bigmuramura
1
130
eBPFとwaruiBPF
sat
PRO
4
2.5k
Featured
See All Featured
The World Runs on Bad Software
bkeepers
PRO
72
12k
Building Flexible Design Systems
yeseniaperezcruz
330
39k
Art, The Web, and Tiny UX
lynnandtonic
303
21k
Dealing with People You Can't Stand - Big Design 2015
cassininazir
367
27k
Exploring the Power of Turbo Streams & Action Cable | RailsConf2023
kevinliebholz
36
6.2k
Git: the NoSQL Database
bkeepers
PRO
432
66k
Refactoring Trust on Your Teams (GOTO; Chicago 2020)
rmw
35
3.3k
Building a Modern Day E-commerce SEO Strategy
aleyda
45
8.3k
Six Lessons from altMBA
skipperchong
29
4.1k
Thoughts on Productivity
jonyablonski
73
5k
Testing 201, or: Great Expectations
jmmastey
46
7.8k
Understanding Cognitive Biases in Performance Measurement
bluesmoon
32
2.7k
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