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
450
20241019-CUD友の会「困った!を解決するデザイン改訂版」交流会
majimasachi
0
380
20240921-図書館の実空間とデジタル資源の接点をデザインする-dtk55-Designing-the-interface-between-the-library's-physical-space-and-digital-resources
majimasachi
0
580
ブロックエディターではじめるアクセシビリティ / start accessibility with block editor
majimasachi
1
830
あかるいブランドカラーと コントラストの話 / 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
数理的アプローチで挑むスマホUIのデザイン改善:タップ成功率推定ツール「Tappy」の社内活用事例 / Improving Smartphone UI Design with a Mathematical Approach: In-house Use Case of the Tap Success Rate Estimation Tool "Tappy"
lycorptech_jp
PRO
0
550
読書シェア会 vol.5 / Yumemi.grow 20250526
rakus_dev
0
1.6k
AI時代に、僕たちデザイナーはどう歩むか
kazuhirokimura
0
310
新しいデザインの難しさ(公開版) / Difficulties in the New Design (public ver.)
usagimaru
1
710
1920*1080pxに設定したケース / Google Slide Size Test
arthur1
0
3k
Bulletproof Design System with TypeScript
takanorip
6
3.7k
“ブロック”で作る、WordPress制作フロー変革のすすめ
koots2021
4
1.8k
「批評」を習慣にするための仕組みと場のデザイン/uxdesign202507
nikkei_engineer_recruiting
5
620
【PoCで終わらない】運用フェーズまで見据えたAI駆動UIデザイン/フロントエンド開発実践
kitami
1
240
児童相談所における養育里親委託時の親権者同意に向けたコミュニケーションの実態
trivia
0
500
freee + Product Design FY25Q4
freee
4
15k
PF_濵村ひろみ_202503
maru_design78
0
200
Featured
See All Featured
GitHub's CSS Performance
jonrohan
1031
460k
How STYLIGHT went responsive
nonsquared
100
5.6k
Unsuck your backbone
ammeep
671
58k
個人開発の失敗を避けるイケてる考え方 / tips for indie hackers
panda_program
108
19k
"I'm Feeling Lucky" - Building Great Search Experiences for Today's Users (#IAC19)
danielanewman
229
22k
For a Future-Friendly Web
brad_frost
179
9.8k
Sharpening the Axe: The Primacy of Toolmaking
bcantrill
44
2.4k
A designer walks into a library…
pauljervisheath
207
24k
Reflections from 52 weeks, 52 projects
jeffersonlam
351
21k
A better future with KSS
kneath
238
17k
The MySQL Ecosystem @ GitHub 2015
samlambert
251
13k
The World Runs on Bad Software
bkeepers
PRO
70
11k
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 ʬ͓·͚ʭ