ユーザーと一緒に進めるアクセシビリティ -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

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 ը໘֦େͯ͠Δ༷ࢠΛผͷΧϝϥͰࡱӨͯ͠΋Βͬͨ
38. ͜Ε·Ͱฉ͍͖ͯͨਓͨͪ 38 • શ໡
    • ऑࢹ
    • ৭֮ಛੑ
    • ্ࢶো֐
39. Ϳ͔ͭͬͨน • ௨ৗ৭֮ͷݟ͑ํͱͷҧ͍͸౰ࣄऀ΋Θ͔Βͳ͍ • ී௨ʹฉ͍ͯ΋՝୊͕ݟ͔ͭΒͳ͍ 39
40. ͜͏৐Γӽ͑ͨ • ࣄલʹγϛϡϨʔγϣϯπʔϧͰݟ͑ʹ͍͘ՕॴΛϦετ Ξοϓ͓ͯ͘͠ 40 4QFDUSVN
41. ͜͏৐Γӽ͑ͨ 41 ʲ௨ৗ৭֮ʳ ʲγϛϡϨʔγϣϯπʔϧʳ
42. ͜͏৐Γӽ͑ͨ 42 ʲ௨ৗ৭֮ʳ ʲγϛϡϨʔγϣϯπʔϧʳ
43. ͜͏৐Γӽ͑ͨ 43
44. ͦͷ΄͔ϙΠϯτ
    ৭֮ಛੑͰ΋ɺਓʹΑͬͯݟ͑ํ͕ҧ͏ͷͰɺෳ਺ਓʹฉ͘ 44
45. ੜ·Εͨࢪࡦ 45 ݱࡏ஍ͷදࣔʹ ྘Λ࢖Θͳ͍ ʲมߋલʳ ʲมߋޙʳ
46. ੜ·Εͨࢪࡦ ݱࡏ஍ͷදࣔʹ ྘Λ࢖Θͳ͍ 46 https://note.com/notes ʲมߋલʳ ʲมߋޙʳ
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 ୭΋͕૑࡞Λ͸͡Ίɺଓ͚ΒΕΔΑ͏ʹ͢Δ஥ؒΛ଴ͬͯ·͢ ΧδϡΞϧ໘ஊϑΥʔϜ͸ͪ͜Β