2019-08 アクセシビリティ/2019-08 Accessibility

Transcript

1. ΞΫηγϏϦςΟ
   開発研修
   ΞΫηγϏϦςΟ
   
   

   View Slide

2. ΞΫηγϏϦςΟͱ͸ͳʹ͔ʁ
   復習
   

   View Slide

3. ΞΫηγϏϦςΟʹো֐ऀɾߴྸऀରԠʁ
   

   View Slide

4. ΞΫηγϏϦςΟͱ͸
   ো֐ऀɾߴྸऀΛؚΊͯʮ͢΂ͯͷਓʯ͕
   ੡඼΍αʔϏεʹΞΫηεͰ͖Δ͜ͱ
   

   View Slide

5. ʮ͢΂ͯͷਓʯ
   個⼈の特性 デバイス 場⾯・状況
   

   View Slide

6. αΠϘ΢ζͷཧ૝
   νʔϜϫʔΫ͋;ΕΔࣾձΛ૑Δ
   

   View Slide

7. αΠϘ΢ζʹͱͬͯɺΞΫηγϏϦςΟͱ͸
   ʮϢʔβ͕νʔϜʹΞΫηεͰ͖Δೳྗʯ
   

   View Slide

8. ΞΫηγϏϦςΟΛ֬อ͢Δ͜ͱ͸
   ʮνʔϜʹࢀՃ͍ͨ͠ʯͱ͍͏Ϣʔβͷئ͍Λ
   ଚॏ͢Δ͜ͱ
   

   View Slide

9. View Slide

10. ۩ମతʹͲ͏ରԠ͢Ε͹Α͍ʁ
    

    View Slide

11. https://waic.jp/docs/WCAG20/
    

    View Slide

12. • 8FC$POUFOU"DDFTTJCJMJUZ(VJEFMJOF
    • 8$͕ൃߦ͍ͯ͠ΔΞΫηγϏϦςΟΨΠυϥΠϯ
    • ࠃ಺֎ͷ๏཯΍+*4*40౳ͷن֨͸8$"(ʹ४ڌ
    • ߲໨ΛϨϕϧผʹ෼ྨʢ" "" """ʣ
    8$"(
    

    View Slide

13. ΞΫηγϏϦςΟͷղ๤
    ώϡʔϚϯ
    Ϧʔμϒϧ
    Ϛγϯ
    Ϧʔμϒϧ
    

    View Slide

14. ώϡʔϚϯϦʔμϒϧ
    

    View Slide

15. ʮ͢΂ͯͷਓʯ͕஌֮ɾཧղɾૢ࡞Ͱ͖Δ͔
    ώϡʔϚϯϦʔμϒϧ
    

    View Slide

16. ൑ผՄೳ
    ίϯςϯπΛɺར༻ऀʹͱͬͯݟ΍͘͢ɺฉ͖΍͍͢΋ͷʹ͢Δ͜ͱ
    ͜Εʹ͸લܠͱഎܠΛ۠ผ͢Δ͜ͱ΋ؚΉ
    ஌֮Մೳ
    

    View Slide

17. े෼ͳ࣌ؒ
    ར༻ऀ͕ίϯςϯπΛಡΈɺ࢖༻͢ΔͨΊʹे෼ͳ࣌ؒΛఏڙ͢Δ͜ͱ
    ൃ࡞ͷ๷ࢭ
    ൃ࡞Λى͜͢Α͏ͳίϯςϯπΛઃܭ͠ͳ͍͜ͱ
    φϏήʔγϣϯՄೳ
    ར༻ऀ͕φϏήʔτͨ͠ΓɺίϯςϯπΛ୳͠ग़ͨ͠Γɺ
    ݱࡏҐஔΛ֬ೝͨ͠Γ͢Δ͜ͱΛखॿ͚͢ΔखஈΛఏڙ͢Δ͜ͱ
    ཧղՄೳ
    

    View Slide

18. ಡΈ΍͢͞
    ςΩετͷίϯςϯπΛಡΈ΍͘͢ཧղՄೳʹ͢Δ͜ͱ
    ༧ଌՄೳ
    8FCϖʔδͷදࣔ΍ڍಈΛ༧ଌՄೳʹ͢Δ͜ͱ
    ೖྗࢧԉ
    ೖྗऀͷؒҧ͍Λ๷͗ɺमਖ਼Λࢧԉ͢Δ͜ͱ
    ૢ࡞Մೳ
    

    View Slide

19. https://developer.apple.com/design/human-
    interface-guidelines/accessibility/
    

    View Slide

20. ͋ͳͨͷՁ஋ΛߴΊΔ8FCΞΫηγϏϦςΟ
    IUUQTXXXTMJEFTIBSFOFUSJLJIBXFC
    

    View Slide

21. ϚγϯϦʔμϒϧ
    

    View Slide

22. View Slide

23. View Slide

24. View Slide

25. View Slide

26. View Slide

27. View Slide

28. • ςΩετϒϥ΢β
    • ఺ࣈσΟεϓϨΠ
    • εΫϦʔϯϦʔμʔ
    • ະདྷͷσόΠε
    8FCͷ͔ͨͪ͸͞·͟·
    • ϏδϡΞϧϒϥ΢β
    • εϚʔτϑΥϯ
    • ݕࡧΤϯδϯʹΑΔݕࡧ݁Ռ
    • εΫϨΠϐϯάαʔϏε
    

    View Slide

29. ίϯςϯπ͕Ϣʔβʹಧ͘·Ͱ
    ৘ใ
    ίϯςϯπ
    
    )5.-$44+4
    ϒϥ΢β
    ࢧԉٕज़
    Ϣʔβʔ
    

    View Slide

30. ϚγϯϦʔμϒϧͷྫ
    

    View Slide

31. View Slide

32. ͜ΕͰΑ͍ͩΖ͏͔
    
    

    View Slide

33. ը૾ͷ಺༰Λػցʹཧղͤ͞Α͏
    
    

    View Slide

34. View Slide

35. ݟग़͠Ͱ͋Δ͜ͱΛػցʹཧղͤ͞Α͏
    
    
    
    

    View Slide

36. 8FCΞΫηγϏϦςΟ֬อ
    جຊͷʮΩʯ
    

    View Slide

37. https://weba11y.jp/pdf/weba11y-10basics.pdf
    

    View Slide

38. ֤ϖʔδʹݻ༗Ͱɺผͷ8FCαΠτͱ۠ผͰ͖ΔΑ͏ʹ
    ϖʔδͷ಺༰͕෼͔ΔϖʔδλΠτϧΛهड़͢Δ
    ࣾ௕ѫࡰ – αΠϘ΢ζגࣜձࣾ
    

    View Slide

39. View Slide

40. ϚγϯϦʔμϒϧͷجຊ
    • εΫϦʔϯϦʔμʔ͸ʮݟग़͠ʯʮϦετʯͳͲɺߏ଄ΛಡΉ
    • ݟग़͠͝ͱʹδϟϯϓ͢ΔͳͲɺಡΈඈ͹͢͜ͱ͕Ͱ͖Δ
    ݟग़͠΍ϦετͳͲͷจॻߏ଄ΛϚʔΫΞοϓ͢Δ
    kintoneΞϓϦετΞ
    

    View Slide

41. ϦϯΫจݴ͚ͩͰҙຯ͕Θ͔ΔΑ͏ʹ͢Δ
    ʮ͜͜ΛΫϦοΫʯʮ͞ΒʹදࣔʯʮৄࡉΛݟΔʯʜ
    จݴΛม͑Δͷ͕೉͚͠Ε͹ɺपғͷݟग़͠ͱ૊Έ߹ΘͤΔ
    ϦϯΫςΩετ͸ɺϦϯΫઌ͕෼͔Δจݴʹ͢Δ
    

    View Slide

42. View Slide

43. ͢΂ͯͷJNHཁૉʹద੾ͳBMUଐੑΛ͚ͭΔ
    ৘ใΛ఻͍͑ͯΔը૾ʹ୅ସςΩετΛఏڙ͢Δ
    
    

    View Slide

44. BMUଐੑͳ͠ BMU
    BMUը૾ BMUαΠϘ΢ζ
    https://jsfiddle.net/ux28cdvk/1/
    

    View Slide

45. 
    
    
    ୅ସςΩετͷྫ ݕࡧϘλϯ
    

    View Slide

46. 
    ୅ସςΩετͷྫ r ԁάϥϑ
    

    View Slide

47. ୅ସςΩετΛলུ͢Δྫ
    Home
    

    View Slide

48. ৭ͷΈʹґଘͨ͠৘ใΛఏڙ͠ͳ͍
    ৘ใΛ఻͑Δ৭ͷ࢖͍ํʹ஫ҙ͢Δ
    Ұൠ৭֮ 1ܕ৭֮ 5ܕ৭֮
    

    View Slide

49. 
    " " " " " " " " " "
    จࣈͱഎܠ৭ͷίϯτϥετൺΛҎ্ʹ͢Δ
    ৘ใΛ఻͑Δ৭ͷ࢖͍ํʹ஫ҙ͢Δ
    

    View Slide

50. $ISPNF%FWFMPQFS5PPMTͰଌఆͰ͖Δ
    ίϯτϥετൺͷଌఆ
    

    View Slide

51. ը໘શମΛ֦େͯ͠ɺཧղɾૢ࡞Ͱ͖ͳ͍಺༰͕ͳ͍͔
    ཁૉͷதͷจࣈ͕͸Έग़ͨ݁͠ՌɺผͷཁૉʹඃΔͳͲ
    
    Ϣʔβʔ͕ίϯςϯπΛ֦େදࣔͰ͖ΔΑ͏ʹ͢Δ
    

    View Slide

52. https://bozuman.cybozu.com/k/13084/show#record=3433
    

    View Slide

53. https://bozuman.cybozu.com/k/13084/show#record=3433
    

    View Slide

54. ΩʔϘʔυ͚ͩͰ΋ૢ࡞Ͱ͖ΔΑ͏ʹ͢Δ
    保存
    

    View Slide

55. ଐੑ஋Ͱमਖ਼͠Α͏ͱ͢Δͱʜ
    onKeyUp=… tabindex="0" role="button">保存
    

    View Slide

56. ΫϦοΫͰ͖Δཁૉ͸ Bཁૉ PS CVUUPOཁૉ Ͱ࣮૷͠Α͏
    ద੾ͳཁૉΛ࢖͓͏
    ボタン
    

    View Slide

57. • σϑΥϧτͷ$44Ͱ͸ΩʔϘʔυ͕ࢹೝͰ͖Δ
    • PVUMJOFOPOF͢ΔͱɺσϑΥϧτελΠϧ͕ফ͑Δ
    ͜ͷ৔߹ɺඞͣGPDVTελΠϧΛ͚ͭΔ
    • SFTFUDTTΛ࢖͏৔߹͸ཁ஫ҙ
    ΩʔϘʔυૢ࡞ΛࢹೝͰ͖ΔΑ͏ʹ͠Α͏
    a:focus { text-decoration: underline; }
    

    View Slide

58. http://www.outlinenone.com/
    

    View Slide

59. • εΫϦʔϯϦʔμʔ͸ϑΥʔϜʹϑΥʔΧεͨ͠ͱ͖
    ϥϕϧΛಡΈ্͛Δ
    • ϥϕϧ͕͍͍ͭͯͳ͍ͱɺԿΛೖྗͯ͠ྑ͍͔Θ͔Βͳ͍
    ϑΥʔϜίϯτϩʔϧͷϥϕϧ΍આ໌ΛϚʔΫΞοϓ͢Δ
    ユーザ名
    
    

    View Slide

60. ϥϕϧΛ͚ͭΔํ๏
    Ϣʔβ໊
    
    placeholder="Ϣʔβ໊Λೖྗ" />
    ラベルが配置できるとき
    ラベルが配置できないとき
    

    View Slide

61. Ϣʔβ͕ΤϥʔϝοηʔδΛಡΜͰɺ
    ͲͷΑ͏ʹमਖ਼͢Ε͹ྑ͍͔ཧղͰ͖Δ
    ΤϥʔϝοηʔδͰ͸ΤϥʔՕॴͱमਖ਼ํ๏Λ໌ࣔ͢Δ
    

    View Slide

62. View Slide

63. ಈըʹΩϟϓγϣϯʢࣈນʣΛఏڙ͢Δ
    ＝
    Ի੠Ͱఏڙ͞ΕΔ৘ใ ө૾Ͱఏڙ͞ΕΔ৘ใ
    

    View Slide

64. • ొ৔ਓ෺ͷൃ࿩಺༰
    • #(.ͳͲͷԻָ
    • ഥखɺ׻੠
    • ؀ڥԻʢి࿩ͷݺग़ԻɺυΞ͕։ด͢ΔԻɺνϟΠϜɺཕ໐ͳͲʣ
    ಈըʹΩϟϓγϣϯʢࣈນʣΛఏڙ͢Δ
    

    View Slide

65. • ΞΫηγϏϦςΟ͸ʮ͢΂ͯͷਓʯͷͨΊ
    • ΞΫηγϏϦςΟͷղ๤
    • ώϡʔϚϯϦʔμϒϧ
    • ϚγϯϦʔμϒϧ
    • ΞΫηγϏϦςΟجຊͷΩ
    ·ͱΊ
    

    View Slide

66. ΞΫηγϏϦςΟʹ
    ΑΓਂ͘औΓ૊Ήʹ͸ʁ
    

    View Slide

67. • σβΠχϯά8FCΞΫηγϏϦςΟ
    ΞΫηγϏϦςΟڭՊॻͷܾఆ൛
    • ίʔσΟϯά8FCΞΫηγϏϦςΟ
    ΑΓϚγϯϦʔμϒϧͳ)5.-Λॻͨ͘Ίʹ
    • ΠϯΫϧʔγϒ)5.-$44+BWB4DSJQU
    ༏Εͨॻ੶Λಡ΋͏
    

    View Slide

68. https://bozuman.cybozu.com/k/#/space/19
    

    View Slide

69. ࣭໰ʁ
    

    View Slide