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
20260528_生成AIを専属DSに_Howの次にすべきことを考える
doradora09
PRO
0
230
Spring AI × MCP 入門〜AIエージェントへのツール公開、境界設計から始める最小構成 〜
yuyamiyamoto
0
150
JICUG あなたのAI駆動開発パートナー IBM Bob を使ったアプリ開発
1ftseabass
PRO
0
110
テストコードのないプロジェクトにテストを根付かせる
tttol
0
220
基礎から解説!Icebergで紐解くSnowflake×Databricks連携の現在地
cm_yasuhara
0
350
Sony_KMP_Journey_KotlinConf2026
sony
0
130
Datadog 認定試験の概要と対策
uechishingo
0
140
AI時代の私の技術インプットとアウトプット術
tonkotsuboy_com
15
7.5k
AI駆動開発でなんでもハンズオン環境をつくってみた
yoshimi0227
0
160
Agentic AI時代における メルカリのAIガバナンスとガードレール実装
naoichihara
16
16k
Spring Boot における AOT Cache 活用テクニックと 起動時間改善事例
ntt_dsol_java
0
160
権限管理設計を完全に理解した
rsugi
2
220
Featured
See All Featured
Keith and Marios Guide to Fast Websites
keithpitt
413
23k
What Being in a Rock Band Can Teach Us About Real World SEO
427marketing
0
240
ラッコキーワード サービス紹介資料
rakko
1
3.4M
How to Talk to Developers About Accessibility
jct
2
210
4 Signs Your Business is Dying
shpigford
187
22k
Save Time (by Creating Custom Rails Generators)
garrettdimon
PRO
32
3.2k
Leo the Paperboy
mayatellez
7
1.8k
Building Experiences: Design Systems, User Experience, and Full Site Editing
marktimemedia
0
510
Art, The Web, and Tiny UX
lynnandtonic
304
21k
RailsConf & Balkan Ruby 2019: The Past, Present, and Future of Rails at GitHub
eileencodes
141
35k
Agile that works and the tools we love
rasmusluckow
331
21k
No one is an island. Learnings from fostering a developers community.
thoeni
21
3.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