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

A97eee01397705443a72a48ce29d3e19?s=47 Cybozu
June 06, 2019

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

A97eee01397705443a72a48ce29d3e19?s=128

Cybozu

June 06, 2019
Tweet

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%FWFMPQFS5PPMTͰଌఆͰ͖Δ ίϯτϥετൺͷଌఆ

  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Ͱ͸ΩʔϘʔυ͕ࢹೝͰ͖Δ • PVUMJOFOPOF͢ΔͱɺσϑΥϧτελΠϧ͕ফ͑Δ ͜ͷ৔߹ɺඞͣ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. ࣭໰ʁ