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

ユーザーと一緒に進めるアクセシビリティ
-1年でアクセシビリティを 組織に浸透させたnoteの取り組み -

ユーザーと一緒に進めるアクセシビリティ
-1年でアクセシビリティを 組織に浸透させたnoteの取り組み -

2022/05/19に開催されたイベント「GAAD Japan 2022」の登壇で使用したスライドです。

筆者Twitter/note
https://twitter.com/masatosenda
https://note.com/sendamasato/

イベントConnpass
https://gaadjp.connpass.com/event/244731/

イベントHP
https://www.gaad.jp/

当日のTwitterでのリアクションまとめTogetter
https://togetter.com/li/1889734?page=13#h607_0

More Decks by Senda Masato / 仙田 真郷

Other Decks in Research

Transcript

  1. ϢʔβʔͱҰॹʹਐΊΔΞΫηγϏϦςΟ  1 ೥ͰΞΫηγϏϦςΟΛ ૊৫ʹਁಁͤͨ͞OPUFͷऔΓ૊Έ

  2. 2 69Ϧαʔνϟʔ 
 ઋాਅڷ ೥ʹOPUFגࣜձࣾʹ৽ଔͰೖࣾɻ ೥݄ʹ69ϦαʔννʔϜΛ্ཱͪ͛ɺ 69Ϧαʔνͷ࣮ࢪͱࣾ಺ਁಁʹऔΓ૊ΜͰ͍ Δɻ ΞΫηγϏϦςΟνʔϜͰ͸ɺো֐౰ࣄऀ΁ͷ ϢʔβʔΠϯλϏϡʔΛओಋ͍ͯ͠Δɻ

    OPUFDPNTFOEBNBTBUP !NBTBUPTFOEB
  3. ຊ೔ͷྲྀΕ ̍.ɹnoteͷΞΫηγϏϦςΟνʔϜʹ͍ͭͯ 2.ɹϢʔβʔΠϯλϏϡʔͷนͱ৐Γӽ͑ͨํ๏ 3.ɹϢʔβʔΠϯλϏϡʔΛͯ͠Α͔ͬͨ͜ͱ 4.ɹnoteͰੜ·Εͨൃ৴ͱϑΟʔυόοΫͷαΠΫϧ 3

  4. ຊ೔ͷྲྀΕ ̍.ɹnoteͷΞΫηγϏϦςΟνʔϜʹ͍ͭͯ 2.ɹϢʔβʔΠϯλϏϡʔͷนͱ৐Γӽ͑ͨํ๏ 3.ɹϢʔβʔΠϯλϏϡʔΛͯ͠Α͔ͬͨ͜ͱ 4.ɹnoteͰੜ·Εͨൃ৴ͱϑΟʔυόοΫͷαΠΫϧ 4

  5. 5 ΫϦΤΠλʔ͕จষ΍ը૾ɺԻ ੠ɺಈըΛ౤ߘͯ͠ɺϢʔβʔ ͕ͦͷίϯςϯπΛָ͠ΜͰԠ ԉͰ͖Δ 
 ϝσΟΞϓϥοτϑΥʔϜ OPUFͱ͸ʁ

  6. OPUFΞΫηγϏϦςΟνʔϜʹ͍ͭͯ 6 69ΤϯδχΞ σβΠφʔ J04ΤϯδχΞ Ϧαʔνϟʔ ΧελϚʔαϙʔτ ΞυόΠβʔ ϑϩϯτΤϯυΤϯδχΞ

  7. OPUFΞΫηγϏϦςΟνʔϜʹ͍ͭͯ • ༗ࢤνʔϜʢ૊৫ਤʹ͸ͳ͍ɺશһ݉ۀʣ • ϝϯόʔ͸໊΄Ͳ • ೥݄͔Βຊ֨࢝ಈ • GSFFFͷNBHJ͞Μʹ֎෦ΞυόΠβʔͱͯ͠ೖͬͯ΋Βͬͯ ͍Δ

    • ຖि࣌ؒͷఆྫ • ݱࡏظ 7
  8. ͳͥOPUF͸ ΞΫηγϏϦςΟ޲্ʹ औΓ૊ΜͰ͍Δͷ͔ 8

  9. ϛογϣϯʹඥ͍ͮͯΔ͔Β ୭΋͕૑࡞Λ͸͡Ίଓ͚ΒΕΔΑ͏ʹ͢Δ 9 .*44*0/

  10. ׆ಈͷதͰʜ ϢʔβʔΠϯλϏϡʔΛ࣮ࢪ͖ͯͨ͠ 10

  11. ͜Ε·Ͱ໊Ҏ্ͷো֐౰ࣄऀʹ࿩Λฉ͍͖ͯͨ 11

  12. ͳͥϢʔβʔΠϯλϏϡʔΛ ͸͡Ίͨͷ͔ 12

  13. NBHJ͞ΜʹݴΘΕ͔ͨΒ 13 ΞΫηγϏϦςΟͷඞཁੑ͸ɺ ͦΕΛ੾࣮ʹඞཁͱ͍ͯ͠Δ ϢʔβʔΛݟͳ͍ͱཧղͰ͖ͳ͍ʂ NBHJ͞Μ

  14. ϢʔβʔΛݟͳ͍ͱཧղͰ͖ͳ͍͜ͱ͕͋ͬͨ 14 OPUFͷΞΫηγϏϦςΟ޲্ϓϩδΣΫτ͕࢝ಈ

  15. ॳΊͯશ໡ͷΫϦΤΠλʔͱ࿩ͨ͠ΤϯδχΞͷݴ༿ 15

  16. ͜Ε·Ͱ໊Ҏ্ͷো֐౰ࣄऀʹ࿩Λฉ͍͖ͯͨ ো֐ͷঢ়گ • શ໡ • ऑࢹ • ৭֮ಛੑ • ্ࢶো֐

    16 ૢ࡞؀ڥ • εΫϦʔϯϦʔμʔ ʢ/7%"ɺ1$5BMLFSɺ7PJDF0WFS • ֦େ • ৭֮ิॿ • Ϛ΢εૢ࡞ʢεΫϦʔϯΩʔϘʔυʣ • ࢹઢૢ࡞ʢεΫϦʔϯΩʔϘʔυʣ
  17. ຊ೔ͷྲྀΕ ̍.ɹnoteͷΞΫηγϏϦςΟνʔϜʹ͍ͭͯ 2.ɹϢʔβʔΠϯλϏϡʔͷนͱ৐Γӽ͑ͨํ๏ 3.ɹϢʔβʔΠϯλϏϡʔΛͯ͠Α͔ͬͨ͜ͱ 4.ɹnoteͰੜ·Εͨൃ৴ͱϑΟʔυόοΫͷαΠΫϧ 17

  18. ࠷ॳʹײ͍ͯͨ͜͡ͱ 18 ো֐౰ࣄऀͱͲ͏઀ͨ͠Β͍͍͔ ෼͔Βͳ͔ͬͨɻ ա৒ʹؾΛݣͬͯ͠·͍ͬͯͨɻ

  19. Ͳ͏͔ͨ͠ ৺ߏ͑ΛվΊͨɻmagi͞Μͷݴ༿↓ ɾ ૬ख͸ಛผͳਓͰ͸ͳͯ͘ɺࢲͨͪͱಉ͡ɺͻͱΓͷnoteϢʔβʔɻར༻ঢ়گ͕૬ ରతʹಛघͳ͚ͩɻ ɾ ߏ੒ͱͯ͠͸ϢʔβʔΠϯλϏϡʔͱ͍ͬ͠ΐɻجຊ͸ʰͲΜͳ;͏ʹ࢖͍ͬͯΔ ͔ฉ͘ʱʹ͗͢ͳ͍ɻߏ͑͗͢ͳ͍ ɾΠϯλϏϡʔ࣮ࠪ࣌ʹɺো֐ʹ͍ͭͯա౓ʹහײʹͳΒͳ͍ɺԕྀ͠ͳ͍(܏ௌͷ࢟ ੎Λ࣋ͯ͹େৎ෉)

    19
  20. 20 ΠϯλϏϡʔͷ ४උͯ͠΋Β͏ͷਃ͠༁ͳ͍ʜ ࠷ॳʹײ͍ͯͨ͜͡ͱ

  21. Ͳ͏͔ͨ͠ • ࣄલʹฉ͘ɺ४උ͸ͯ͠΋Β͏ʂ ◦ ͋Β͔͡Ίಈ࡞؀ڥΛฉ͍͓ͯ͘ ◦ ϏσΦ௨࿩ͷ઀ଓςετΛͯ͠΋Β͏ ◦ ࣄલʹnoteʹొ࿥ɺ৮͓͍ͬͯͯ΋Β͏ ◦

    ීஈnoteΛ࢖ͬͯΔ༷ࢠͷಈըΛૹͬͯ΋Β͏ →ԕྀͤͣ४උ͸ͯ͠΋Βͬͨํ͕͓ޓ͍༗ҙٛͳ࣌ؒʹͳΔ 21
  22. ࠷ॳʹࠔͬͨ͜ͱ 22 πʔϧʹ͍ͭͯ஌Βͳͯ͘ςϯύΔ

  23. ࠷ॳʹࠔͬͨ͜ͱ 23 • NVDAͷϑΥʔΧεϞʔυɺϒϥ΢ζϞʔυʹ͍ͭͯ஌Βͳ ͔ͬͨ • PC-TalkerͰ͸ಡΈ্͛ͳ͍έʔε͕ଟ͍͜ͱΛ஌Βͳ͔ͬ ͨ

  24. Ͳ͏͔ͨ͠ • ࣄલௐࠪ͸͔ͬ͠Γ͓ͯ͘͠ ◦ ૬ख͸ͲΜͳ؀ڥͳͷ͔ɺͲΜͳσόΠεͳͷ͔ ◦ ࣗ෼Ͱ΋৮͓ͬͯ͘ ◦ Α͋͘ΔࠔΓ͝ͱ͸ͳΜͳͷ͔ωοτͰௐ΂Δ •

    ஌͔ͬͨͿΓͤͣʹฉ͘ →લఏ஌ࣝ͸େࣄ 24
  25. ͜Ε·Ͱฉ͍͖ͯͨਓͨͪͷো֐ͷঢ়گ͝ͱʹ঺հ 25 • શ໡ • ऑࢹ • ৭֮ಛੑ • ্ࢶো֐

  26. Ϳ͔ͭͬͨน • εΫϦʔϯϦʔμʔͷιϑτɺϒϥ΢βΤϯδϯʹΑͬͯಡΈ ্͛ํ͕มΘΔ ◦ ιϑτɿNVDAɺPC-TalkerɺVoiceOver ◦ ϒϥ΢βɿChromeɺSafari… →͜ͷલ͸ಡΜͩͷʹɺࠓճ͸͏·͘ಡΈ্͛ͳ͍ʂʂ 26

  27. ͜͏৐Γӽ͑ͨ • ࣄલʹڍಈΛௐ΂Δʂ ◦ εΫϦʔϯϦʔμʔͷιϑτ͝ͱʹಡΈ্͛Δ ϥϕϧ ◦ note͸ࠓͲΜͳ;͏ʹಡΈ্͍͛ͯΔ͔ 27

  28. Ϳ͔ͭͬͨน • ը໘ڞ༗͸Ͱ͖Δ͕ɺԻ੠͕ڞ༗͞Εͳ͍ɻ • εϚϗͷԻ੠͕ڞ༗Ͱ͖ͳ͍ 28

  29. ͜͏৐Γӽ͑ͨᶄ ࣄલʹ઀ଓςετΛͯ͠΋Β͏Α͏ʹ͓ئ͍͢Δ 29

  30. ͦͷ΄͔ϙΠϯτ • ීஈͷಡΈ্͛଎౓ͩͱૣ͘ɺฉ͖औΕͳ͍ɻ஗ͯ͘͠ ΋Β͏ɻ • ಡΈ্͛ͳͯ͘໎ͬͯ͠·ͬͨ࣌ɺࢹ֮৘ใΛΘ͔Γ΍ ͘͢ޱ಄Ͱઆ໌͢Δ 30

  31. ੜ·Εͨࢪࡦ ΞϓϦͷϩʔλʔૢ࡞ʹରԠ 31

  32. ੜ·Εͨࢪࡦ ಡΈ্͛ʹ׽ࣈґଘͷݴ༿ΛݮΒ͢ 32 ະεΩ ↓ εΩ ੾Γସ͑Ϙλϯ ԡ͞Ε͍ͯ·ͤΜ

  33. ͜Ε·Ͱฉ͍͖ͯͨਓͨͪ 33 • શ໡ • ऑࢹ • ৭֮ಛੑ • ্ࢶো֐

  34. Ϳ͔ͭͬͨน • ֦େදࣔΛ͍ͯ͠Δਓ͕ଟ͍͕ɺΦϯϥΠϯͰը໘ڞ༗ Λ͢Δͱݩͷഒ཰ʹิਖ਼͞Εͯ͠·͏ 34

  35. Ϳ͔ͭͬͨน 35

  36. ͜͏৐Γӽ͑ͨ 36 ը໘֦େͯ͠Δ༷ࢠΛผͷΧϝϥͰࡱӨͯ͠΋Βͬͨ

  37. 37

  38. ͜Ε·Ͱฉ͍͖ͯͨਓͨͪ 38 • શ໡ • ऑࢹ • ৭֮ಛੑ • ্ࢶো֐

  39. Ϳ͔ͭͬͨน • ௨ৗ৭֮ͷݟ͑ํͱͷҧ͍͸౰ࣄऀ΋Θ͔Βͳ͍ • ී௨ʹฉ͍ͯ΋՝୊͕ݟ͔ͭΒͳ͍ 39

  40. ͜͏৐Γӽ͑ͨ • ࣄલʹγϛϡϨʔγϣϯπʔϧͰݟ͑ʹ͍͘ՕॴΛϦετ Ξοϓ͓ͯ͘͠ 40 4QFDUSVN

  41. ͜͏৐Γӽ͑ͨ 41 ʲ௨ৗ৭֮ʳ ʲγϛϡϨʔγϣϯπʔϧʳ

  42. ͜͏৐Γӽ͑ͨ 42 ʲ௨ৗ৭֮ʳ ʲγϛϡϨʔγϣϯπʔϧʳ

  43. ͜͏৐Γӽ͑ͨ 43

  44. ͦͷ΄͔ϙΠϯτ ৭֮ಛੑͰ΋ɺਓʹΑͬͯݟ͑ํ͕ҧ͏ͷͰɺෳ਺ਓʹฉ͘ 44

  45. ੜ·Εͨࢪࡦ 45 ݱࡏ஍ͷදࣔʹ ྘Λ࢖Θͳ͍ ʲมߋલʳ ʲมߋޙʳ

  46. ੜ·Εͨࢪࡦ ݱࡏ஍ͷදࣔʹ ྘Λ࢖Θͳ͍ 46 https://note.com/notes ʲมߋલʳ ʲมߋޙʳ

  47. 47

  48. 48

  49. ͜Ε·Ͱฉ͍͖ͯͨਓͨͪ 49 • શ໡ • ऑࢹ • ৭֮ಛੑ • ্ࢶো֐

  50. Ϳ͔ͭͬͨน • ΩʔϘʔυૢ࡞ɺࢹઢૢ࡞ͷงғؾ͕෼͔Βͳ͍ 50

  51. ͜͏৐Γӽ͑ͨ • ૢ࡞ํ๏Λௐ΂͓ͯ͘ • Α͋͘Δେมͳ͜ͱʹ͍ͭͯௐ΂͓ͯ͘ ◦ ࢹઢͰಈ͔ͨ͢Ίɺࡉ͔͍Χʔιϧͷૢ࡞͕೉͠ ͍ͷͰɺখ͍͞Ϙλϯ͕ԡ͠ʹ͍͘ ◦ ϙοϓΞοϓ͕ด͡ʹ͍͘

    • ๯಄Ͱૢ࡞ํ๏ʹ͍ͭͯฉ͘ 51
  52. ͜͏৐Γӽ͑ͨ 52

  53. ͦͷ΄͔ϙΠϯτ ൃ࿩͕Ͱ͖ͳ͍ํͷ৔߹ɺ৘ใͷ΍ΓͱΓʹ͕͔͔࣌ؒΔ ͷͰɺ௕ΊʹΠϯλϏϡʔͷ࣌ؒΛͱΔ 53

  54. ຊ೔ͷྲྀΕ ̍.ɹnoteͷΞΫηγϏϦςΟνʔϜʹ͍ͭͯ 2.ɹϢʔβʔΠϯλϏϡʔͷนͱ৐Γӽ͑ͨํ๏ 3.ɹϢʔβʔΠϯλϏϡʔΛͯ͠Α͔ͬͨ͜ͱ 4.ɹnoteͰੜ·Εͨൃ৴ͱϑΟʔυόοΫͷαΠΫϧ 54

  55. ϝϯόʔͷϞνϕʔγϣϯʹͭͳ͕ͬͨ 55

  56. ෭࣍తͳޮՌ • ಧ͚Δਓͷإɺ੠͕෼͔Δ • Ϣʔβʔ͕noteʹظ଴ͯ͘͠ΕͯΔ͜ͱ͕෼͔Δ • ػೳΛ๙Ίͯ͘ΕΔ • νʔϜ֎ͷਓ΋ڵຯΛ΋ͬͯ؍ͯ͘ΕΔ →νʔϜ಺ͷϞνϕʔγϣϯҡ࣋ɺࣾ಺Ͱͷೝ஌֫ಘ

    56
  57. ຊ೔ͷྲྀΕ ̍.ɹnoteͷΞΫηγϏϦςΟνʔϜʹ͍ͭͯ 2.ɹϢʔβʔΠϯλϏϡʔͷนͱ৐Γӽ͑ͨํ๏ 3.ɹϢʔβʔΠϯλϏϡʔΛͯ͠Α͔ͬͨ͜ͱ 4.ɹnoteͰੜ·Εͨൃ৴ͱϑΟʔυόοΫͷαΠΫϧ 57

  58. OPUFͷڧΈ 1. ֎෦ͷΞυόΠβʔʢmagi͞ΜʣΛݺ΂ͨ 2. ϑΟʔυόοΫΛ͘ΕΔ೤ྔͷ͋ΔϢʔβʔ 3. ൃ৴Λॿ͚ͯ͘ΕΔࣾ಺ମ੍ 58

  59. 1. ֎෦ͷΞυόΠβʔʢmagi͞ΜʣΛݺ΂ͨ • Կ͕෼͔Βͳ͍͔෼͔Βͳ͍ • Ͳ͜ʹɺ୭ʹฉ͚͹͍͍͔෼͔Βͳ͍ →͍ͭͰ΋ͳΜͰ΋౴͑ͯ͘ΕΔϓϩϑΣογϣφϧ͕͍Δ ΠϯλϏϡʔڠྗऀ͸magi͞Μʹ঺հͯ͠΋Β͏͜ͱ΋ 59

  60. 2.ϑΟʔυόοΫΛ͘ΕΔ೤ྔͷ͋ΔϢʔβʔ͕͍Δ 60

  61. 2.ϑΟʔυόοΫΛ͘ΕΔ೤ྔͷ͋ΔϢʔβʔ͕͍Δ 61

  62. 3.ൃ৴Λॿ͚ͯ͘ΕΔࣾ಺ମ੍ 62 noteΞΫηγϏϦςΟࢪࡦ

  63. 3.ൃ৴Λॿ͚ͯ͘ΕΔࣾ಺ମ੍ 63 σΟϨΫλʔ ΤϯδχΞˍϥΠλʔ 13 هࣄͷࣥච/ߍਖ਼Λͯ͘͠ΕΔ…ʂ

  64. ݁Ռతʹੜ·Εͨൃ৴ͱϑΟʔυόοΫͷαΠΫϧ 64

  65. ݁Ռతʹੜ·Εͨൃ৴ͱϑΟʔυόοΫͷαΠΫϧ 65

  66. αΠΫϧ͕ճΔΑ͏ʹͳͬͨͷ΋ΠϯλϏϡʔ͕࢝·Γͩͬͨ ΠϯλϏϡʔ΍ͬͯΈΔͷେࣄʂʂʂ ࠓ೔ͷ࿩ɺࢀߟʹͯ͠Έ͍ͯͩ͘͞ 66

  67. 67 ୭΋͕૑࡞Λ͸͡Ίɺଓ͚ΒΕΔΑ͏ʹ͢Δ஥ؒΛ଴ͬͯ·͢ ΧδϡΞϧ໘ஊϑΥʔϜ͸ͪ͜Β

  68. None