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
63
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
ブラウザ互換の重要性 - あらゆるユーザーに価値を届けるために必要なこと
yamanoku
0
180
画面遷移から考えるNuxtアプリケーションをアクセシブルにする方法 / How to make Nuxt applications accessible based on page transitions
yamanoku
0
730
Vue.js でアクセシブルなコンポーネントをつくるために / To make accessible components in Vue.js
yamanoku
0
3.1k
アクセシブルなフロントエンド開発のこれまでとこれから / the past and future of accessible front-end development
yamanoku
3
5.5k
PWA RTA in Japan 2020
yamanoku
0
110
Material Designとは何かを知る会
yamanoku
1
820
Other Decks in Technology
See All in Technology
Autify Company Deck
autifyhq
2
41k
Agentic AI時代のプロダクトマネジメントことはじめ〜仮説検証編〜
masakazu178
3
390
Makuake*UPSIDER_LightningTalk
upsider_tech
0
200
ソフトウェアアーキテクトのための意思決定術: Software Architecture and Decision-Making
snoozer05
PRO
17
4k
プロダクト価値を引き上げる、「課題の再定義」という習慣
moeka__c
0
210
MCP server を作って Claude Desktop アプリから kintone へアクセスすると楽しい
r3_yamauchi
PRO
1
120
ソフトウェア開発現代史:製造業とソフトウェアは本当に共存できていたのか?品質とスピードを問い直す
takabow
15
5.3k
企業テックブログにおける執筆ネタの考え方・見つけ方・広げ方 / How to Think of, Find, and Expand Writing Topics for Corporate Tech Blogs
honyanya
0
810
プロダクト開発、インフラ、コーポレート、そしてAIとの共通言語としての Terraform / Terraform as a Common Language for Product Development, Infrastructure, Corporate Engineering, and AI
yuyatakeyama
6
1.6k
Site Reliability Engineering on Kubernetes
nwiizo
6
4.4k
業務ツールをAIエージェントとつなぐ - Composio
knishioka
0
110
Skip Skip Run Run Run ♫
temoki
0
360
Featured
See All Featured
What's in a price? How to price your products and services
michaelherold
244
12k
We Have a Design System, Now What?
morganepeng
51
7.4k
Product Roadmaps are Hard
iamctodd
PRO
50
11k
Speed Design
sergeychernyshev
25
760
Stop Working from a Prison Cell
hatefulcrawdad
267
20k
Raft: Consensus for Rubyists
vanstee
137
6.7k
The MySQL Ecosystem @ GitHub 2015
samlambert
250
12k
How to Think Like a Performance Engineer
csswizardry
22
1.3k
A Tale of Four Properties
chriscoyier
157
23k
YesSQL, Process and Tooling at Scale
rocio
171
14k
Docker and Python
trallard
43
3.2k
The Straight Up "How To Draw Better" Workshop
denniskardys
232
140k
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