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

Transcript

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

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

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

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

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

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

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

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

9. None

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

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

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

    8$"(

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

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

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

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

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

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

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

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

21. ϚγϯϦʔμϒϧ

22. None
23. None
24. None
25. None
26. None
27. None

28. • ςΩετϒϥ΢β • ఺ࣈσΟεϓϨΠ • εΫϦʔϯϦʔμʔ • ະདྷͷσόΠε 8FCͷ͔ͨͪ͸͞·͟· •

    ϏδϡΞϧϒϥ΢β • εϚʔτϑΥϯ • ݕࡧΤϯδϯʹΑΔݕࡧ݁Ռ • εΫϨΠϐϯάαʔϏε

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

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

31. None

32. ͜ΕͰΑ͍ͩΖ͏͔ <img src="appstore.png" />

33. ը૾ͷ಺༰Λػցʹཧղͤ͞Α͏ <img src="appstore.png" alt="kintoneアプリストア" />

34. None

35. ݟग़͠Ͱ͋Δ͜ͱΛػցʹཧղͤ͞Α͏ <h2> <img src="appstore.png" alt="kintoneアプリストア" /> </h2>

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

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

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

39. None

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

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

42. None

43. ͢΂ͯͷJNHཁૉʹద੾ͳBMUଐੑΛ͚ͭΔ 
    ৘ใΛ఻͍͑ͯΔը૾ʹ୅ସςΩετΛఏڙ͢Δ <img src="logo.svg" alt="αΠϘ΢ζ" />

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

45. <button> <img src="images/search.png" alt="Search"> </button> ୅ସςΩετͷྫ  ݕࡧϘλϯ

46. <img src="piechart.gif" alt="Pie chart: Browser Share - Internet Explorer 25%,

    Firefox 40%, Chrome 25%, Safari 6% and Opera 4%."> ୅ସςΩετͷྫ r ԁάϥϑ

47. ୅ସςΩετΛলུ͢Δྫ <img src="home.gif" alt="">Home

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

49. 
    
     
    
     
    
     " " " " " " "

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

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

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

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

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

54. 
    ΩʔϘʔυ͚ͩͰ΋ૢ࡞Ͱ͖ΔΑ͏ʹ͢Δ <div class="save-button" onClick=…>保存</div>

55. ଐੑ஋Ͱमਖ਼͠Α͏ͱ͢Δͱʜ <div class="save-button" onClick=… onKeyUp=… tabindex="0" role="button">保存</div>

56. ΫϦοΫͰ͖Δཁૉ͸ Bཁૉ PS CVUUPOཁૉ Ͱ࣮૷͠Α͏ ద੾ͳཁૉΛ࢖͓͏ <button class="save-button" onClick=…>ボタン</button>

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

    text-decoration: underline; }

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

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

60. ϥϕϧΛ͚ͭΔํ๏ <label for="username">Ϣʔβ໊</label> <input type="text" id="username" /> <input type="text" aria-label="Ϣʔβ໊"

    placeholder="Ϣʔβ໊Λೖྗ" /> ラベルが配置できるとき ラベルが配置できないとき

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

62. None

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

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

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

    ·ͱΊ

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

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

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

69. ࣭໰ʁ