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

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

Avatar for majimasachi majimasachi
July 15, 2018
Design
7
2.9k

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

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

Avatar for majimasachi

majimasachi

July 15, 2018
Tweet

More Decks by majimasachi

See All by majimasachi
OSO2025-マサカリと太陽：伝え方の情報デザイン
Avatar for majimasachi majimasachi
0
650
20250129_DAST28_実空間にデジタル資源の接点をデザインする
Avatar for majimasachi majimasachi
0
580
20241019-CUD友の会「困った！を解決するデザイン改訂版」交流会
Avatar for majimasachi majimasachi
0
420
20240921-図書館の実空間とデジタル資源の接点をデザインする-dtk55-Designing-the-interface-between-the-library's-physical-space-and-digital-resources
Avatar for majimasachi majimasachi
0
670
ブロックエディターではじめるアクセシビリティ / start accessibility with block editor
Avatar for majimasachi majimasachi
1
900
あかるいブランドカラーと コントラストの話 / bright brand colors and contrast
Avatar for majimasachi majimasachi
2
380
ウェブ制作に活かすユニバーサルデザインの視点 / Universal design for web design
Avatar for majimasachi majimasachi
10
2k
認知心理学に学ぶ 伝わる情報デザイン / Cognitive psychological information design
Avatar for majimasachi majimasachi
8
3.4k
スライド作成のチェックポイント / WordCamp Ogijima 2018 slideguide_jp
Avatar for majimasachi majimasachi
15
39k

Other Decks in Design

See All in Design
チームをデザイン対象にする / Design for your team
Avatar for 株式会社カミナシ kaminashi
0
360
「稼ぐ」だけでなく 「還す」ためのデザイン / Designship2025
Avatar for インクルーシブデザインスタジオCULUMU culumu
1
550
新卒2年目デザイナーが、UX検定基礎にチャレンジした話
Avatar for ぽん designer_no_pon
0
1k
Crisp Code inc.｜ブランドガイドライン - Brand guidelines
Avatar for So Kotani / Crisp Code inc. CEO so_kotani
1
280
大きな変化の中で、わたしが向き合ったこと #もがく中堅デザイナー
Avatar for 弁護士ドットコム bengo4com
1
1.4k
Findyのプロデチームの 歩みとこれから
Avatar for Satty satty9556
0
380
公開スライド）熊本市様-電子申請中級編
Avatar for @Garyuten garyuten
0
680
株式会社ログラス - 会社説明資料【デザイナー】/ Loglass Designer
Avatar for 株式会社ログラス loglass2019
1
6.8k
アプリ360onWeb使い方と裏ワザ？紹介！
Avatar for ikejun360 ikejun360
1
450
体験を守るためのデザイン計測
Avatar for PERSOL CAREER Dev | techtekt techtekt
PRO
0
190
自分たちがターゲットになりにくい業務アプリケーションのユーザビリティを担保する取り組み / Initiatives to ensure the usability of business applications that are difficult for us to target
Avatar for Hiromi Morikawa hiromitsuuuuu
1
1.3k
逆向きUIの世界 〜iOSアプリのRTL言語対応〜
Avatar for akatsuki174 akatsuki174
1
450

Featured

See All Featured
The Cult of Friendly URLs
Avatar for Andy Hume andyhume
79
6.8k
Design in an AI World
Avatar for tapps tapps
0
120
Taking LLMs out of the black box: A practical guide to human-in-the-loop distillation
Avatar for Ines Montani inesmontani
PRO
3
2k
Building Experiences: Design Systems, User Experience, and Full Site Editing
Avatar for Michelle Schulp Hunt marktimemedia
0
380
New Earth Scene 8
Avatar for Sydney Stone popppiees
1
1.4k
Test your architecture with Archunit
Avatar for Yoan thirion
1
2.1k
It's Worth the Effort
Avatar for 3n 3n
188
29k
技術選定の審美眼（2025年版） / Understanding the Spiral of Technologies 2025 edition
Avatar for Takuto Wada twada
PRO
115
100k
Stop Working from a Prison Cell
Avatar for Chris Michel hatefulcrawdad
273
21k
Amusing Abliteration
Avatar for ianozsvald ianozsvald
0
87
Speed Design
Avatar for Sergey Chernyshev sergeychernyshev
33
1.5k
Music & Morning Musume
Avatar for Bryan Veloso bryan
46
7k

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 ʬ͓·͚ʭ