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

kintoneフロントエンド刷新におけるアクセシビリティの取り組み / Accessibility in kintone front-end revamp

Cybozu
October 13, 2021

kintoneフロントエンド刷新におけるアクセシビリティの取り組み / Accessibility in kintone front-end revamp

Cybozu

October 13, 2021
Tweet

More Decks by Cybozu

Other Decks in Technology

Transcript

  1. ࠷ߴͷϢʔβʔମݧΛ໨ࢦ͢ʂ
    LJOUPOFϑϩϯτΤϯυ࡮৽ʹ͓͚Δ
    ΞΫηγϏϦςΟͷऔΓ૊Έ

    View full-size slide

  2. ύωϦετ঺հ

    View full-size slide

  3. 46(*

    • ΞΫηγϏϦςΟνʔϜॴଐ
    • ৽ଔ̎೥໨
    • શ໡ͷΞΫηγϏϦςΟɾΤϯδχΞ
    • ΞΫηγϏϦςΟͷܒൃɾϓϩμΫτͷ
    ΞΫηγϏϦςΟ޲্ࢧԉ

    View full-size slide

  4. നௗѥඒ

    • LJOUPOFνʔϜ 1(
    • ݩ ৽ػೳ։ൃνʔϜ
    • ϑϩϯτΤϯυ࡮৽ϓϩδΣΫτ
    • ৽ଔ̎೥໨
    • ΞΫηγϏϦςΟνʔϜʹମݧೖ෦த

    View full-size slide

  5. ࠓ೔͓࿩͢͠Δ͜ͱ
    l LJOUPOFͱ͸
    l ΞΫηγϏϦςΟͱ͸
    l ϑϩϯτΤϯυ࡮৽ϓϩδΣΫτͰͷऔΓ૊Έ
    l ΤϯδχΞ͕ΞΫηγϏϦςΟʹίϛοτͯ͠Έͯ
    l কདྷͷల๬

    View full-size slide

  6. ։ൃͷ஌͕ࣝͳͯ͘΋
    ۀ຿ʹ߹ΘͤͨγεςϜΛ
    ͔ΜͨΜʹ࡞੒Ͱ͖Δ
    Ϋϥ΢υαʔϏε

    LJOUPOFͷ঺հ
    Ҿ༻ɿαΠϘ΢ζΤϯδχΞ࠾༻ϐον
    ಋೖࣾ਺
    ࣾҎ্ʂ

    View full-size slide

  7. ϑϩϯτΤϯυ࡮৽ϓϩδΣΫτ
    l ೥ۙ͘։ൃ͞Ε͖ͯͨ
    l $ MPTVS F 5PPMTओମͷίʔυϕʔε
    l ΞʔΩςΫνϟΛ࡮৽த
    l 5ZQ F 4 DS JQ U3F BDUʹஔ͖׵͑ΔϓϩδΣΫτ
    l ·ͣ͸ݹ͍σβΠϯͷϖʔδ͔Β࡮৽தʂ

    View full-size slide

  8. ΞΫηγϏϦςΟͱ͸

    View full-size slide

  9. ҰൠతͳΞΫηγϏϦςΟͷఆٛ
    ੡඼΍αʔϏεͷར༻͠΍͢͞
    l σόΠεͷҧ͍
    l ؀ڥͷҧ͍
    l ݸʑͷ৺਎ͷಛ௃ͷҧ͍
    ʹ͔͔ΘΒͣར༻Ͱ͖Δ͜ͱ

    View full-size slide

  10. αΠϘ΢ζͷΞΫηγϏϦςΟͷఆٛ
    νʔϜʹೖΓ͍ͨͱئ͏͢΂ͯͷํ͕νʔϜʹΞΫηεͰ
    ͖Δ͜ͱ
    l αΠϘ΢ζ͸νʔϜϫʔΫΛࢧ͑Δάϧʔϓ΢ΣΞΛఏڙ͠
    ͍ͯΔ
    l Ϣʔβ͸άϧʔϓ΢ΣΞΛ࢖͏͜ͱͰɺνʔϜʹΞΫηε͠
    ͍ͯΔ
    l ΞΫηγϏϦςΟʹνʔϜʹࢀՃ͍ͨ͠ɾߩݙ͍ͨ͠ͱ͍͏
    Ϣʔβͷࢥ͍Λଚॏ͢Δ͜ͱ

    View full-size slide

  11. ΞΫηγϏϦςΟɺ͍ͭऔΓ૊Ήʁ

    View full-size slide

  12. ޙ෇͚͸ίετ͕͔͔Δ
    l ৔౰ͨΓతͳରԠʹͳΓ͕ͪ
    l ઃܭɾ޻਺ͷ੍໿ͰखΛೖΕΒΕͳ͍͜ͱ΋
    ࠷ॳ͔ΒͱΓ͘Ήͷ͕ϕετ
    l ϓϩμΫτ։ൃͷॳظஈ֊͔ΒऔΓ૊Ή
    l ৽ α ʔ Ϗ ε ͷ ཱ ͪ ্ ͛ ɾ Ϧ χ ϡ ʔ Ξ ϧ ͳ Ͳ
    l ඼࣭ཁ݅ͷ̍ཁૉͱͯ͠ͱΒ͑Δ

    View full-size slide

  13. ϑϩϯτΤϯυ࡮৽ͷ೾ʹ৐Δ
    l ͔ΒΞΫηγϒϧͳઃܭΛ͢Δ
    l % 0 . ͷ ඼ ࣭ ޲ ্
    l σ β Π ϯ ࡮ ৽ ɾ ౷ Ұ
    l ܧଓతʹ඼࣭ΛߴΊΔ౔୆࡞Γ
    l Ξ Ϋ η γ ϒ ϧ ͳ ί ϯ ϙ ʔ ω ϯ τ ͷ ࡞ ੒
    l & T M J O U ͳ Ͳ ͷ π ʔ ϧ ͷ ಋ ೖ

    View full-size slide

  14. LJOUPOFͷϑϩϯτΤϯυ࡮৽
    ϓϩδΣΫτͰͷऔΓ૊Έ

    View full-size slide

  15. ΩʔϘʔυɾεΫϦʔϯϦʔμʔૢ࡞ͷվળྫ
    ྫɿυϥοάˍυϩοϓͰߦΛฒͼସ͑ΒΕΔςʔϒϧ

    View full-size slide

  16. ૢ࡞ͷվળ #FGPSF"GUFS
    #FGPSF
    l UBC ϑΥʔΧεͰ͸%%ϘλϯʹϑΥʔΧε͕౰ͨΒͳ͍
    l εΫϦʔϯϦʔμʔͰ͸ %%Ϙλϯʹֻ͔ࠩͬͨ͠ͱ͖ʹ
    ʮυϥοάʯͱಡΈ্͛Δ΋ͷͷɺૢ࡞͸Ͱ͖ͳ͍
    "GUFS
    l UBC Ͱ%%ϘλϯʹϑΥʔΧε͕౰ͨΓɺεϖʔεɾ໼ҹ
    ΩʔͰฒͼସ͑ૢ࡞͕Ͱ͖Δ
    l εΫϦʔϯϦʔμʔͰ͸ର৅ͷྻΛબ୒ͨ͠ঢ়ଶͷͱ͖ʮ໼
    ҹΩʔͰฒͼସ͑ΒΕΔʯࢫͷಡΈ্͕͛͞ΕΔ

    View full-size slide

  17. ૢ࡞ͷվળΛߦ͏ʹ͋ͨͬͯͷ޻෉
    l 8" * " 3*" Λۦ࢖ͯ͠ɺͳΔ΂͘ࢹ֮৘ใͱಉ͚ͩ͡ͷ৘ใ
    ΛεΫϦʔϯϦʔμʔϢʔβʔʹ΋఻͑ΒΕΔΑ͏ʹ
    l 8 " * " 3 * " ɿ ) 5 . - ͷ η Ϛ ϯ ς Ο Ϋ ε Λ ֦ ு ͢ Δ ଐ ੑ ܈
    l 8" * " 3*" ͕ରԠ͞Ε͍ͯͳ͍εΫϦʔϯϦʔμʔΛ࢖༻͠
    ͍ͯΔϢʔβʔʹ΋࠷௿ݶͷ৘ใߏ଄͕఻ΘΔΑ͏ʹɺ
    )5.-ϨϕϧͰཧղɾૢ࡞͕Ͱ͖ΔΑ͏ʹ
    l ૢ࡞Մೳͳཁૉ͕ଟ͍৔໘Ͱ͸ɺUBC ΩʔΛԡ͢ճ਺͕ଟ͘ͳ
    Γ͗͢ͳ͍Α͏ʹɺ໼ҹΩʔͰҠಈͰ͖ΔΑ͏ʹ͢Δ
    l ૢ ࡞ ͠ ͳ ͍ ཁ ૉ ܈ ͸ U B C Ω ʔ Ͱ · ͱ Ί ͯ ඈ ͹ ͤ Δ Α ͏ ʹ ͳ Δ

    View full-size slide

  18. σβΠϯ࡮৽ʹ߹ΘͤͯվળதͷऔΓ૊Έྫ
    ίϯτϥετվળ
    l ΋ͱ΋ͱ໌Δ͍ϒϧʔ΍୶͍άϨʔɾϒϧʔ͕ଟ͍
    ϑΥʔΧεΠϯδέʔλʔ
    l ΩʔϘʔυϑΥʔΧεՄೳͳཁૉʹϑΥʔΧεΠϯδέʔ
    λʔΛ͚͍ͭͯΔ
    l վળલ͸ϑΥʔΧεΠϯδέʔλʔ͕ͳ͍΋ͷ΋ଟ͋͘Γɺ
    ϑΥʔΧε͞Ε͍ͯΔ৔ॴ͕શ͘ࢹೝͰ͖ͳ͍ঢ়ଶ

    View full-size slide

  19. ΤϯδχΞ͕ΞΫηγϏϦςΟʹ
    ίϛοτͯ͠ݟ͖͑ͯͨ͜ͱ

    View full-size slide

  20. ͳͥମݧೖ෦͠Α͏ͱࢥͬͨͷ͔
    l ৽͍͠ίϯϙʔωϯτΛଟ਺࡞Δػೳͷ୲౰ʹͳΔ
    l Ξ Ϋ η γ Ϗ Ϧ ς Ο ν ʔ Ϝ ͱ ڠ ྗ ͠ ͳ ͕ Β ) 5 . - ͷ ઃ ܭ Λ ͢ Δ த Ͱ ɺ
    อ क ੑ Λ ߟ ͑ ͨ ͱ ͖ ʹ ن ֨ ʹ ߹ க ͠ ͨ ) 5 . - ɾ 8 " * " 3 * " ͷ ࣮ ૷ Ͱ
    ͋ Δ ͜ ͱ ͕ ϕ ε τ ͩ ͱ ͍ ͏ ߟ ͑ ʹ
    l ϑϩϯτΤϯυ࡮৽ϓϩδΣΫτͷ׆ಈͷ֦େΛલʹ஌ࣝΛ
    ͚͓͖͍ͭͯͨʂ
    l อ क ੑ ͷ ߴ ͍ ) 5 . - ɾ 8 " * " 3 * " Λ ษ ڧ ͢ Δ ͨ Ί ʹ Ξ Ϋ η γ Ϗ Ϧ
    ς Ο ν ʔ Ϝ ʹ ମ ݧ ೖ ෦ Λ ߟ ͑ Δ

    View full-size slide

  21. ମݧೖ෦ͰΞΫηγϏϦςΟʹίϛοτͯ͠Έͯ
    l ϓϩμΫτͷݟํ͕มΘΔ
    l อकੑͷߴ͍)5.-ͷݕ౼

    View full-size slide

  22. ϓϩμΫτͷݟํ͕มΘΔ
    l ʮૢ࡞Ͱ͖ͳ͍ਓɾૢ࡞͕ඇৗʹ΍Γਏ͍ਓʯ͕͍ͳ͍ͩΖ
    ͏͔ߟ͑ΔΑ͏ʹͳͬͨ
    l ৮ͬͯΈΔͱ૝૾Ҏ্ʹΩʔϘʔυͰૢ࡞Ͱ͖ͳ͍
    l ͪΌΜͱରԠͯ͋͠ΔͱϚ΢εૢ࡞ΑΓָͳ΋ͷ͕ͨ͘͞Μ
    ͋ͬͨ͜ͱΛ஌ͬͨ
    l ಈ࡞֬ೝ͢Δͱ͖ʹΩʔϘʔυૢ࡞΋͢ΔΑ͏ʹͳͬͨ

    View full-size slide

  23. อकੑͷߴ͍ )5.-ͷݕ౼
    l ͳΜͱͳ͘ϚʔΫΞοϓͨ͠ܦݧ͋Γ·ͤΜʁ
    l T Q B O ͷ த ʹ E J W ೖ Ε Δ ͷ ͸ ࢓ ༷ త ʹ / (
    l B λ ά ͷ த ʹ C V U U P O ೖ Ε Δ ͷ ΋ ࢓ ༷ త ʹ / (
    l $ 4 4 ͕ ָ ʹ ॻ ͚ Δ Α ͏ ʹ Ϛ ʔ Ϋ Ξ ο ϓ ʁ
    l Ұ ෦ ͷ Ϣ ʔ β ʔ ʹ Α ͬ ͯ ͸ ૢ ࡞ ෆ ೳ ʹ ͳ ͬ ͯ ͠ · ͏ ʂ
    l ࣗ෼͕ߦͬͨϚʔΫΞοϓʹཧ༝͕ݴ͑Δ
    l ࢓ ༷ ΍ ن ֨ ʹ ཪ ෇ ͚ Β Ε ͨ ࠜ ڌ Λ ΋ ͯ Δ
    l ޙ͔ΒΩʔϘʔυૢ࡞ͳͲΞΫηγϏϦςΟରԠ͢Δͱ͖
    l े ෼ ʹ ݕ ౼ ͞ Ε ͨ ) 5 . - ʹ ޙ ͔ Β ର Ԡ ͢ Δ ͜ ͱ ͸ · ͩ Ͱ ͖ Δ
    l ద ੾ Ͱ ͳ ͍ Ϛ ʔ Ϋ Ξ ο ϓ ͩ ͱ Ԡ ٸ ॲ ஔ ͠ ͔ Ͱ ͖ ͳ ͍ Մ ೳ ੑ ΋

    View full-size slide

  24. কདྷͷల๬

    View full-size slide

  25. l ܧଓతʹΞΫηγϏϦςΟʹίϛοτ͢Δ࢓૊Έͮ͘Γ
    l ΑΓߴ೉қ౓ͷը໘ͷ࣮૷

    View full-size slide

  26. ܧଓతʹΞΫηγϏϦςΟʹ
    ίϛοτ͢Δ࢓૊Έͮ͘Γ

    View full-size slide

  27. ݱঢ়
    l ΞΫηγϏϦςΟͷࢼݧΛ͍ͯ͠ͳ͍
    l ΞΫηγϏϦςΟͷ඼࣭ͷΑ͋͠͠Λ൑அͰ͖ͳ͍
    l ൑ அ ͸ Ξ Ϋ η γ Ϗ Ϧ ς Ο ν ʔ Ϝ ґ ଘ

    View full-size slide

  28. ཧ૝ͷঢ়ଶ
    l ίϯϙʔωϯτΧλϩάɾυΩϡϝϯτͷ੔උ
    l ػցతͳνΣοΫ
    l & T M J O U ɾ $ * Ͱ ࣮ ࢪ ͢ Δ ࣗ ಈ ς ε τ
    l ਓؒʹΑΔνΣοΫ
    l 2 " Ͱ Ξ Ϋ η γ Ϗ Ϧ ς Ο ࢼ ݧ ͷ ࣮ ࢪ
    l 1%$" αΠΫϧΛճ͢

    View full-size slide

  29. ΑΓߴ೉қ౓ͷը໘ͷ࣮૷

    View full-size slide

  30. ΞϓϦ࡞੒ը໘ͷ֓ཁ
    ϑΟʔϧυΛυϥοάˍυϩοϓͰ഑ஔɺฒͼସ͑Ͱ͖Δ

    View full-size slide

  31. ΞϓϦ࡞੒ը໘ͷ໰୊఺
    l ૢ࡞͕Ϛ΢εʹґଘ͍ͯ͠Δ
    l υ ϥ ο ά ˍ υ ϩ ο ϓ ʹ Α Δ ഑ ஔ ɺ ฒ ͼ ସ ͑
    l ϗ ό ʔ ࣌ ʹ ද ࣔ ͞ Ε Δ Ϙ λ ϯ ͔ Β ݸ ผ ͷ ઃ ఆ μ Π Ξ ϩ ά Λ ։ ͘

    View full-size slide

  32. νϟϨϯδϯάͳ࣮૷
    l ΩʔϘʔυͳͲϚ΢εҎ֎ͷ୅ସखஈͷ࣮૷
    l ߟྀ఺͕ଟ͘೉қ౓͕ߴ͍
    l ࣮૷ग़དྷͨΒ
    l Α Γ ଟ ͘ ͷ ਓ ͕ ۀ ຿ վ ળ ʹ ࢀ Ճ Ͱ ͖ Δ Α ͏ ʹ ͳ Δ
    l Τ ϯ δ χ Ξ ͱ ͠ ͯ ͷ ε Ω ϧ Ξ ο ϓ ʹ ͳ Δ ˍ ࣗ ৴ ͕ ͭ ͘

    View full-size slide

  33. l ΞΫηγϏϦςΟʹίϛοτ͢Δͱɺ඼࣭͕޲্ͨ͠ΓɺΤ
    ϯδχΞͷεΩϧ΍ࢹ໺͕޿͕Δ
    l ΞΫηγϏϦςΟͷऔΓ૊Έ͸͜Ε͔Β
    l ͔ Β Ξ Ϋ η γ ϒ ϧ ͳ ઃ ܭ Λ ͢ Δ
    l ܧ ଓ త ʹ ඼ ࣭ Λ ߴ Ί Δ ౔ ୆ ࡞ Γ
    l ΞΫηγϒϧͳ࣮૷΍࢓૊Έͮ͘Γʹڵຯͷ͋ΔਓɺҰॹʹ
    औΓ૊Έ·͠ΐ͏

    View full-size slide


  34. ։ൃϝϯόʔืूதͰ͢ʂ
    ϑϩϯτΤϯυΤϯδχΞʢLJOUPOFΞʔΩςΫνϟ࡮৽
    1+ʣʹ͝Ԡื͍ͩ͘͞ʂ

    View full-size slide