Upgrade to Pro — share decks privately, control downloads, hide ads and more …

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

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

Cybozu
PRO

June 06, 2019
Tweet

More Decks by Cybozu

Other Decks in Technology

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