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

   View Slide

2. 2
   69Ϧαʔνϟʔ
   

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

   View Slide

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

   View Slide

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

   View Slide

5. 5
   ΫϦΤΠλʔ͕จষ΍ը૾ɺԻ
   ੠ɺಈըΛ౤ߘͯ͠ɺϢʔβʔ
   ͕ͦͷίϯςϯπΛָ͠ΜͰԠ
   ԉͰ͖Δ
   

   ϝσΟΞϓϥοτϑΥʔϜ
   OPUFͱ͸ʁ
   

   View Slide

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

   View Slide

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

   View Slide

8. ͳͥOPUF͸
   ΞΫηγϏϦςΟ޲্ʹ
   औΓ૊ΜͰ͍Δͷ͔
   8
   

   View Slide

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

   View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

16. ͜Ε·Ͱ໊Ҏ্ͷো֐౰ࣄऀʹ࿩Λฉ͍͖ͯͨ
    ো֐ͷঢ়گ
    
    
    ● શ໡
    ● ऑࢹ
    ● ৭֮ಛੑ
    ● ্ࢶো֐
    16
    ૢ࡞؀ڥ
    
    
    ● εΫϦʔϯϦʔμʔ
    ʢ/7%"ɺ1$5BMLFSɺ7PJDF0WFS
    ● ֦େ
    ● ৭֮ิॿ
    ● Ϛ΢εૢ࡞ʢεΫϦʔϯΩʔϘʔυʣ
    ● ࢹઢૢ࡞ʢεΫϦʔϯΩʔϘʔυʣ
    

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

21. Ͳ͏͔ͨ͠
    ● ࣄલʹฉ͘ɺ४උ͸ͯ͠΋Β͏ʂ
    
    
    ○ ͋Β͔͡Ίಈ࡞؀ڥΛฉ͍͓ͯ͘
    
    
    ○ ϏσΦ௨࿩ͷ઀ଓςετΛͯ͠΋Β͏
    
    
    ○ ࣄલʹnoteʹొ࿥ɺ৮͓͍ͬͯͯ΋Β͏
    
    
    ○ ීஈnoteΛ࢖ͬͯΔ༷ࢠͷಈըΛૹͬͯ΋Β͏
    
    
    →ԕྀͤͣ४උ͸ͯ͠΋Βͬͨํ͕͓ޓ͍༗ҙٛͳ࣌ؒʹͳΔ
    21
    

    View Slide

22. ࠷ॳʹࠔͬͨ͜ͱ
    22
    πʔϧʹ͍ͭͯ஌Βͳͯ͘ςϯύΔ
    

    View Slide

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

    View Slide

24. Ͳ͏͔ͨ͠
    ● ࣄલௐࠪ͸͔ͬ͠Γ͓ͯ͘͠
    
    
    ○ ૬ख͸ͲΜͳ؀ڥͳͷ͔ɺͲΜͳσόΠεͳͷ͔
    
    
    ○ ࣗ෼Ͱ΋৮͓ͬͯ͘
    
    
    ○ Α͋͘ΔࠔΓ͝ͱ͸ͳΜͳͷ͔ωοτͰௐ΂Δ
    
    
    ● ஌͔ͬͨͿΓͤͣʹฉ͘
    
    
    →લఏ஌ࣝ͸େࣄ
    24
    

    View Slide

25. ͜Ε·Ͱฉ͍͖ͯͨਓͨͪͷো֐ͷঢ়گ͝ͱʹ঺հ
    25
    ● શ໡
    ● ऑࢹ
    ● ৭֮ಛੑ
    ● ্ࢶো֐
    

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

35. Ϳ͔ͭͬͨน
    35
    

    View Slide

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

    View Slide

37. View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

43. ͜͏৐Γӽ͑ͨ
    43
    

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

47. View Slide

48. View Slide

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

    View Slide

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

    View Slide

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

    View Slide

52. ͜͏৐Γӽ͑ͨ
    52
    

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

68. View Slide