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ͷऔΓ૊Έ

    View full-size slide

  2. 2
    69Ϧαʔνϟʔ

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

    View full-size slide

  3. ຊ೔ͷྲྀΕ
    ̍.ɹnoteͷΞΫηγϏϦςΟνʔϜʹ͍ͭͯ


    2.ɹϢʔβʔΠϯλϏϡʔͷนͱ৐Γӽ͑ͨํ๏


    3.ɹϢʔβʔΠϯλϏϡʔΛͯ͠Α͔ͬͨ͜ͱ


    4.ɹnoteͰੜ·Εͨൃ৴ͱϑΟʔυόοΫͷαΠΫϧ
    3

    View full-size slide

  4. ຊ೔ͷྲྀΕ
    ̍.ɹnoteͷΞΫηγϏϦςΟνʔϜʹ͍ͭͯ


    2.ɹϢʔβʔΠϯλϏϡʔͷนͱ৐Γӽ͑ͨํ๏


    3.ɹϢʔβʔΠϯλϏϡʔΛͯ͠Α͔ͬͨ͜ͱ


    4.ɹnoteͰੜ·Εͨൃ৴ͱϑΟʔυόοΫͷαΠΫϧ
    4

    View full-size slide

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

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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


    ● શ໡
    ● ऑࢹ
    ● ৭֮ಛੑ
    ● ্ࢶো֐
    16
    ૢ࡞؀ڥ


    ● εΫϦʔϯϦʔμʔ
    ʢ/7%"ɺ1$5BMLFSɺ7PJDF0WFS
    ● ֦େ
    ● ৭֮ิॿ
    ● Ϛ΢εૢ࡞ʢεΫϦʔϯΩʔϘʔυʣ
    ● ࢹઢૢ࡞ʢεΫϦʔϯΩʔϘʔυʣ

    View full-size slide

  17. ຊ೔ͷྲྀΕ
    ̍.ɹnoteͷΞΫηγϏϦςΟνʔϜʹ͍ͭͯ


    2.ɹϢʔβʔΠϯλϏϡʔͷนͱ৐Γӽ͑ͨํ๏


    3.ɹϢʔβʔΠϯλϏϡʔΛͯ͠Α͔ͬͨ͜ͱ


    4.ɹnoteͰੜ·Εͨൃ৴ͱϑΟʔυόοΫͷαΠΫϧ
    17

    View full-size slide

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

    View full-size slide

  19. Ͳ͏͔ͨ͠
    ৺ߏ͑ΛվΊͨɻmagi͞Μͷݴ༿↓


    ɾ ૬ख͸ಛผͳਓͰ͸ͳͯ͘ɺࢲͨͪͱಉ͡ɺͻͱΓͷnoteϢʔβʔɻར༻ঢ়گ͕૬
    ରతʹಛघͳ͚ͩɻ


    ɾ ߏ੒ͱͯ͠͸ϢʔβʔΠϯλϏϡʔͱ͍ͬ͠ΐɻجຊ͸ʰͲΜͳ;͏ʹ࢖͍ͬͯΔ
    ͔ฉ͘ʱʹ͗͢ͳ͍ɻߏ͑͗͢ͳ͍


    ɾΠϯλϏϡʔ࣮ࠪ࣌ʹɺো֐ʹ͍ͭͯա౓ʹහײʹͳΒͳ͍ɺԕྀ͠ͳ͍(܏ௌͷ࢟
    ੎Λ࣋ͯ͹େৎ෉)
    19

    View full-size slide

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

    View full-size slide

  21. Ͳ͏͔ͨ͠
    ● ࣄલʹฉ͘ɺ४උ͸ͯ͠΋Β͏ʂ


    ○ ͋Β͔͡Ίಈ࡞؀ڥΛฉ͍͓ͯ͘


    ○ ϏσΦ௨࿩ͷ઀ଓςετΛͯ͠΋Β͏


    ○ ࣄલʹnoteʹొ࿥ɺ৮͓͍ͬͯͯ΋Β͏


    ○ ීஈnoteΛ࢖ͬͯΔ༷ࢠͷಈըΛૹͬͯ΋Β͏


    →ԕྀͤͣ४උ͸ͯ͠΋Βͬͨํ͕͓ޓ͍༗ҙٛͳ࣌ؒʹͳΔ
    21

    View full-size slide

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

    View full-size slide

  23. ࠷ॳʹࠔͬͨ͜ͱ
    23
    ● NVDAͷϑΥʔΧεϞʔυɺϒϥ΢ζϞʔυʹ͍ͭͯ஌Βͳ
    ͔ͬͨ


    ● PC-TalkerͰ͸ಡΈ্͛ͳ͍έʔε͕ଟ͍͜ͱΛ஌Βͳ͔ͬ
    ͨ

    View full-size slide

  24. Ͳ͏͔ͨ͠
    ● ࣄલௐࠪ͸͔ͬ͠Γ͓ͯ͘͠


    ○ ૬ख͸ͲΜͳ؀ڥͳͷ͔ɺͲΜͳσόΠεͳͷ͔


    ○ ࣗ෼Ͱ΋৮͓ͬͯ͘


    ○ Α͋͘ΔࠔΓ͝ͱ͸ͳΜͳͷ͔ωοτͰௐ΂Δ


    ● ஌͔ͬͨͿΓͤͣʹฉ͘


    →લఏ஌ࣝ͸େࣄ
    24

    View full-size slide

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

    View full-size slide

  26. Ϳ͔ͭͬͨน
    ● εΫϦʔϯϦʔμʔͷιϑτɺϒϥ΢βΤϯδϯʹΑͬͯಡΈ
    ্͛ํ͕มΘΔ


    ○ ιϑτɿNVDAɺPC-TalkerɺVoiceOver


    ○ ϒϥ΢βɿChromeɺSafari…


    →͜ͷલ͸ಡΜͩͷʹɺࠓճ͸͏·͘ಡΈ্͛ͳ͍ʂʂ
    26

    View full-size slide

  27. ͜͏৐Γӽ͑ͨ
    ● ࣄલʹڍಈΛௐ΂Δʂ


    ○ εΫϦʔϯϦʔμʔͷιϑτ͝ͱʹಡΈ্͛Δ
    ϥϕϧ


    ○ note͸ࠓͲΜͳ;͏ʹಡΈ্͍͛ͯΔ͔
    27

    View full-size slide

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


    ● εϚϗͷԻ੠͕ڞ༗Ͱ͖ͳ͍
    28

    View full-size slide

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

    View full-size slide

  30. ͦͷ΄͔ϙΠϯτ
    ● ීஈͷಡΈ্͛଎౓ͩͱૣ͘ɺฉ͖औΕͳ͍ɻ஗ͯ͘͠
    ΋Β͏ɻ


    ● ಡΈ্͛ͳͯ͘໎ͬͯ͠·ͬͨ࣌ɺࢹ֮৘ใΛΘ͔Γ΍
    ͘͢ޱ಄Ͱઆ໌͢Δ
    30

    View full-size slide

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

    View full-size slide

  32. ੜ·Εͨࢪࡦ
    ಡΈ্͛ʹ׽ࣈґଘͷݴ༿ΛݮΒ͢
    32
    ະεΩ





    εΩ ੾Γସ͑Ϙλϯ


    ԡ͞Ε͍ͯ·ͤΜ

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  35. Ϳ͔ͭͬͨน
    35

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  38. Ϳ͔ͭͬͨน
    ● ௨ৗ৭֮ͷݟ͑ํͱͷҧ͍͸౰ࣄऀ΋Θ͔Βͳ͍


    ● ී௨ʹฉ͍ͯ΋՝୊͕ݟ͔ͭΒͳ͍
    39

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  42. ͜͏৐Γӽ͑ͨ
    43

    View full-size slide

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

    View full-size slide

  44. ੜ·Εͨࢪࡦ
    45
    ݱࡏ஍ͷදࣔʹ


    ྘Λ࢖Θͳ͍
    ʲมߋલʳ
    ʲมߋޙʳ

    View full-size slide

  45. ੜ·Εͨࢪࡦ
    ݱࡏ஍ͷදࣔʹ


    ྘Λ࢖Θͳ͍
    46
    https://note.com/notes
    ʲมߋલʳ ʲมߋޙʳ

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  48. ͜͏৐Γӽ͑ͨ
    ● ૢ࡞ํ๏Λௐ΂͓ͯ͘


    ● Α͋͘Δେมͳ͜ͱʹ͍ͭͯௐ΂͓ͯ͘


    ○ ࢹઢͰಈ͔ͨ͢Ίɺࡉ͔͍Χʔιϧͷૢ࡞͕೉͠
    ͍ͷͰɺখ͍͞Ϙλϯ͕ԡ͠ʹ͍͘


    ○ ϙοϓΞοϓ͕ด͡ʹ͍͘


    ● ๯಄Ͱૢ࡞ํ๏ʹ͍ͭͯฉ͘
    51

    View full-size slide

  49. ͜͏৐Γӽ͑ͨ
    52

    View full-size slide

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

    View full-size slide

  51. ຊ೔ͷྲྀΕ
    ̍.ɹnoteͷΞΫηγϏϦςΟνʔϜʹ͍ͭͯ


    2.ɹϢʔβʔΠϯλϏϡʔͷนͱ৐Γӽ͑ͨํ๏


    3.ɹϢʔβʔΠϯλϏϡʔΛͯ͠Α͔ͬͨ͜ͱ


    4.ɹnoteͰੜ·Εͨൃ৴ͱϑΟʔυόοΫͷαΠΫϧ
    54

    View full-size slide

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

    View full-size slide

  53. ෭࣍తͳޮՌ
    ● ಧ͚Δਓͷإɺ੠͕෼͔Δ


    ● Ϣʔβʔ͕noteʹظ଴ͯ͘͠ΕͯΔ͜ͱ͕෼͔Δ


    ● ػೳΛ๙Ίͯ͘ΕΔ


    ● νʔϜ֎ͷਓ΋ڵຯΛ΋ͬͯ؍ͯ͘ΕΔ


    →νʔϜ಺ͷϞνϕʔγϣϯҡ࣋ɺࣾ಺Ͱͷೝ஌֫ಘ
    56

    View full-size slide

  54. ຊ೔ͷྲྀΕ
    ̍.ɹnoteͷΞΫηγϏϦςΟνʔϜʹ͍ͭͯ


    2.ɹϢʔβʔΠϯλϏϡʔͷนͱ৐Γӽ͑ͨํ๏


    3.ɹϢʔβʔΠϯλϏϡʔΛͯ͠Α͔ͬͨ͜ͱ


    4.ɹnoteͰੜ·Εͨൃ৴ͱϑΟʔυόοΫͷαΠΫϧ
    57

    View full-size slide

  55. OPUFͷڧΈ
    1. ֎෦ͷΞυόΠβʔʢmagi͞ΜʣΛݺ΂ͨ


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


    3. ൃ৴Λॿ͚ͯ͘ΕΔࣾ಺ମ੍
    58

    View full-size slide

  56. 1. ֎෦ͷΞυόΠβʔʢmagi͞ΜʣΛݺ΂ͨ
    ● Կ͕෼͔Βͳ͍͔෼͔Βͳ͍


    ● Ͳ͜ʹɺ୭ʹฉ͚͹͍͍͔෼͔Βͳ͍


    →͍ͭͰ΋ͳΜͰ΋౴͑ͯ͘ΕΔϓϩϑΣογϣφϧ͕͍Δ


    ΠϯλϏϡʔڠྗऀ͸magi͞Μʹ঺հͯ͠΋Β͏͜ͱ΋
    59

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  63. αΠΫϧ͕ճΔΑ͏ʹͳͬͨͷ΋ΠϯλϏϡʔ͕࢝·Γͩͬͨ


    ΠϯλϏϡʔ΍ͬͯΈΔͷେࣄʂʂʂ


    ࠓ೔ͷ࿩ɺࢀߟʹͯ͠Έ͍ͯͩ͘͞
    66

    View full-size slide

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

    View full-size slide