Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Sign up for free
Menu
Search
Features
All features
Private URLs
Password Protection
Custom URLS
Scheduled publishing
Remove Branding
Restrict embedding
Deck Collections
Notes
Features
All features
Private URLs
Password Protection
Custom URLS
Scheduled publishing
Remove Branding
Restrict embedding
Deck Collections
Notes
Explore
Featured decks
Featured speakers
Programming
Technology
Storyboards
Explore
Featured decks
Featured speakers
Programming
Technology
Storyboards
Pricing
Search
Sign in
Sign up for free
アクセシビリティ in 令和
Search
defunty
December 04, 2019
Programming
44
0
Share
Embed
Copy iframe code
Copy JS code
Copy link
Start on current slide
アクセシビリティ in 令和
2019/12/4に開催した社内向けLT会資料を社外向けに編集したものです。
defunty
December 04, 2019
More Decks by defunty
See All by defunty
プライベートコンテンツのHLS配信 with CloudFront
defunty
0
370
SPAでの認証方法に関するマサカリぶん投げ会場はこちらです
defunty
0
1.1k
CSS Module・CSS in JS抗争の過去と現在
defunty
1
240
Other Decks in Programming
See All in Programming
phperだってパンチカードでコーディングしたい
o0h
PRO
0
330
Simple Storage Service(S3) is not simple
iwatsukayura
0
290
ジョジョの世界をXRで再現する
mofurune
0
160
現場と育てるRailsモデリング 〜Spreadsheetから始めたモデル設計〜
siroemk
2
590
作って学ぶSpring BootのAuto Configuration / JJUG Night Seminar 2026-10-19
rshindo
0
140
HTML-in-Canvasで作る未来のWeb UI表現
clockmaker
5
5.1k
作れる、でも消せるか?──安全に「枯らして消す」機能削除術 / Drain, Then Delete
chobishiba
2
640
動作中のプログラムの中身をリアルタイムに覗く / Realtime Debugger for CSharp with Roslyn
prota
1
1.9k
AWS CDKのカスタムリソースでContinuum(旧Security Agent)を実装した話 | Implementing Continuum (formerly Security Agent) via AWS CDK Custom Resource
akihisaikeda
2
150
當我們開始不讀 Code - AI Agent 時代,Code Review 與 Clean Code 還剩下什麼?
jame2408
1
200
全ての永続トークンを、生まれる前に消し去りたい!
sylph01
2
880
UnityでSystem.Net.WebSocketsなWebSocketサーバが動かないのでUnity Monoのコードを覗いてみた / about implementing websocket server with unity mono
drumath2237
1
610
Featured
See All Featured
Lightning Talk: Beautiful Slides for Beginners
inesmontani
PRO
2
730
A better future with KSS
kneath
240
18k
StorybookのUI Testing Handbookを読んだ
zakiyama
31
7k
Darren the Foodie - Storyboard
khoart
PRO
4
4k
Easily Structure & Communicate Ideas using Wireframe
afnizarnur
194
17k
Agile Leadership in an Agile Organization
kimpetersen
PRO
0
280
Rebuilding a faster, lazier Slack
samanthasiow
85
9.7k
Paper Plane (Part 1)
katiecoart
PRO
2
12k
So, you think you're a good person
axbom
PRO
2
2.2k
Scaling GitHub
holman
464
140k
The Anti-SEO Checklist Checklist. Pubcon Cyber Week
ryanjones
0
270
WENDY [Excerpt]
tessaabrams
14
40k
Transcript
アクセシビリティ in 令和
アクセシビリティについてどう思ってますか? 『アクセシビリティとか聞いたことないんだけど?』 『知ってる、古代のSEO対策でしょ(笑)』 『うちのサービスはターゲットが違うから必要ない』
Webアクセシビリティとは?(1) W3Cの創始者 ティム・バーナーズ=リー氏いわく...... The power of the Web is in
its universality. Access by everyone regardless of disability is an essential aspect. Tim Berners-Lee, W3C Director and inventor of the World Wide Web Webのパワーは、その普遍性にある。障害の有無に関係なく、誰もが使えることが、そ の本質である。
Webアクセシビリティとは?(2) W3CはHTMLをセマンティックに書くことを推奨している。 セマンティックに書くことで、Botがコンテンツの内容を正しく認識し、検索エンジンの検索 結果に反映される。 HTMLがセマンティックに書かれていなければ、スクリーンリーダー(読み上げブラウザ) での利用が困難になる。
Webアクセシビリティとは?(3) 例えば...... buttonの代わりにdivタグを利用した場合、プログラムにはそのdivタグが「押せる」という ことを認識できない どうすれば良い? Web標準で(セマンティックに)書けば良い。 それで解決できない問題は科学が悪い。科学の発展を待つ。
近年のアクセシビリティの考え方(1) ・小さめのタブレットでもPC表示でサイトを見る人(PC用サイト表示機能) ・横になりながらスマホを使っている人(画面方向の固定機能) ・ランニング中で手がふさがっている人(読み上げ機能) ・小さな子供(簡単な文章) ・トラックパッドやマウスが使えない環境(キーボードでのブラウザ操作) ・静かな場所で動画を見たい人(ライブキャプション)
近年のアクセシビリティの考え方(2) 「障害者向け・高齢者向けのための対策」という考え方は古い アクセシビリティとは、 利用背景に関わらず、 ユーザーがベストな形で、 コンテンツを公平に受けとるための、 UXの根本的な考え方
アクセシビリティは全人類のためにある
近年のアクセシビリティの考え方(3) モバイルではメニューを画面下に表示すべき理由 人事労務freee、年末調整をスクリーンリーダーで利用可能。画面内の項目を音声で読 み上げて操作が可能に Google I/Oはアクセシビリティ強化に全力、聴覚障害者にも電車でYouTubeを見るにも 便利 Auditing Web Content
with Web Inspector - WWDC 2019 - Videos - Apple Developer
あとがき 乱視の人には「黒背景・白文字」よりも「白背景・黒文字」の方が見やすい、という研究結 果が出ています。 UIデザインで白背景にするか黒背景にするかを決める時に参考になる科学的事実
あとがき デザイン的に引き締まって見えるから良いよね? アクセシビリティは一つの考え方。 何も考えずに「アクセシビリティ絶対に守る!」は失敗のもと。 アクセシビリティのエッセンスを有効活用して、みんなが使いやすいサービスを作ってい こう!