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.7k
明日からできるデザイン・コンテンツのアクセシビリティ入門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
310
20241019-CUD友の会「困った!を解決するデザイン改訂版」交流会
majimasachi
0
350
20240921-図書館の実空間とデジタル資源の接点をデザインする-dtk55-Designing-the-interface-between-the-library's-physical-space-and-digital-resources
majimasachi
0
500
ブロックエディターではじめるアクセシビリティ / start accessibility with block editor
majimasachi
1
790
あかるいブランドカラーと コントラストの話 / bright brand colors and contrast
majimasachi
2
310
ウェブ制作に活かすユニバーサルデザインの視点 / Universal design for web design
majimasachi
10
1.9k
認知心理学に学ぶ 伝わる情報デザイン / Cognitive psychological information design
majimasachi
8
3.3k
スライド作成のチェックポイント / WordCamp Ogijima 2018 slideguide_jp
majimasachi
15
37k
Checkpoints for Creating Slides / WordCamp Ogijima 2018 slideguide-en
majimasachi
1
1k
Other Decks in Design
See All in Design
20241204_UI/UXデザイナーLT会 - vol.10_DMM
motokoishida
0
360
aya_murakami_portfolio
ayakaimi1101
0
1.5k
もうひとつのアーキテクチャ #kichijojipm
kondoyuko
0
210
株式会社デイトラ様│コーポレートサイト│コンセプトシート
haruka_capeo
0
1.2k
線で考える画面構成
natsuume
1
840
ito aya Portfolio
itoaya116
0
140
250131_product meetup
motokoishida
0
160
今更聞けないデザイン思考 - 高専キャリア2024冬 / imasara-design-thinking
chige
7
1k
ほしいテンプレート制作から始めるツール学習のススメ📝
60d
0
100
【pmconf2024】ユーザーになりきる「コスプレUX」で リサーチ解像度を上げる
kamechi7222222
1
9k
富山デザイン勉強会_デザイントレンド2025.pdf
keita_yoshikawa
0
240
株式会社ログラス - 会社説明資料【デザイナー】/ Loglass Designer
loglass2019
0
100
Featured
See All Featured
Building Adaptive Systems
keathley
41
2.5k
Music & Morning Musume
bryan
47
6.5k
How to Think Like a Performance Engineer
csswizardry
23
1.5k
jQuery: Nuts, Bolts and Bling
dougneiner
63
7.7k
Into the Great Unknown - MozCon
thekraken
37
1.7k
Fontdeck: Realign not Redesign
paulrobertlloyd
83
5.5k
No one is an island. Learnings from fostering a developers community.
thoeni
21
3.2k
Keith and Marios Guide to Fast Websites
keithpitt
411
22k
Embracing the Ebb and Flow
colly
85
4.6k
Faster Mobile Websites
deanohume
306
31k
Practical Orchestrator
shlominoach
186
10k
Visualizing Your Data: Incorporating Mongo into Loggly Infrastructure
mongodb
45
9.5k
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 ʬ͓·͚ʭ