0→1フェーズでのアクセシビリティへの取り組み

Transcript

1. ˠϑΣʔζͰͷΞΫηγϏ ϦςΟ΁ͷऔΓ૊Έ
   
   5VF
   ˠΛεΫϥϜͰ΍ͬͯΈͨ
   εΩϧ؅ཧػೳͷ࡞Γํ ණݟ
   ޹߂
   4NBSU)3
   ϓϩμΫτΤϯδχΞ
2. ࣗݾ঺հ ɾ໊લɿhimiʢ@himi_himi_ʣ ɾSmartHRϓϩμΫτΤϯδχΞάϧʔϓ ɾϑϩϯτΤϯυΤϯδχΞ ɹɾReact, TypeScript, Next.js ɾ๺ւಓࡳຈࢢ͔ΒϑϧϦϞʔτۈ຿
3. ࠓ೔࿩͢͜ͱ
4. ΞΫηγϏϦςΟʹ͍ͭͯ
   ɾˠϑΣʔζͰऔΓ૊Μͩ಺༰
   ɾˠϑΣʔζͰऔΓ૊ΜͰྑ͔ͬͨ͜ͱ
   ɾˠϑΣʔζͰऔΓ૊ΜͰ೉͔ͬͨ͜͠ͱ
5. ˠϑΣʔζͰऔΓ૊Μͩ ಺༰
   
6. σβΠϯɾ࢓༷ࡦఆϑΣʔζ
7. ΞΫηγϏϦςΟʹ͍ͭͯؾʹͳͬͨ఺ʹ͍ͭͯਵ ࣌ίϝϯτ🗣
   ɾจࣈαΠζɺจࣈྔʹґଘͨ͠UIʹͳͬͯͳ͍͔ ɹɾจࣈαΠζΛ֦େͨ͠ΓɺଟݴޠԽͨ͠ࡍʹจࣈྔ͕૿͑ͯ΋໰୊ແ͍͔ ɾεΫϦʔϯϦʔμʔར༻ऀʹͱͬͯ࢖͍ͮΒ͍UIʹͳͬͯແ͍͔ ɹɾϑΥʔϜ΍ϘλϯͷDescriptionͷҐஔɺϘλϯͷϥϕϧͷจݴͳͲ ͳͲͳͲ…
8. ΞΫηγϏϦςΟ΁ͷίϝϯτʹඞཁͳ஌ࣝ͸ࣾ಺ Ͱഓͬͨ΋ͷ͕΄ͱΜͲ📚
   ɾSmartHRओ࠵Ͱ։࠵ͨ͠ॻ੶ʮWebΞϓϦέʔγϣϯΞΫηγϏϦ ςΟʯྠಡձ ɾࣾ಺Ͱ։࠵͞Ε͍ͯΔΞΫηγϏϦςΟϚελʔཆ੒ߨ࠲
9. Α͘Θ͔Βͳ͍৔߹͸ࣾ಺ͷΞΫηγϏϦςΟεϖ γϟϦετʹਵ࣌૬ஊ🙏
   ɾɹɹɹɹmasuP9ʢ@masuP9ʣ ɾɹɹɹɹmaihaʢ@mt_dew2ʣ ɾɹɹɹɹmaverickʢ@KatsutoshiTsujiʣ
10. ࣮૷ϑΣʔζ
11. 4NBSU)3
    6*Λར༻ͯ͠։ൃ👩💻
    ɾ4NBSU)3͕։ൃ͍ͯ͠Δ6*ίϯϙʔωϯτू
    ɾΞΫηγϏϦςΟରԠ΋ਐΜͰ͓Γɺ4NBSU)3
    6*Λར༻ͯ͠։ൃ͢ Δ͜ͱͰجຊతͳ಺༰͸୲อ͞ΕΔ
12. ΞΫηγϏϦςΟ޲্ͷͨΊͷ࣮૷ᶃ
    ɾλϒ6*ΛεΫϦʔϯϦʔμʔͰಡΈ্͛ͨࡍɺ໰୊ͳ͘ಡΈ্͛Β ΕΔΑ͏ʹ࣮૷
    ɹɾSPMF
    BSJBDPOUSPMFT
    BSJBMBCFMMFECZ
    BSJBTFMFDUFEͳͲͷଐੑΛద੾ʹઃఆ
13. ΞΫηγϏϦςΟ޲্ͷͨΊͷ࣮૷ᶄ
    ɾϞόΠϧ୺຤ͰจࣈαΠζΛେ͖ͯ͘͠΋ද่ࣔΕ͕ແ͍Α͏࣮૷
14. ಈ࡞ݕূϑΣʔζ
15. ΞΫηγϏϦςΟνΣοΫΛ࣮ࢪ✅
    ɾࣾ಺ͷΞΫηγϏϦςΟεϖγϟϦετʹओಋͯ͠΋Β͍࣮ͭͭࢪ ɾSmartHRͰ࡞੒͍ͯ͠Δ΢ΣϒΞΫηγϏϦςΟ؆қνΣοΫϦε τͷ߲໨ΛνΣοΫ ɹɾhttps://smarthr.design/accessibility/check-list/
17. ϦϦʔεޙ
18. ΞΫηγϏϦςΟ޲্ͷ׆ಈ͸ଓ͍͍ͯΔ🏃
    ɾϦϦʔεલʹશػೳͷΞΫηγϏϦςΟରԠΛ׬ྃͰ͖ͨΘ͚Ͱ͸ ͳ͍ͷͰɺҾ͖ଓ͖ରԠΛߦ͍ͬͯΔ
19. ˠϑΣʔζͰऔΓ૊ΜͰྑ ͔ͬͨ͜ͱ
    
20. ઃܭΛࠜຊ͔Βݟ௚͞ͳ͚Ε͹ΞΫηγϒϧʹͰ͖ ͳ͍ը໘͕ੜ·Εͳ͔ͬͨ🎉
21. νʔϜͷϝϯόʔʹΞΫηγϏϦςΟʹڵຯΛ࣋ͬ ͯ΋Β͑ͨ🎉
    ɾΞΫηγϏϦςΟεϖγϟϦετͱͷ૬ஊձʹ͸ɺσβΠφʔ΍QA ΤϯδχΞɺUXW΋ڵຯΛ࣋ͬͯࢀՃͯ͘͠Εͨ🫶
22. ˠϑΣʔζͰऔΓ૊ΜͰ
    ೉͔ͬͨ͜͠ͱ
    
23. ϦϦʔε·ͰͷݶΒΕͨ࣌ؒͱϦιʔεͷதͰɺͲ ͜·ͰΞΫηγϏϦςΟʹ౤ࢿ͢Δ͔ͷ൑அ🤯
    ɾϦϦʔεͰ͖ͳ͚Ε͹୭΋ΞΫηεͰ͖ͳ͍ ɾ࣌ؒͱϦιʔε͸ແݶͰ͸ͳ͍
24. ΞΫηγϏϦςΟνΣοΫΛߦ͏ػೳʹ͍ͭͯɺ༏ ઌ౓Λݕ౼͠ͳ͕ΒରԠΛਐΊͨ🧐
    ɾϦϦʔε·ͰʹͲͷػೳʹ͍ͭͯͲͷϨϕϧ·ͰରԠ͢Δ͔ΛܾΊ Δ ɾར༻ऀ͕ଟ͍toCͷੑ࣭Λ࣋ͭը໘ʹ͍ͭͯ༏ઌతʹରԠΛਐΊͨ
25. ·ͱΊ
26. ɾࣾ಺ͷΞΫηγϏϦςΟεϖγϟϦετʹڠྗͯ͠΋Β͍ͳ͕Βɺ 0→1ϑΣʔζ͔ΒΞΫηγϏϦςΟʹऔΓ૊Μͩ💪 ɾ0→1ϑΣʔζ͔ΒऔΓ૊Ή͜ͱͰɺઃܭΛࠜຊతʹݟ௚͞ͳ͚Ε͹ ΞΫηγϒϧʹͰ͖ͳ͍ը໘͕ੜ·Εͳ͔ͬͨ🎉 ɾϦϦʔε·Ͱͷ࣌ؒͱϦιʔε͸ແݶͰ͸ͳ͍ͷͰɺ༏ઌ౓Λߟ͑ ͳ͕ΒରԠΛਐΊͨ🤔 ɾϦϦʔεޙ΋ΞΫηγϏϦςΟ޲্ͷͨΊͷ׆ಈ͸ଓ͍͍ͯΔ🏃
27. ͓ΘΓ