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

    l ΞʔΩςΫνϟΛ࡮৽த l 5ZQ F 4 DS JQ U3F BDUʹஔ͖׵͑ΔϓϩδΣΫτ l ·ͣ͸ݹ͍σβΠϯͷϖʔδ͔Β࡮৽தʂ 
  2. ϑϩϯτΤϯυ࡮৽ͷ೾ʹ৐Δ l  ͔ΒΞΫηγϒϧͳઃܭΛ͢Δ l % 0 . ͷ ඼

    ࣭ ޲ ্ l σ β Π ϯ ࡮ ৽ ɾ ౷ Ұ l ܧଓతʹ඼࣭ΛߴΊΔ౔୆࡞Γ l Ξ Ϋ η γ ϒ ϧ ͳ ί ϯ ϙ ʔ ω ϯ τ ͷ ࡞ ੒ l & T M J O U ͳ Ͳ ͷ π ʔ ϧ ͷ ಋ ೖ 
  3. ૢ࡞ͷվળ #FGPSF"GUFS #FGPSF l UBC ϑΥʔΧεͰ͸%%ϘλϯʹϑΥʔΧε͕౰ͨΒͳ͍ l εΫϦʔϯϦʔμʔͰ͸ %%Ϙλϯʹֻ͔ࠩͬͨ͠ͱ͖ʹ ʮυϥοάʯͱಡΈ্͛Δ΋ͷͷɺૢ࡞͸Ͱ͖ͳ͍

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

    " *  " 3 * " ɿ ) 5 . - ͷ η Ϛ ϯ ς Ο Ϋ ε Λ ֦ ு ͢ Δ ଐ ੑ ܈ l 8" * " 3*" ͕ରԠ͞Ε͍ͯͳ͍εΫϦʔϯϦʔμʔΛ࢖༻͠ ͍ͯΔϢʔβʔʹ΋࠷௿ݶͷ৘ใߏ଄͕఻ΘΔΑ͏ʹɺ )5.-ϨϕϧͰཧղɾૢ࡞͕Ͱ͖ΔΑ͏ʹ l ૢ࡞Մೳͳཁૉ͕ଟ͍৔໘Ͱ͸ɺUBC ΩʔΛԡ͢ճ਺͕ଟ͘ͳ Γ͗͢ͳ͍Α͏ʹɺ໼ҹΩʔͰҠಈͰ͖ΔΑ͏ʹ͢Δ l ૢ ࡞ ͠ ͳ ͍ ཁ ૉ ܈ ͸ U B C Ω ʔ Ͱ · ͱ Ί ͯ ඈ ͹ ͤ Δ Α ͏ ʹ ͳ Δ 
  5. ͳͥମݧೖ෦͠Α͏ͱࢥͬͨͷ͔ l ৽͍͠ίϯϙʔωϯτΛଟ਺࡞Δػೳͷ୲౰ʹͳΔ l Ξ Ϋ η γ Ϗ Ϧ

    ς Ο ν ʔ Ϝ ͱ ڠ ྗ ͠ ͳ ͕ Β ) 5 . -  ͷ ઃ ܭ Λ ͢ Δ த Ͱ ɺ อ क ੑ Λ ߟ ͑ ͨ ͱ ͖ ʹ ن ֨ ʹ ߹ க ͠ ͨ ) 5 . - ɾ 8 " *  " 3 * "  ͷ ࣮ ૷ Ͱ ͋ Δ ͜ ͱ ͕ ϕ ε τ ͩ ͱ ͍ ͏ ߟ ͑ ʹ l ϑϩϯτΤϯυ࡮৽ϓϩδΣΫτͷ׆ಈͷ֦େΛલʹ஌ࣝΛ ͚͓͖͍ͭͯͨʂ l อ क ੑ ͷ ߴ ͍ ) 5 . - ɾ 8 " *  " 3 * "  Λ ษ ڧ ͢ Δ ͨ Ί ʹ Ξ Ϋ η γ Ϗ Ϧ ς Ο ν ʔ Ϝ ʹ ମ ݧ ೖ ෦ Λ ߟ ͑ Δ 
  6. อकੑͷߴ͍ )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 ద ੾ Ͱ ͳ ͍ Ϛ ʔ Ϋ Ξ ο ϓ ͩ ͱ Ԡ ٸ ॲ ஔ ͠ ͔ Ͱ ͖ ͳ ͍ Մ ೳ ੑ ΋ 
  7. ཧ૝ͷঢ়ଶ l ίϯϙʔωϯτΧλϩάɾυΩϡϝϯτͷ੔උ l ػցతͳνΣοΫ l & T M J

    O U ɾ $ * Ͱ ࣮ ࢪ ͢ Δ ࣗ ಈ ς ε τ l ਓؒʹΑΔνΣοΫ l 2 " Ͱ Ξ Ϋ η γ Ϗ Ϧ ς Ο ࢼ ݧ ͷ ࣮ ࢪ l 1%$" αΠΫϧΛճ͢ 
  8. ΞϓϦ࡞੒ը໘ͷ໰୊఺ l ૢ࡞͕Ϛ΢εʹґଘ͍ͯ͠Δ l υ ϥ ο ά ˍ υ

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

    ଟ ͘ ͷ ਓ ͕ ۀ ຿ վ ળ ʹ ࢀ Ճ Ͱ ͖ Δ Α ͏ ʹ ͳ Δ l Τ ϯ δ χ Ξ ͱ ͠ ͯ ͷ ε Ω ϧ Ξ ο ϓ ʹ ͳ Δ ˍ ࣗ ৴ ͕ ͭ ͘ 
  10. l ΞΫηγϏϦςΟʹίϛοτ͢Δͱɺ඼࣭͕޲্ͨ͠ΓɺΤ ϯδχΞͷεΩϧ΍ࢹ໺͕޿͕Δ l ΞΫηγϏϦςΟͷऔΓ૊Έ͸͜Ε͔Β l  ͔ Β Ξ

    Ϋ η γ ϒ ϧ ͳ ઃ ܭ Λ ͢ Δ l ܧ ଓ త ʹ ඼ ࣭ Λ ߴ Ί Δ ౔ ୆ ࡞ Γ l ΞΫηγϒϧͳ࣮૷΍࢓૊Έͮ͘Γʹڵຯͷ͋ΔਓɺҰॹʹ औΓ૊Έ·͠ΐ͏