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
みんなにやさしいウェブサイト
Search
yuzneri
April 20, 2025
Programming
1
120
みんなにやさしいウェブサイト
2025年4月21日
Toranomon Tech Hub 第三回 技術異種格闘技戦〜好きな技術LT大会〜
yuzneri
April 20, 2025
Tweet
Share
More Decks by yuzneri
See All by yuzneri
PHPUnitの限界をPlaywrightで補完するテストアプローチ
yuzneri
0
490
技術同人誌を書いてみよう!
yuzneri
1
46
Other Decks in Programming
See All in Programming
Advance Your Career with Open Source
ivargrimstad
0
180
VisionFrameworkで実現する - プライバシーに配慮した「顔ぼかし」機能 / Face blurring with Vision Framework
imaizume
0
180
Back to the Future: Let me tell you about the ACP protocol
terhechte
0
120
2分台で1500examples完走!爆速CIを支える環境構築術 - Kaigi on Rails 2025
falcon8823
3
2.3k
Repenser les filtres API Platform: une nouvelle syntaxe
vinceamstoutz
2
150
麻雀点数計算問題生成タスクから学ぶ Single Agentの限界と Agentic Workflowの底力
po3rin
5
2k
ポスターセッション: 「まっすぐ行って、右!」って言ってラズパイカーを動かしたい 〜生成AI × Raspberry Pi Pico × Gradioの試作メモ〜
komofr
0
750
GraphQL×Railsアプリのデータベース負荷分散 - 月間3,000万人利用サービスを無停止で
koxya
1
940
iOSエンジニア向けの英語学習アプリを作る!
yukawashouhei
0
160
Conquering Massive Traffic Spikes in Ruby Applications with Pitchfork
riseshia
0
130
プロダクト開発をAI 1stに変革する〜SaaS is dead時代で生き残るために〜 / AI 1st Product Development
kobakei
0
440
Pull-Requestの内容を1クリックで動作確認可能にするワークフロー
natmark
1
310
Featured
See All Featured
Why You Should Never Use an ORM
jnunemaker
PRO
59
9.5k
"I'm Feeling Lucky" - Building Great Search Experiences for Today's Users (#IAC19)
danielanewman
229
22k
Responsive Adventures: Dirty Tricks From The Dark Corners of Front-End
smashingmag
252
21k
Docker and Python
trallard
46
3.6k
How to Think Like a Performance Engineer
csswizardry
27
2k
How STYLIGHT went responsive
nonsquared
100
5.8k
StorybookのUI Testing Handbookを読んだ
zakiyama
31
6.2k
実際に使うSQLの書き方 徹底解説 / pgcon21j-tutorial
soudai
PRO
188
55k
JavaScript: Past, Present, and Future - NDC Porto 2020
reverentgeek
52
5.6k
KATA
mclloyd
32
14k
Measuring & Analyzing Core Web Vitals
bluesmoon
9
600
CSS Pre-Processors: Stylus, Less & Sass
bermonpainter
358
30k
Transcript
みんなにやさしい ウェブサイト 2025年4⽉21⽇ Toranomon Tech Hub 第三回 技術異種格闘技戦〜好きな技術LT⼤会〜
ゆずねり (X: @yuzuneri) •お仕事 •Webバックエンドたま にフロントエンジニア •趣味 •ドール、ポーカー、交 錯員 2025/4/21
2
アジェンダ 1. やさしいウェブサイトとは 2. ウェブアクセシビリティの基本 3. まとめ 2025/4/21 3
やさしいウェブサイトとは
バリア‐フリー〘名〙(英barrier-free) ⽼齢者、障害者、妊婦、⼦どもなどの⽣活弱者に不都合 な障害がないこと。だれもが安全で快適に⽣活できる環 境、状態であること。また、そのさま。道や床などの段 差をなくしたり、階段をなくしてゆるやかなスロープに して⼿すりをつけるなどは、そのような環境の実現のた めの事例であるが、物理的なものに限らず、⽂化‧情報、 制度、⼈々の意識についても同じことがいえる。(精選 版 ⽇本国語⼤辞典)
2025/4/21 5
誰でも使えるのがWebの本質 •ウェブの⼒はその普遍性にある。障害の有無に かかわらず、誰もがアクセスできることは不可 ⽋な要素である。 (ティム‧バーナーズ= リー) https://www.w3.org/ja/mission/accessibility/ 2025/4/21 6
ウェブサイトの重要性 •オンラインサービスへのアクセスが制限される と⾏政、教育、就労など様々な機会損失が発⽣ •災害情報など⽣命に関わるサービスもある 2025/4/21 7
法的背景 •⽇本では2024年4⽉に障害者差別解消法が改正 され⺠間事業者にも合理的配慮が義務化 •国際的にも多くの国で類似の法整備がある 2025/4/21 8
ウェブアクセシビリティという考え •みんなが使いやすいウェブサイトを⽬指す =ウェブアクセシビリティ •情報格差をなくし、誰⼀⼈取り残さないように するため •W3Cが作成 2025/4/21 9
ウェブアクセシビリティの基本
誰のため? •障害のある⽅ • 視覚、聴覚、運動障害など •⼀時的な制約がある⽅ • 怪我や病気、周囲の環境など •利⽤環境の依存 • パソコン、スマートフォン、インターネット環境など
2025/4/21 11
4つの基本原則 1. 知覚可能(Perceivable) 2. 操作可能(Operable) 3. 理解可能(Understandable) 4. 堅牢(Robust) 2025/4/21
12
1. 知覚可能(Perceivable) •情報やUIがユーザに認識できる •⾊だけに頼らない表現 •⾳声情報の提供 •字幕情報の提供 •画像に代替テキストを提供 2025/4/21 13
2. 操作可能(Operable) •ユーザがすべてのUIを操作できる •キーボードでの操作 •コンテンツを読むのに⼗分な時間がある •フラッシュを抑制する 2025/4/21 14
3.理解可能(Understandable) •ユーザが情報やUI操作を理解できる •読みやすいテキスト •表⽰や操作が予想でき、⼀貫性がある •間違いを防いだり、修正を容易にできる 2025/4/21 15
4. 堅牢(Robust) •さまざまなユーザーエージェントが確実に利⽤ できる •HTMLを正しく利⽤する •特定のブラウザに依存しない 2025/4/21 16
OSやブラウザの機能で達成する •⽂字拡⼤、カラー変更などを独⾃の補助機能を 実装してもアクセシビリティは確保できない •利⽤者は、ウェブサイトの補助機能を積極的に 使いたいわけではない •OSやブラウザの設定で⼀貫した体験をしたい 2025/4/21 17
達成基準のレベル •レベルA • 最低限守るべき必須要件 •レベルAA • 多くの⼈がアクセスしやすくなる推奨要件 •レベルAAA • あらゆる⼈が最⼤限アクセスしやすくなる追加要件
2025/4/21 18
原則とレベルの件数 A AA AAA 計 知覚可能 9 11 9 29
操作可能 14 6 14 34 理解可能 7 6 8 21 堅牢 1 1 0 2 計 31 24 31 86 2025/4/21 19
まとめ •ウェブアクセシビリティは「特別な誰か」のた めのものではない •少しの配慮で多くの⼈が使いやすくなる •簡単なところからぜひはじめてみてください! 2025/4/21 20
参考⽂献 •Web Content Accessibility Guidelines (WCAG) 2.2 • https://www.w3.org/TR/WCAG22/ •ウェブアクセシビリティ導⼊ガイドブック|デジタ
ル庁 • https://www.digital.go.jp/resources/introduction- to-web-accessibility-guidebook 2025/4/21 21