Upgrade to Pro — share decks privately, control downloads, hide ads and more …

明日からできるデザイン・コンテンツのアクセシビリティ入門2018 / A11y in Design and Contents

73239a63bba7e11d6f2621caceef76d1?s=47 majimasachi
July 15, 2018
Design
7
2k

明日からできるデザイン・コンテンツのアクセシビリティ入門2018 / A11y in Design and Contents

2018.07.15 WordCamp Ogijima 2018 の登壇資料です。
発表内容のテキスト版はこちら：https://bit.ly/2zNnSSR

73239a63bba7e11d6f2621caceef76d1?s=128

majimasachi

July 15, 2018
Tweet

More Decks by majimasachi

See All by majimasachi
ブロックエディターではじめるアクセシビリティ / start accessibility with block editor
73239a63bba7e11d6f2621caceef76d1?s=48 majimasachi
1
450
あかるいブランドカラーと コントラストの話 / bright brand colors and contrast
73239a63bba7e11d6f2621caceef76d1?s=48 majimasachi
2
100
ウェブ制作に活かすユニバーサルデザインの視点 / Universal design for web design
73239a63bba7e11d6f2621caceef76d1?s=48 majimasachi
10
1.2k
認知心理学に学ぶ 伝わる情報デザイン / Cognitive psychological information design
73239a63bba7e11d6f2621caceef76d1?s=48 majimasachi
8
2.5k
スライド作成のチェックポイント / WordCamp Ogijima 2018 slideguide_jp
73239a63bba7e11d6f2621caceef76d1?s=48 majimasachi
12
27k
Checkpoints for Creating Slides / WordCamp Ogijima 2018 slideguide-en
73239a63bba7e11d6f2621caceef76d1?s=48 majimasachi
1
810
インクルーシブに楽しむアクセシビリティ
73239a63bba7e11d6f2621caceef76d1?s=48 majimasachi
4
600

Other Decks in Design

See All in Design
ImageFluxについて / CAMPHOR- 2021-12-18
Bb801526105a0ee829ba368ed78e5667?s=48 imageflux
0
210
Mijii & Gnochi Go Swimming
B896d135180958999cd053869215f3f0?s=48 ohtristanart
PRO
0
450
Banana Bribes
B896d135180958999cd053869215f3f0?s=48 ohtristanart
PRO
1
1.3k
wip
Bbbc49d0d9b78f671ffb431d5e381f2a?s=48 x3carlyx3
1
150
Maslow会社資料 | Maslow Company Guide ver.8.5
Aa19e202c24c51a41415206e7742c098?s=48 maslow_akkun
1
2.7k
Fairest of Them All
5968fa9a81cf1cf77a919996b8ed1bc9?s=48 pandemonay
1
620
Figmaを学ぶ会Vol.2プロジェクトメンバー全員が幸せになるFigmaプロジェクト管理術
31959fb2d8d72f6cbf96a13e17107ff8?s=48 kuritagit
0
230
u1w_未知のゲームを制作する時に考えたこと
05301e1170c62df84521684c17f96278?s=48 tobusaoi
0
120
Almost There
F2a18f1ef63198439d0722c7e88129e2?s=48 kignato1
1
1.3k
UX Research for Internal Enterprise Tools
F383c6a4dc55e331bbe2987b622cee6b?s=48 stephaniewalter
2
730
Shuv It Boards
966a7d3473313a57827602754b617993?s=48 8sided
PRO
1
190
Talent Show-Down (2022)
Eb0cae63029ad6b66dfe7005e89c1473?s=48 gyroidz
1
140

Featured

See All Featured
It's Worth the Effort
Ba530e786553390f3fb271848485681c?s=48 3n
172
25k
Code Review Best Practice
3d6ace9554821d552146413bcdf874f6?s=48 trishagee
41
6.7k
How to Ace a Technical Interview
2f5463832ccb768ccb4a1ca3607c27ef?s=48 jacobian
265
21k
4 Signs Your Business is Dying
E4f5d494ebdc9e7cce1aecf3ce3e8bc1?s=48 shpigford
169
20k
Side Projects
027d1ebf66cc039a0bd3b55eeadbe75d?s=48 sachag
449
37k
Why You Should Never Use an ORM
88bc30284c6a424b63a92aad27d0ba36?s=48 jnunemaker
PRO
47
5.5k
Clear Off the Table
Ef32e0b1ac5082450dc8c1fca3a26b5c?s=48 cherdarchuk
79
280k
From Idea to $5000 a Month in 5 Months
E4f5d494ebdc9e7cce1aecf3ce3e8bc1?s=48 shpigford
372
44k
XXLCSS - How to scale CSS and keep your sanity
1b8ad785acdd1ce1c99914b1c2a4e10e?s=48 sugarenia
236
1M
In The Pink: A Labor of Love
E837d2996f52008ace055a08fbfff992?s=48 frogandcode
130
21k
Pencils Down: Stop Designing & Start Developing
79acae287842acf29084005533a7fb3b?s=48 hursman
112
9.8k
Fireside Chat
864a009ac73600c7c02e1f26629dd989?s=48 paigeccino
11
1.3k

Transcript

  1. WordCamp Ogijima 2018 ؒౢࠫ஌ σβΠϯɾίϯςϯπͷ ΞΫηγϏϦςΟೖ໳2018 ໌೔͔ΒͰ͖Δʂ 2018.07.15

  2. PROFILE ؒౢࠫ஌ @mjmjsachi ߴ஌ݝࡏॅ ϑϦʔϥϯεDTPʴ΢ΣϒσβΠϯ WordPress Ogijima 2018࣮ߦҕһ WordPressྺ4೥ ΞΫηγϏϦςΟྺ2೥

  3. QͲ͏ͯ͠΢ΣϒͰ ൃ৴͢Δͷʁ

  4. A ΑΓଟ͘ͷਓʹ ৘ใΛ఻͑ΔͨΊ

  5. ҰਓͰ΋ɺࣗྗͰɺੈքʹ޲͚ͯൃ৴Ͱ͖Δ Power of WEB ࣗ෼ͷ૝૾Λ௒͑ͨ ͨ͘͞Μͷਓɾ͍ΖΜͳਓʹ఻͑ΒΕΔ

  6. ʬຊ೔ͷ͓͸ͳ͠ʭ ΑΓଟ͘ͷਓʹ৘ใΛ఻͑ΔͨΊͷ ΞΫηγϏϦςΟ ࠓͷࣗ෼ͷࢹ఺Λগ͠޿͛ͯ

  7. ҰਓͰ΋ɺࣗྗͰɺੈքʹ޲͚ͯൃ৴Ͱ͖Δ ࣗ෼ͷ૝૾Λ௒͑ͨ ͨ͘͞Μͷਓɾ͍ΖΜͳਓʹ఻͑ΒΕΔ ൃ৴͢Δଆ

  8. ୭Ͱ΋ɺ޷͖ͳͱ͖ʹ޷͖ͳ৔ॴͰ ޷͖ͳܗࣜͰ৘ใΛಘΒΕΔ Power of WEB ड͚औΔଆ

  9. ୭Ͱ΋ɺ޷͖ͳͱ͖ʹ޷͖ͳ৔ॴͰ ޷͖ͳܗࣜͰ ৘ใΛಘΒΕΔ Power of WEB ड͚औΔଆ

  10. None

  11. ະདྷͷศརɹɹOK! Google, Alexa! ख͕࢖͑ͳ͍ɹɹΩʔϘʔυૢ࡞ ೔ຊޠ͕ۤखɹɹ຋༁πʔϧ ݟ͑ͮΒ͍ɹɹ֦େπʔϧʗ৭ௐ൓సɾิਖ਼ ݟ͑ͳ͍ɹɹεΫϦʔϯϦʔμʔ Ϣʔβʔʷར༻؀ڥ

  12. ༷ʑͳ୺຤΍ࢧԉٕज़Λ௨ͯ͠ ͋ΒΏΔਓ͕ࣗྗͰ৘ใʹΞΫηεͰ͖Δ ΞΫηγϏϦςΟ Access + ability ΢Σϒͱ͍͏ϝσΟΞͷຊ࣭తͳಛ௃ɾେ͖ͳັྗ

  13. ? ΞΫηγϏϦςΟ͸ ো֐ऀɾߴྸऀͷͨΊͷ΋ͷ ࣗ෼ʹ͸ؔ܎ͳ͍

  14. ʢࡀҎ্ʣ 27.7ˋ ߴྸऀ ࠤ౻͞Μ ླ໦͞Μ ߴڮ͞Μ ࢀߟจݙɿฏ੒೥൛ো֐ऀനॻʦ಺ֳ෎ʧʗ໊ࣈ༝དྷOFUʛશࠃ໊ࣈϥϯΩϯάʗ౷ܭτϐοΫε/P౷ܭ͔ΒΈͨզ͕ࠃͷߴྸऀʦ૯຿লʧ ࠃຽͷ 6ˋ ʹ

    5,114,000ਓ ԿΒ͔ͷ ো֐Λ΋ͭਓ ਎ମো֐ ஌తো֐ ਫ਼ਆো֐ 7,411,000ਓ

  15. ஌Βͣ஌Βͣͷ͏ͪʹ ୭͔Λૄ֎͠ͳ͍ͨΊʹ΋

  16. ΞΫηγϏϦςΟ͸͡ΊͷҰา ໌೔͔ΒͰ͖Δʂ

  17. Ϛγϯ Ϧʔμϒϧ ώϡʔϚϯ Ϧʔμϒϧ ༷ʑͳ୺຤΍ࢧԉٕज़Λ௨ͯ͠ɺ͍ΖΜͳਓ͕ΞΫηεͰ͖Δ ΞΫηγϏϦςΟͷ෼ղ

  18. 6* Ϛγϯ Ϧʔμϒϧ ώϡʔϚϯ Ϧʔμϒϧ ηϚϯςΟοΫ Φʔϓϯσʔλ ϥΠςΟϯά ৘ใઃܭ ϏδϡΞϧ

    ΠϯλϥΫγϣϯ γεςϜ ΢ΣϒʹؔΘΔશͯͷਓͰͭ͘Δ΋ͷ ΞΫηγϏϦςΟͷ෼ղ

  19. ςʔϚ ίϯςϯπ ΢ΣϒαΠτΛΞΫηγϒϧʹ͢Δʹ͸྆ྠ͕ෆՄܽ WordPressͷ෼ղ

  20. ςʔϚ ίϯςϯπ ΢ΣϒαΠτΛΞΫηγϒϧʹ͢Δʹ͸྆ྠ͕ෆՄܽ WordPressͷ෼ղ

  21. OgiOgi hotel ͷαΠτΛ WordPressͰ࡞ͬͨΑʂ ͍ΖΜͳਓʹདྷͯ΄͍͔͠Β ΞΫηγϒϧʹ͢Δͧʙʂ Case Study

  22. ͓͢͢Ίϓϥϯ঺հόφʔ Case 1 ը૾͕ݟΕͳ͍ਓʹ΋఻͑Δʹ͸ʜʁ

  23. Good morning, OgiOgi! ੉ށ಺ͷ͓͍͠͞ຬࡌ ϫϯϓϨʔτϞʔχϯάϓϥϯ ୅ସςΩετ ը૾Ͱ఻͍͑ͨ৘ใ ʹ

  24. εΫϦʔϯϦʔμʔͰಡΈ্͛ ը૾ͷ୅ΘΓʹςΩετΛදࣔ ୅ସςΩετ

  25. ը૾͕ݟ͑Δਓʹ΋ςΩετͰ ఻͑ͨํ͕ྑ͍৘ใ͸ɺ ΩϟϓγϣϯΛ׆༻͠Α͏ʂ

  26. ۭࣨঢ়گΧϨϯμʔ Case 2

  27. ۭࣨঢ়گΧϨϯμʔ Case 2 1ܕ ʢܕʣ ৭֮ো֐ͷํ͕ݟΔͱʜʁ ϞϊΫϩͰϓϦϯτͨ͠Βʜʁ

  28. ۭࣨঢ়گΧϨϯμʔ Case 2 ৭͚ͩʹґଘ͠ͳ͍఻͑ํΛߟ͑Α͏

  29. ۭࣨঢ়گΧϨϯμʔ Case 2 ৭͚ͩʹґଘ͠ͳ͍఻͑ํΛߟ͑Α͏ จࣈͱഎܠͷ ίϯτϥετ΋ νΣοΫʂ

  30. هࣄͷϥΠςΟϯά Case 3 ૷০໨తͰ͸ͳ͘ ҙຯ΍ߏ଄Λ఻͑ΔͨΊʹ ࢖͏ͷ͕ϙΠϯτʂ

  31. هࣄͷϥΠςΟϯά Case 3 ʻλάʼςΩετʻλάʼ ྫʣಉ͡ݟग़͠Ϩϕϧ͚ͩൈ͖ग़ͯ͠ಡΉ ϚʔΫΞοϓ

  32. هࣄͷϥΠςΟϯά Case 3 ίʔυΛॻ͔ͳ͍ਓͰ΋ ϚγϯϦʔμϒϧʹग़དྷΔʂ

  33. هࣄͷϥΠςΟϯά Case 3 ͜Ε΋ཱ೿ͳΞΫηγϏϦςΟʂ ݟग़͠ߏ଄Λҙࣝ͢Δ ར༻ऀʹͱͬͯ෼͔Γ΍͍͢ݴ༿Λ࢖͏ ϦϯΫઌ͕༧ଌͰ͖ΔϦϯΫςΩετʹ͢Δ ૷০໨తͷจࣈ৭ͷཚ༻͸ආ͚Δ

  34. ΞΫηγϏϦςΟ࣍ͷҰา ΋ͬͱ஌Γ͍ͨʂ ϙΠϯτ͸ࣗ෼Ҏ֎ͷ ʮࢹ఺ʯ Λ૿΍͢͜ͱ

  35. ߹ཧత഑ྀ౳۩ମྫσʔλू 2016.4.1 ো֐ऀࠩผղফ๏ http://www8.cao.go.jp/shougai/suishin/jirei/index.html ো֐ͷछผ΍ੜ׆ͷ৔໘͔ΒࣄྫΛ୳ͤΔ

  36. ΢ΣϒίϯςϯπΛ ΞΫηγϒϧʹ ͢ΔͨΊͷΨΠυϥΠϯ WCAG 2.0 = JIS X 8341-3

  37. ΢ΣϒίϯςϯπΛ ΞΫηγϒϧʹ ͢ΔͨΊͷΨΠυϥΠϯ WCAG 2.0 = JIS X 8341-3 ͲΜͳ৔໘Ͱ

    ͲΜͳਓ͕ ͲΜͳ෩ʹࠔΔ͔Β ͜͏ରॲ͠Α͏ ΨΠυϥΠϯ

  38. ͜ͷΨΠυϥΠϯʹै͏ͱɺ ଟ͘ͷ৔߹ɺ ΄ͱΜͲͷར༻ऀʹͱͬͯ ΢Σϒίϯςϯπ͕ ΑΓ࢖͍΍͘͢ͳΔɻ

  39. ࣗ෼ͷ஌Βͳ͍୭͔ͷ࢖͍ํΛ஌Γ ଟ༷ੑΛड͚ೖΕΔ͜ͱͰ ΈΜͳͷϢʔβϏϦςΟ΋޲্͢Δ

  40. ·ͱΊ

  41. ΑΓଟ͘ͷਓʹಧ͚ΔͨΊʹ ΞΫηγϏϦςΟͷ ʮࢹ఺ʯ Λ औΓೖΕͯΈΑ͏ ࠓͷࣗ෼ͷࢹ఺Λগ͠޿͛ͯ

  42. ͋Γ͕ͱ͏͍͟͝·ͨ͠ Empower the smalls to go big. @mjmjsachi

  43. ߴদ࠙਌ձͰ഑෍ͨ͠ ʮA11yϙελʔʯ
 A4൛PDF https://bit.ly/2Lnil6D ʬ͓·͚ʭ