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
20250129_DAST28_実空間にデジタル資源の接点をデザインする
majimasachi
0
440
20241019-CUD友の会「困った!を解決するデザイン改訂版」交流会
majimasachi
0
380
20240921-図書館の実空間とデジタル資源の接点をデザインする-dtk55-Designing-the-interface-between-the-library's-physical-space-and-digital-resources
majimasachi
0
560
ブロックエディターではじめるアクセシビリティ / start accessibility with block editor
majimasachi
1
820
あかるいブランドカラーと コントラストの話 / bright brand colors and contrast
majimasachi
2
330
ウェブ制作に活かすユニバーサルデザインの視点 / Universal design for web design
majimasachi
10
1.9k
認知心理学に学ぶ 伝わる情報デザイン / Cognitive psychological information design
majimasachi
8
3.3k
スライド作成のチェックポイント / WordCamp Ogijima 2018 slideguide_jp
majimasachi
15
38k
Checkpoints for Creating Slides / WordCamp Ogijima 2018 slideguide-en
majimasachi
1
1.1k
Other Decks in Design
See All in Design
真・altはつけるだけじゃなくて -alt属性の考察 2025年版-
securecat
5
1.6k
生成AIを活用した組み込みSW設計書検索システム開発
licux
7
1.1k
今日から意識できるアクセシビリティ
fumiko
0
240
portfolio_YumiYasuda
yum0418
0
290
【Firefly Image 4対応版】上手にFireflyにお願いしてウェブデザイン案を出すぞ!
cremacrema
0
1.3k
Echoes Boomerang
artcloudyu
PRO
0
240
児童相談所における養育里親委託時の親権者同意に向けたコミュニケーションの実態
trivia
0
470
Building foundations 堅牢なデザイントークンの設計
hilokifigma
2
3.5k
PF_濵村ひろみ_202503
maru_design78
0
180
DC Style Redesign
mcduckyart
0
130
RAKSUL_DESIGN_DECK_20250319
raksulrecruiting
0
380
Liquid Iron
mcduckyart
1
110
Featured
See All Featured
個人開発の失敗を避けるイケてる考え方 / tips for indie hackers
panda_program
107
19k
Building Applications with DynamoDB
mza
95
6.5k
Six Lessons from altMBA
skipperchong
28
3.9k
Visualization
eitanlees
146
16k
VelocityConf: Rendering Performance Case Studies
addyosmani
331
24k
Visualizing Your Data: Incorporating Mongo into Loggly Infrastructure
mongodb
46
9.6k
The Straight Up "How To Draw Better" Workshop
denniskardys
234
140k
Testing 201, or: Great Expectations
jmmastey
42
7.6k
Building Better People: How to give real-time feedback that sticks.
wjessup
367
19k
Dealing with People You Can't Stand - Big Design 2015
cassininazir
367
26k
The Language of Interfaces
destraynor
158
25k
A designer walks into a library…
pauljervisheath
207
24k
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 ʬ͓·͚ʭ