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
93
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
520
転生したらTypeScriptのEnumだった件 ~型安全性とエコシステムの変化で挫けそうになっているんだが~ / TSKaigi 2025
yamanoku
0
32
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
310
画面遷移から考える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
学術的根拠から読み解くNotebookLMの音声活用法
shukob
0
490
一億総業務改善を支える社内AIエージェント基盤の要諦
yukukotani
1
240
[続・営業向け 誰でも話せるOCI セールストーク] AWSよりOCIの優位性が分からない編(2025年11月21日開催)
oracle4engineer
PRO
1
130
クラスタ統合リアーキテクチャ全貌~1,000万ユーザーのウェルネスSaaSを再設計~
hacomono
PRO
0
190
Data Hubグループ 紹介資料
sansan33
PRO
0
2.3k
AI自動ペンテスト「RapidPen」ご紹介資料
laysakura
0
110
都市スケールAR制作で気をつけること
segur
0
200
『ソフトウェア』で『リアル』を動かす:クレーンゲームからデータ基盤までの統一アーキテクチャ / アーキテクチャConference 2025
genda
0
1.2k
"'TSのAPI型安全”の対価は誰が払う?不公平なスキーマ駆動に終止符を打つハイブリッド戦略
hal_spidernight
0
180
IaC を使いたくないけどポリシー管理をどうにかしたい
kazzpapa3
1
170
Bedrock のコスト監視設計
fohte
2
230
命名から始めるSpec Driven
kuruwic
0
130
Featured
See All Featured
The Cost Of JavaScript in 2023
addyosmani
55
9.3k
Six Lessons from altMBA
skipperchong
29
4.1k
Measuring & Analyzing Core Web Vitals
bluesmoon
9
680
Building a Scalable Design System with Sketch
lauravandoore
463
34k
Being A Developer After 40
akosma
91
590k
StorybookのUI Testing Handbookを読んだ
zakiyama
31
6.4k
GraphQLの誤解/rethinking-graphql
sonatard
73
11k
Raft: Consensus for Rubyists
vanstee
140
7.2k
Scaling GitHub
holman
464
140k
Product Roadmaps are Hard
iamctodd
PRO
55
12k
The Power of CSS Pseudo Elements
geoffreycrofte
80
6.1k
Build The Right Thing And Hit Your Dates
maggiecrowley
38
2.9k
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