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

Transcript

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

   View Slide

2. ύωϦετ঺հ
   
   

   View Slide

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

   View Slide

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

   View Slide

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

   View Slide

6. LJOUPOFͱ͸
   
   

   View Slide

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

   View Slide

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

   View Slide

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

   View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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 ద ੾ Ͱ ͳ ͍ Ϛ ʔ Ϋ Ξ ο ϓ ͩ ͱ Ԡ ٸ ॲ ஔ ͠ ͔ Ͱ ͖ ͳ ͍ Մ ೳ ੑ ΋
    
    

    View Slide

25. কདྷͷల๬
    
    

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

34. ·ͱΊ
    
    

    View Slide

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

    View Slide

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

    View Slide