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

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

A97eee01397705443a72a48ce29d3e19?s=47 Cybozu
PRO
October 13, 2021

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

A97eee01397705443a72a48ce29d3e19?s=128

Cybozu
PRO

October 13, 2021
Tweet

Transcript

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

  2. ύωϦετ঺հ 

  3. 46(*  • ΞΫηγϏϦςΟνʔϜॴଐ • ৽ଔ̎೥໨ • શ໡ͷΞΫηγϏϦςΟɾΤϯδχΞ • ΞΫηγϏϦςΟͷܒൃɾϓϩμΫτͷ

    ΞΫηγϏϦςΟ޲্ࢧԉ
  4. നௗѥඒ  • LJOUPOFνʔϜ 1( • ݩ ৽ػೳ։ൃνʔϜ • ϑϩϯτΤϯυ࡮৽ϓϩδΣΫτ

    • ৽ଔ̎೥໨ • ΞΫηγϏϦςΟνʔϜʹମݧೖ෦த
  5. ࠓ೔͓࿩͢͠Δ͜ͱ l LJOUPOFͱ͸ l ΞΫηγϏϦςΟͱ͸ l ϑϩϯτΤϯυ࡮৽ϓϩδΣΫτͰͷऔΓ૊Έ l ΤϯδχΞ͕ΞΫηγϏϦςΟʹίϛοτͯ͠Έͯ l

    কདྷͷల๬ 
  6. LJOUPOFͱ͸ 

  7. ։ൃͷ஌͕ࣝͳͯ͘΋ ۀ຿ʹ߹ΘͤͨγεςϜΛ ͔ΜͨΜʹ࡞੒Ͱ͖Δ Ϋϥ΢υαʔϏε  LJOUPOFͷ঺հ Ҿ༻ɿαΠϘ΢ζΤϯδχΞ࠾༻ϐον ಋೖࣾ਺  ࣾҎ্ʂ

  8. ϑϩϯτΤϯυ࡮৽ϓϩδΣΫτ l   ೥ۙ͘։ൃ͞Ε͖ͯͨ l $ MPTVS F 5PPMTओମͷίʔυϕʔε

    l ΞʔΩςΫνϟΛ࡮৽த l 5ZQ F 4 DS JQ U3F BDUʹஔ͖׵͑ΔϓϩδΣΫτ l ·ͣ͸ݹ͍σβΠϯͷϖʔδ͔Β࡮৽தʂ 
  9. ΞΫηγϏϦςΟͱ͸ 

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

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

    ΞΫηγϏϦςΟʹνʔϜʹࢀՃ͍ͨ͠ɾߩݙ͍ͨ͠ͱ͍͏ Ϣʔβͷࢥ͍Λଚॏ͢Δ͜ͱ 
  12. ΞΫηγϏϦςΟɺ͍ͭऔΓ૊Ήʁ 

  13. ޙ෇͚͸ίετ͕͔͔Δ l ৔౰ͨΓతͳରԠʹͳΓ͕ͪ l ઃܭɾ޻਺ͷ੍໿ͰखΛೖΕΒΕͳ͍͜ͱ΋ ࠷ॳ͔ΒͱΓ͘Ήͷ͕ϕετ l ϓϩμΫτ։ൃͷॳظஈ֊͔ΒऔΓ૊Ή l ৽

    α ʔ Ϗ ε ͷ ཱ ͪ ্ ͛ ɾ Ϧ χ ϡ ʔ Ξ ϧ ͳ Ͳ l ඼࣭ཁ݅ͷ̍ཁૉͱͯ͠ͱΒ͑Δ 
  14. ϑϩϯτΤϯυ࡮৽ͷ೾ʹ৐Δ l  ͔ΒΞΫηγϒϧͳઃܭΛ͢Δ l % 0 . ͷ ඼

    ࣭ ޲ ্ l σ β Π ϯ ࡮ ৽ ɾ ౷ Ұ l ܧଓతʹ඼࣭ΛߴΊΔ౔୆࡞Γ l Ξ Ϋ η γ ϒ ϧ ͳ ί ϯ ϙ ʔ ω ϯ τ ͷ ࡞ ੒ l & T M J O U ͳ Ͳ ͷ π ʔ ϧ ͷ ಋ ೖ 
  15. LJOUPOFͷϑϩϯτΤϯυ࡮৽ ϓϩδΣΫτͰͷऔΓ૊Έ 

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

  17. ૢ࡞ͷվળ #FGPSF"GUFS #FGPSF l UBC ϑΥʔΧεͰ͸%%ϘλϯʹϑΥʔΧε͕౰ͨΒͳ͍ l εΫϦʔϯϦʔμʔͰ͸ %%Ϙλϯʹֻ͔ࠩͬͨ͠ͱ͖ʹ ʮυϥοάʯͱಡΈ্͛Δ΋ͷͷɺૢ࡞͸Ͱ͖ͳ͍

    "GUFS l UBC Ͱ%%ϘλϯʹϑΥʔΧε͕౰ͨΓɺεϖʔεɾ໼ҹ ΩʔͰฒͼସ͑ૢ࡞͕Ͱ͖Δ l εΫϦʔϯϦʔμʔͰ͸ର৅ͷྻΛબ୒ͨ͠ঢ়ଶͷͱ͖ʮ໼ ҹΩʔͰฒͼସ͑ΒΕΔʯࢫͷಡΈ্͕͛͞ΕΔ 
  18. ૢ࡞ͷվળΛߦ͏ʹ͋ͨͬͯͷ޻෉ l 8" * " 3*" Λۦ࢖ͯ͠ɺͳΔ΂͘ࢹ֮৘ใͱಉ͚ͩ͡ͷ৘ใ ΛεΫϦʔϯϦʔμʔϢʔβʔʹ΋఻͑ΒΕΔΑ͏ʹ l 8

    " *  " 3 * " ɿ ) 5 . - ͷ η Ϛ ϯ ς Ο Ϋ ε Λ ֦ ு ͢ Δ ଐ ੑ ܈ l 8" * " 3*" ͕ରԠ͞Ε͍ͯͳ͍εΫϦʔϯϦʔμʔΛ࢖༻͠ ͍ͯΔϢʔβʔʹ΋࠷௿ݶͷ৘ใߏ଄͕఻ΘΔΑ͏ʹɺ )5.-ϨϕϧͰཧղɾૢ࡞͕Ͱ͖ΔΑ͏ʹ l ૢ࡞Մೳͳཁૉ͕ଟ͍৔໘Ͱ͸ɺUBC ΩʔΛԡ͢ճ਺͕ଟ͘ͳ Γ͗͢ͳ͍Α͏ʹɺ໼ҹΩʔͰҠಈͰ͖ΔΑ͏ʹ͢Δ l ૢ ࡞ ͠ ͳ ͍ ཁ ૉ ܈ ͸ U B C Ω ʔ Ͱ · ͱ Ί ͯ ඈ ͹ ͤ Δ Α ͏ ʹ ͳ Δ 
  19. σβΠϯ࡮৽ʹ߹ΘͤͯվળதͷऔΓ૊Έྫ ίϯτϥετվળ l ΋ͱ΋ͱ໌Δ͍ϒϧʔ΍୶͍άϨʔɾϒϧʔ͕ଟ͍ ϑΥʔΧεΠϯδέʔλʔ l ΩʔϘʔυϑΥʔΧεՄೳͳཁૉʹϑΥʔΧεΠϯδέʔ λʔΛ͚͍ͭͯΔ l վળલ͸ϑΥʔΧεΠϯδέʔλʔ͕ͳ͍΋ͷ΋ଟ͋͘Γɺ

    ϑΥʔΧε͞Ε͍ͯΔ৔ॴ͕શ͘ࢹೝͰ͖ͳ͍ঢ়ଶ 
  20. ΤϯδχΞ͕ΞΫηγϏϦςΟʹ ίϛοτͯ͠ݟ͖͑ͯͨ͜ͱ 

  21. ͳͥମݧೖ෦͠Α͏ͱࢥͬͨͷ͔ l ৽͍͠ίϯϙʔωϯτΛଟ਺࡞Δػೳͷ୲౰ʹͳΔ l Ξ Ϋ η γ Ϗ Ϧ

    ς Ο ν ʔ Ϝ ͱ ڠ ྗ ͠ ͳ ͕ Β ) 5 . -  ͷ ઃ ܭ Λ ͢ Δ த Ͱ ɺ อ क ੑ Λ ߟ ͑ ͨ ͱ ͖ ʹ ن ֨ ʹ ߹ க ͠ ͨ ) 5 . - ɾ 8 " *  " 3 * "  ͷ ࣮ ૷ Ͱ ͋ Δ ͜ ͱ ͕ ϕ ε τ ͩ ͱ ͍ ͏ ߟ ͑ ʹ l ϑϩϯτΤϯυ࡮৽ϓϩδΣΫτͷ׆ಈͷ֦େΛલʹ஌ࣝΛ ͚͓͖͍ͭͯͨʂ l อ क ੑ ͷ ߴ ͍ ) 5 . - ɾ 8 " *  " 3 * "  Λ ษ ڧ ͢ Δ ͨ Ί ʹ Ξ Ϋ η γ Ϗ Ϧ ς Ο ν ʔ Ϝ ʹ ମ ݧ ೖ ෦ Λ ߟ ͑ Δ 
  22. ମݧೖ෦ͰΞΫηγϏϦςΟʹίϛοτͯ͠Έͯ l ϓϩμΫτͷݟํ͕มΘΔ l อकੑͷߴ͍)5.-ͷݕ౼ 

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

    ಈ࡞֬ೝ͢Δͱ͖ʹΩʔϘʔυૢ࡞΋͢ΔΑ͏ʹͳͬͨ 
  24. อकੑͷߴ͍ )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 ద ੾ Ͱ ͳ ͍ Ϛ ʔ Ϋ Ξ ο ϓ ͩ ͱ Ԡ ٸ ॲ ஔ ͠ ͔ Ͱ ͖ ͳ ͍ Մ ೳ ੑ ΋ 
  25. কདྷͷల๬ 

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

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

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

    Ϋ η γ Ϗ Ϧ ς Ο ν ʔ Ϝ ґ ଘ 
  29. ཧ૝ͷঢ়ଶ l ίϯϙʔωϯτΧλϩάɾυΩϡϝϯτͷ੔උ l ػցతͳνΣοΫ l & T M J

    O U ɾ $ * Ͱ ࣮ ࢪ ͢ Δ ࣗ ಈ ς ε τ l ਓؒʹΑΔνΣοΫ l 2 " Ͱ Ξ Ϋ η γ Ϗ Ϧ ς Ο ࢼ ݧ ͷ ࣮ ࢪ l 1%$" αΠΫϧΛճ͢ 
  30. ΑΓߴ೉қ౓ͷը໘ͷ࣮૷ 

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

  32. ΞϓϦ࡞੒ը໘ͷ໰୊఺ l ૢ࡞͕Ϛ΢εʹґଘ͍ͯ͠Δ l υ ϥ ο ά ˍ υ

    ϩ ο ϓ ʹ Α Δ ഑ ஔ ɺ ฒ ͼ ସ ͑ l ϗ ό ʔ ࣌ ʹ ද ࣔ ͞ Ε Δ Ϙ λ ϯ ͔ Β ݸ ผ ͷ ઃ ఆ μ Π Ξ ϩ ά Λ ։ ͘ 
  33. νϟϨϯδϯάͳ࣮૷ l ΩʔϘʔυͳͲϚ΢εҎ֎ͷ୅ସखஈͷ࣮૷ l ߟྀ఺͕ଟ͘೉қ౓͕ߴ͍ l ࣮૷ग़དྷͨΒ l Α Γ

    ଟ ͘ ͷ ਓ ͕ ۀ ຿ վ ળ ʹ ࢀ Ճ Ͱ ͖ Δ Α ͏ ʹ ͳ Δ l Τ ϯ δ χ Ξ ͱ ͠ ͯ ͷ ε Ω ϧ Ξ ο ϓ ʹ ͳ Δ ˍ ࣗ ৴ ͕ ͭ ͘ 
  34. ·ͱΊ 

  35. l ΞΫηγϏϦςΟʹίϛοτ͢Δͱɺ඼࣭͕޲্ͨ͠ΓɺΤ ϯδχΞͷεΩϧ΍ࢹ໺͕޿͕Δ l ΞΫηγϏϦςΟͷऔΓ૊Έ͸͜Ε͔Β l  ͔ Β Ξ

    Ϋ η γ ϒ ϧ ͳ ઃ ܭ Λ ͢ Δ l ܧ ଓ త ʹ ඼ ࣭ Λ ߴ Ί Δ ౔ ୆ ࡞ Γ l ΞΫηγϒϧͳ࣮૷΍࢓૊Έͮ͘Γʹڵຯͷ͋ΔਓɺҰॹʹ औΓ૊Έ·͠ΐ͏ 
  36.  ։ൃϝϯόʔืूதͰ͢ʂ ϑϩϯτΤϯυΤϯδχΞʢLJOUPOFΞʔΩςΫνϟ࡮৽ 1+ʣʹ͝Ԡื͍ͩ͘͞ʂ