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
380
20241019-CUD友の会「困った!を解決するデザイン改訂版」交流会
majimasachi
0
360
20240921-図書館の実空間とデジタル資源の接点をデザインする-dtk55-Designing-the-interface-between-the-library's-physical-space-and-digital-resources
majimasachi
0
530
ブロックエディターではじめるアクセシビリティ / start accessibility with block editor
majimasachi
1
810
あかるいブランドカラーと コントラストの話 / bright brand colors and contrast
majimasachi
2
320
ウェブ制作に活かすユニバーサルデザインの視点 / 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
1.1k
Other Decks in Design
See All in Design
Design Studio Deck | インクルーシブデザインスタジオCULUUM
culumu
1
180
【Adobe MAX Japan 2025】上手にFireflyにお願いしてウェブデザイン案を出すぞ!
cremacrema
7
5.5k
株式会社デイトラ様│コーポレートサイト│コンセプトシート
haruka_capeo
0
1.8k
線で考える画面構成
natsuume
1
860
デザイナーのお仕事(UI/UX GRAPHIC GROUP)
mirrativ
0
270
Storyboard Honey
rocioparronrubio
0
240
「描く」という衝動に立ち返る〜Figma Drawがひらく思考のかたち〜
transit_kix
0
420
パンくずリストかわいい(breadcrumb so cute)
ysuda
0
260
マズロー安達の弟子2期生、成功事例集(17人中17人が3ヶ月平均140万受注)
maslow_akkun
0
4.8k
Building foundations 堅牢なデザイントークンの設計
hilokifigma
2
3.3k
Bulletproof Design System with TypeScript
takanorip
6
2.9k
ビジネスアナリシスはビジネス”分析”じゃないよ!~システム人材が価値を生むための基盤スキルとしてのビジネスアナリシス~
bpstudy
0
280
Featured
See All Featured
Speed Design
sergeychernyshev
30
970
Raft: Consensus for Rubyists
vanstee
137
7k
Principles of Awesome APIs and How to Build Them.
keavy
126
17k
Build The Right Thing And Hit Your Dates
maggiecrowley
35
2.7k
The World Runs on Bad Software
bkeepers
PRO
68
11k
A designer walks into a library…
pauljervisheath
205
24k
Connecting the Dots Between Site Speed, User Experience & Your Business [WebExpo 2025]
tammyeverts
1
74
Product Roadmaps are Hard
iamctodd
PRO
53
11k
Designing Dashboards & Data Visualisations in Web Apps
destraynor
231
53k
The Illustrated Children's Guide to Kubernetes
chrisshort
48
50k
How to Create Impact in a Changing Tech Landscape [PerfNow 2023]
tammyeverts
52
2.8k
Intergalactic Javascript Robots from Outer Space
tanoku
271
27k
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 ʬ͓·͚ʭ