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
明日からできるデザイン・コンテンツのアクセシビリティ入門2018 / A11y in Desi...
Search
majimasachi
July 15, 2018
Design
7
2.8k
明日からできるデザイン・コンテンツのアクセシビリティ入門2018 / A11y in Design and Contents
2018.07.15 WordCamp Ogijima 2018 の登壇資料です。
発表内容のテキスト版はこちら:
https://bit.ly/2zNnSSR
majimasachi
July 15, 2018
Tweet
Share
More Decks by majimasachi
See All by majimasachi
OSO2025-マサカリと太陽:伝え方の情報デザイン
majimasachi
0
410
20250129_DAST28_実空間にデジタル資源の接点をデザインする
majimasachi
0
540
20241019-CUD友の会「困った!を解決するデザイン改訂版」交流会
majimasachi
0
400
20240921-図書館の実空間とデジタル資源の接点をデザインする-dtk55-Designing-the-interface-between-the-library's-physical-space-and-digital-resources
majimasachi
0
630
ブロックエディターではじめるアクセシビリティ / start accessibility with block editor
majimasachi
1
870
あかるいブランドカラーと コントラストの話 / bright brand colors and contrast
majimasachi
2
350
ウェブ制作に活かすユニバーサルデザインの視点 / Universal design for web design
majimasachi
10
2k
認知心理学に学ぶ 伝わる情報デザイン / Cognitive psychological information design
majimasachi
8
3.4k
スライド作成のチェックポイント / WordCamp Ogijima 2018 slideguide_jp
majimasachi
15
38k
Other Decks in Design
See All in Design
CMS管理画面のアクセシビリティ
magi1125
8
2.5k
デザイナーがはばたく未来の入り口『hatch』が描く、新しいデザイナー育成のカタチ
goodpatch
1
2k
企業にデザインが融けたとき、デザイナーにできること。事業会社12年間の探究と葛藤 / Designship2025
visional_engineering_and_design
0
780
Tools for Design Engineers other than LLM in the LLM era
takanorip
1
530
サービスリブランディングにおけるイラストレーションシステムの構築と活用事例 / Building and Utilizing an Illustration System in Service Rebranding
lycorptech_jp
PRO
0
650
portfolio.pdf
onof003
0
200
8_8_リサーチカンファレンスプレイベント.pdf
muture
PRO
2
440
見過ごさない誠実さ_アクティブバイスタンダーとIntegrityが支えるアジャイル文化 / integrity-and-active-bystander
spring_aki
1
140
「自分の仕事はどこまで?」と問い続けたら。デザイナーの「視座」を考える
mukai_takeru
0
190
ユーザー体験は細部に宿る -ウィジェットQAの挑戦と気づき- / UX is in the details: Challenges and Learnings from Widget QA
bitkey
PRO
0
100
AIを身近に感じるために、デザイナー全員で一つのサービスを使ってみた
_psyc0_
0
320
Spectrum Tokyo_ デザイナーが事業責任者になってみた
shin_2
0
160
Featured
See All Featured
Making the Leap to Tech Lead
cromwellryan
135
9.6k
JavaScript: Past, Present, and Future - NDC Porto 2020
reverentgeek
52
5.7k
Documentation Writing (for coders)
carmenintech
75
5.1k
Context Engineering - Making Every Token Count
addyosmani
8
300
Thoughts on Productivity
jonyablonski
70
4.9k
GitHub's CSS Performance
jonrohan
1032
470k
The Art of Delivering Value - GDevCon NA Keynote
reverentgeek
16
1.7k
The Pragmatic Product Professional
lauravandoore
36
7k
[RailsConf 2023 Opening Keynote] The Magic of Rails
eileencodes
31
9.7k
The Power of CSS Pseudo Elements
geoffreycrofte
79
6k
Keith and Marios Guide to Fast Websites
keithpitt
411
23k
Embracing the Ebb and Flow
colly
88
4.9k
Transcript
WordCamp Ogijima 2018 ؒౢࠫ σβΠϯɾίϯςϯπͷ ΞΫηγϏϦςΟೖ2018 ໌͔ΒͰ͖Δʂ 2018.07.15
PROFILE ؒౢࠫ @mjmjsachi ߴݝࡏॅ ϑϦʔϥϯεDTPʴΣϒσβΠϯ WordPress Ogijima 2018࣮ߦҕһ WordPressྺ4 ΞΫηγϏϦςΟྺ2
QͲ͏ͯ͠ΣϒͰ ൃ৴͢Δͷʁ
A ΑΓଟ͘ͷਓʹ ใΛ͑ΔͨΊ
ҰਓͰɺࣗྗͰɺੈքʹ͚ͯൃ৴Ͱ͖Δ Power of WEB ࣗͷ૾Λ͑ͨ ͨ͘͞Μͷਓɾ͍ΖΜͳਓʹ͑ΒΕΔ
ʬຊͷ͓ͳ͠ʭ ΑΓଟ͘ͷਓʹใΛ͑ΔͨΊͷ ΞΫηγϏϦςΟ ࠓͷࣗͷࢹΛগ͛ͯ͠
ҰਓͰɺࣗྗͰɺੈքʹ͚ͯൃ৴Ͱ͖Δ ࣗͷ૾Λ͑ͨ ͨ͘͞Μͷਓɾ͍ΖΜͳਓʹ͑ΒΕΔ ൃ৴͢Δଆ
୭Ͱɺ͖ͳͱ͖ʹ͖ͳॴͰ ͖ͳܗࣜͰใΛಘΒΕΔ Power of WEB ड͚औΔଆ
୭Ͱɺ͖ͳͱ͖ʹ͖ͳॴͰ ͖ͳܗࣜͰ ใΛಘΒΕΔ Power of WEB ड͚औΔଆ
None
ະདྷͷศརɹɹOK! Google, Alexa! ख͕͑ͳ͍ɹɹΩʔϘʔυૢ࡞ ຊޠ͕ۤखɹɹ༁πʔϧ ݟ͑ͮΒ͍ɹɹ֦େπʔϧʗ৭ௐసɾิਖ਼ ݟ͑ͳ͍ɹɹεΫϦʔϯϦʔμʔ Ϣʔβʔʷར༻ڥ
༷ʑͳࢧԉٕज़Λ௨ͯ͠ ͋ΒΏΔਓ͕ࣗྗͰใʹΞΫηεͰ͖Δ ΞΫηγϏϦςΟ Access + ability Σϒͱ͍͏ϝσΟΞͷຊ࣭తͳಛɾେ͖ͳັྗ
? ΞΫηγϏϦςΟ োऀɾߴྸऀͷͨΊͷͷ ࣗʹؔͳ͍
ʢࡀҎ্ʣ 27.7ˋ ߴྸऀ ࠤ౻͞Μ ླ͞Μ ߴڮ͞Μ ࢀߟจݙɿฏ൛োऀനॻʦֳʧʗ໊ࣈ༝དྷOFUʛશࠃ໊ࣈϥϯΩϯάʗ౷ܭτϐοΫε/P౷ܭ͔ΒΈͨզ͕ࠃͷߴྸऀʦ૯লʧ ࠃຽͷ 6ˋ ʹ
5,114,000ਓ ԿΒ͔ͷ োΛͭਓ ମো తো ਫ਼ਆো 7,411,000ਓ
ΒͣΒͣͷ͏ͪʹ ୭͔Λૄ֎͠ͳ͍ͨΊʹ
ΞΫηγϏϦςΟ͡ΊͷҰา ໌͔ΒͰ͖Δʂ
Ϛγϯ Ϧʔμϒϧ ώϡʔϚϯ Ϧʔμϒϧ ༷ʑͳࢧԉٕज़Λ௨ͯ͠ɺ͍ΖΜͳਓ͕ΞΫηεͰ͖Δ ΞΫηγϏϦςΟͷղ
6* Ϛγϯ Ϧʔμϒϧ ώϡʔϚϯ Ϧʔμϒϧ ηϚϯςΟοΫ Φʔϓϯσʔλ ϥΠςΟϯά ใઃܭ ϏδϡΞϧ
ΠϯλϥΫγϣϯ γεςϜ ΣϒʹؔΘΔશͯͷਓͰͭ͘Δͷ ΞΫηγϏϦςΟͷղ
ςʔϚ ίϯςϯπ ΣϒαΠτΛΞΫηγϒϧʹ͢Δʹ྆ྠ͕ෆՄܽ WordPressͷղ
ςʔϚ ίϯςϯπ ΣϒαΠτΛΞΫηγϒϧʹ͢Δʹ྆ྠ͕ෆՄܽ WordPressͷղ
OgiOgi hotel ͷαΠτΛ WordPressͰ࡞ͬͨΑʂ ͍ΖΜͳਓʹདྷͯ΄͍͔͠Β ΞΫηγϒϧʹ͢Δͧʙʂ Case Study
͓͢͢Ίϓϥϯհόφʔ Case 1 ը૾͕ݟΕͳ͍ਓʹ͑Δʹʜʁ
Good morning, OgiOgi! ށͷ͓͍͠͞ຬࡌ ϫϯϓϨʔτϞʔχϯάϓϥϯ ସςΩετ ը૾Ͱ͍͑ͨใ ʹ
εΫϦʔϯϦʔμʔͰಡΈ্͛ ը૾ͷΘΓʹςΩετΛදࣔ ସςΩετ
ը૾͕ݟ͑ΔਓʹςΩετͰ ͑ͨํ͕ྑ͍ใɺ ΩϟϓγϣϯΛ׆༻͠Α͏ʂ
ۭࣨঢ়گΧϨϯμʔ Case 2
ۭࣨঢ়گΧϨϯμʔ Case 2 1ܕ ʢܕʣ ৭֮োͷํ͕ݟΔͱʜʁ ϞϊΫϩͰϓϦϯτͨ͠Βʜʁ
ۭࣨঢ়گΧϨϯμʔ Case 2 ৭͚ͩʹґଘ͠ͳ͍͑ํΛߟ͑Α͏
ۭࣨঢ়گΧϨϯμʔ Case 2 ৭͚ͩʹґଘ͠ͳ͍͑ํΛߟ͑Α͏ จࣈͱഎܠͷ ίϯτϥετ νΣοΫʂ
هࣄͷϥΠςΟϯά Case 3 ০తͰͳ͘ ҙຯߏΛ͑ΔͨΊʹ ͏ͷ͕ϙΠϯτʂ
هࣄͷϥΠςΟϯά Case 3 ʻλάʼςΩετʻλάʼ ྫʣಉ͡ݟग़͠Ϩϕϧ͚ͩൈ͖ग़ͯ͠ಡΉ ϚʔΫΞοϓ
هࣄͷϥΠςΟϯά Case 3 ίʔυΛॻ͔ͳ͍ਓͰ ϚγϯϦʔμϒϧʹग़དྷΔʂ
هࣄͷϥΠςΟϯά Case 3 ͜ΕཱͳΞΫηγϏϦςΟʂ ݟग़͠ߏΛҙࣝ͢Δ ར༻ऀʹͱ͔ͬͯΓ͍͢ݴ༿Λ͏ ϦϯΫઌ͕༧ଌͰ͖ΔϦϯΫςΩετʹ͢Δ ০తͷจࣈ৭ͷཚ༻ආ͚Δ
ΞΫηγϏϦςΟ࣍ͷҰา ͬͱΓ͍ͨʂ ϙΠϯτࣗҎ֎ͷ ʮࢹʯ Λ૿͢͜ͱ
߹ཧతྀ۩ମྫσʔλू 2016.4.1 োऀࠩผղফ๏ http://www8.cao.go.jp/shougai/suishin/jirei/index.html োͷछผੜ׆ͷ໘͔ΒࣄྫΛ୳ͤΔ
ΣϒίϯςϯπΛ ΞΫηγϒϧʹ ͢ΔͨΊͷΨΠυϥΠϯ WCAG 2.0 = JIS X 8341-3
ΣϒίϯςϯπΛ ΞΫηγϒϧʹ ͢ΔͨΊͷΨΠυϥΠϯ WCAG 2.0 = JIS X 8341-3 ͲΜͳ໘Ͱ
ͲΜͳਓ͕ ͲΜͳ෩ʹࠔΔ͔Β ͜͏ରॲ͠Α͏ ΨΠυϥΠϯ
͜ͷΨΠυϥΠϯʹै͏ͱɺ ଟ͘ͷ߹ɺ ΄ͱΜͲͷར༻ऀʹͱͬͯ Σϒίϯςϯπ͕ ΑΓ͍͘͢ͳΔɻ
ࣗͷΒͳ͍୭͔ͷ͍ํΛΓ ଟ༷ੑΛड͚ೖΕΔ͜ͱͰ ΈΜͳͷϢʔβϏϦςΟ্͢Δ
·ͱΊ
ΑΓଟ͘ͷਓʹಧ͚ΔͨΊʹ ΞΫηγϏϦςΟͷ ʮࢹʯ Λ औΓೖΕͯΈΑ͏ ࠓͷࣗͷࢹΛগ͛ͯ͠
͋Γ͕ͱ͏͍͟͝·ͨ͠ Empower the smalls to go big. @mjmjsachi
ߴদ࠙ձͰͨ͠ ʮA11yϙελʔʯ A4൛PDF https://bit.ly/2Lnil6D ʬ͓·͚ʭ