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

Transcript

1. ΞΫηγϏϦςΟ 開発研修 ΞΫηγϏϦςΟ
   
2. ΞΫηγϏϦςΟͱ͸ͳʹ͔ʁ 復習
3. ΞΫηγϏϦςΟʹো֐ऀɾߴྸऀରԠʁ
4. ΞΫηγϏϦςΟͱ͸ ো֐ऀɾߴྸऀΛؚΊͯʮ͢΂ͯͷਓʯ͕ ੡඼΍αʔϏεʹΞΫηεͰ͖Δ͜ͱ
5. ʮ͢΂ͯͷਓʯ 個⼈の特性 デバイス 場⾯・状況
6. αΠϘ΢ζͷཧ૝ νʔϜϫʔΫ͋;ΕΔࣾձΛ૑Δ
7. αΠϘ΢ζʹͱͬͯɺΞΫηγϏϦςΟͱ͸ ʮϢʔβ͕νʔϜʹΞΫηεͰ͖Δೳྗʯ
8. ΞΫηγϏϦςΟΛ֬อ͢Δ͜ͱ͸ ʮνʔϜʹࢀՃ͍ͨ͠ʯͱ͍͏Ϣʔβͷئ͍Λ ଚॏ͢Δ͜ͱ
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. ϚγϯϦʔμϒϧ
28. • ςΩετϒϥ΢β • ఺ࣈσΟεϓϨΠ • εΫϦʔϯϦʔμʔ • ະདྷͷσόΠε 8FCͷ͔ͨͪ͸͞·͟· • ϏδϡΞϧϒϥ΢β • εϚʔτϑΥϯ • ݕࡧΤϯδϯʹΑΔݕࡧ݁Ռ • εΫϨΠϐϯάαʔϏε
29. ίϯςϯπ͕Ϣʔβʹಧ͘·Ͱ ৘ใ ίϯςϯπ )5.-$44+4 ϒϥ΢β ࢧԉٕज़ Ϣʔβʔ
30. ϚγϯϦʔμϒϧͷྫ
32. ͜ΕͰΑ͍ͩΖ͏͔ <img src="appstore.png" />
33. ը૾ͷ಺༰Λػցʹཧղͤ͞Α͏ <img src="appstore.png" alt="kintoneアプリストア" />
35. ݟग़͠Ͱ͋Δ͜ͱΛػցʹཧղͤ͞Α͏ <h2> <img src="appstore.png" alt="kintoneアプリストア" /> </h2>
36. 8FCΞΫηγϏϦςΟ֬อ جຊͷʮΩʯ
37. https://weba11y.jp/pdf/weba11y-10basics.pdf
38. ֤ϖʔδʹݻ༗Ͱɺผͷ8FCαΠτͱ۠ผͰ͖ΔΑ͏ʹ 
    ϖʔδͷ಺༰͕෼͔ΔϖʔδλΠτϧΛهड़͢Δ <title>ࣾ௕ѫࡰ – αΠϘ΢ζגࣜձࣾ</title>
40. ϚγϯϦʔμϒϧͷجຊ • εΫϦʔϯϦʔμʔ͸ʮݟग़͠ʯʮϦετʯͳͲɺߏ଄ΛಡΉ • ݟग़͠͝ͱʹδϟϯϓ͢ΔͳͲɺಡΈඈ͹͢͜ͱ͕Ͱ͖Δ 
    ݟग़͠΍ϦετͳͲͷจॻߏ଄ΛϚʔΫΞοϓ͢Δ <h3>kintoneΞϓϦετΞ</h3>
41. ϦϯΫจݴ͚ͩͰҙຯ͕Θ͔ΔΑ͏ʹ͢Δ ʮ͜͜ΛΫϦοΫʯʮ͞ΒʹදࣔʯʮৄࡉΛݟΔʯʜ จݴΛม͑Δͷ͕೉͚͠Ε͹ɺपғͷݟग़͠ͱ૊Έ߹ΘͤΔ ϦϯΫςΩετ͸ɺϦϯΫઌ͕෼͔Δจݴʹ͢Δ
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. Ϣʔβ͕ΤϥʔϝοηʔδΛಡΜͰɺ ͲͷΑ͏ʹमਖ਼͢Ε͹ྑ͍͔ཧղͰ͖Δ 
    ΤϥʔϝοηʔδͰ͸ΤϥʔՕॴͱमਖ਼ํ๏Λ໌ࣔ͢Δ
63. 
    ಈըʹΩϟϓγϣϯʢࣈນʣΛఏڙ͢Δ ＝ Ի੠Ͱఏڙ͞ΕΔ৘ใ ө૾Ͱఏڙ͞ΕΔ৘ใ
64. • ొ৔ਓ෺ͷൃ࿩಺༰ • #(.ͳͲͷԻָ • ഥखɺ׻੠ • ؀ڥԻʢి࿩ͷݺग़ԻɺυΞ͕։ด͢ΔԻɺνϟΠϜɺཕ໐ͳͲʣ 
    ಈըʹΩϟϓγϣϯʢࣈນʣΛఏڙ͢Δ
65. • ΞΫηγϏϦςΟ͸ʮ͢΂ͯͷਓʯͷͨΊ • ΞΫηγϏϦςΟͷղ๤ • ώϡʔϚϯϦʔμϒϧ • ϚγϯϦʔμϒϧ • ΞΫηγϏϦςΟجຊͷΩ ·ͱΊ
66. ΞΫηγϏϦςΟʹ ΑΓਂ͘औΓ૊Ήʹ͸ʁ
67. • σβΠχϯά8FCΞΫηγϏϦςΟ ΞΫηγϏϦςΟڭՊॻͷܾఆ൛ • ίʔσΟϯά8FCΞΫηγϏϦςΟ ΑΓϚγϯϦʔμϒϧͳ)5.-Λॻͨ͘Ίʹ • ΠϯΫϧʔγϒ)5.- $44+BWB4DSJQU ༏Εͨॻ੶Λಡ΋͏
68. https://bozuman.cybozu.com/k/#/space/19
69. ࣭໰ʁ