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
110
0
Share
PWA is Progressive Web Accessibility
PWA Night vol.16 #PWANight 発表資料
Okuto Oyama
May 20, 2020
More Decks by Okuto Oyama
See All by Okuto Oyama
Navigation APIと見るSvelteKitのWeb標準志向
yamanoku
2
180
Shifting from MCP to Skills / ベストプラクティスの変遷を辿る
yamanoku
5
1k
SchooでVue.js/Nuxtを技術選定している理由
yamanoku
4
8.7k
たかがボタン、されどボタン ~button要素から深ぼるボタンUIの定義について~ / BuriKaigi 2026
yamanoku
1
450
ひとりNavigation API Advent Calendarの紹介 / Mita.ts #9
yamanoku
1
180
DenoとJSRで実現する最速MCPサーバー開発記 / Building MCP Servers at Lightning Speed with Deno and JSR
yamanoku
2
660
転生したらTypeScriptのEnumだった件 ~型安全性とエコシステムの変化で挫けそうになっているんだが~ / TSKaigi 2025
yamanoku
0
70
React 18からのAPI useIDを使おう!/ Let's Use the useID API from React 18
yamanoku
0
180
リアクティブシステムの変遷から理解するalien-signals / Learning alien-signals from the evolution of reactive systems
yamanoku
3
2k
Other Decks in Technology
See All in Technology
DI コンテナ自動生成ツールを実装してみた / intro-autodi
uhzz
0
870
layerx-fde-practices
cipepser
6
2.8k
eBPF Can Do It! A 5-Minute Tour of 5 Real-World PHP Issues Solved with eBPF
egmc
0
310
情シスがMCP環境導入時に打ちのめされる認可の崖
oidfj
0
730
まだ道半ば、AI-DLCを歩み始めている話
news_it_enj
2
210
Spring AI × MCP 入門〜AIエージェントへのツール公開、境界設計から始める最小構成 〜
yuyamiyamoto
0
150
ITエンジニアを取り巻く環境とキャリアパス / A career path for Japanese IT engineers
takatama
4
1.8k
AI とサービス・デザイン / AI and Service Design
ks91
PRO
0
180
Oracle Cloud Infrastructure:2026年5月度サービス・アップデート
oracle4engineer
PRO
1
200
OpenID Connectによるサービス間連携
takesection
0
130
LLM時代のリファクタリング戦略_AIエージェントによる段階的・安全なTS移行方法
play_inc
0
330
権限管理設計を完全に理解した
rsugi
2
220
Featured
See All Featured
HU Berlin: Industrial-Strength Natural Language Processing with spaCy and Prodigy
inesmontani
PRO
0
390
How to Talk to Developers About Accessibility
jct
2
210
Rails Girls Zürich Keynote
gr2m
96
14k
Navigating Team Friction
lara
192
16k
Build The Right Thing And Hit Your Dates
maggiecrowley
39
3.1k
The Impact of AI in SEO - AI Overviews June 2024 Edition
aleyda
5
1.1k
B2B Lead Gen: Tactics, Traps & Triumph
marketingsoph
0
130
GraphQLとの向き合い方2022年版
quramy
50
15k
Typedesign – Prime Four
hannesfritz
42
3k
Amusing Abliteration
ianozsvald
1
180
Building AI with AI
inesmontani
PRO
1
1k
HDC tutorial
michielstock
2
680
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