ΞΫηγϏϦςΟ開発研修ΞΫηγϏϦςΟ
View Slide
ΞΫηγϏϦςΟͱͳʹ͔ʁ復習
ΞΫηγϏϦςΟʹোऀɾߴྸऀରԠʁ
ΞΫηγϏϦςΟͱোऀɾߴྸऀΛؚΊͯʮͯ͢ͷਓʯ͕αʔϏεʹΞΫηεͰ͖Δ͜ͱ
ʮͯ͢ͷਓʯ個⼈の特性 デバイス 場⾯・状況
αΠϘζͷཧνʔϜϫʔΫ͋;ΕΔࣾձΛΔ
αΠϘζʹͱͬͯɺΞΫηγϏϦςΟͱʮϢʔβ͕νʔϜʹΞΫηεͰ͖Δೳྗʯ
ΞΫηγϏϦςΟΛ֬อ͢Δ͜ͱʮνʔϜʹࢀՃ͍ͨ͠ʯͱ͍͏Ϣʔβͷئ͍Λଚॏ͢Δ͜ͱ
۩ମతʹͲ͏ରԠ͢ΕΑ͍ʁ
https://waic.jp/docs/WCAG20/
• 8FC$POUFOU"DDFTTJCJMJUZ(VJEFMJOF• 8$͕ൃߦ͍ͯ͠ΔΞΫηγϏϦςΟΨΠυϥΠϯ• ࠃ֎ͷ๏+*4*40ͷن֨8$"(ʹ४ڌ• ߲ΛϨϕϧผʹྨʢ" "" """ʣ8$"(
ΞΫηγϏϦςΟͷղώϡʔϚϯϦʔμϒϧϚγϯϦʔμϒϧ
ώϡʔϚϯϦʔμϒϧ
ʮͯ͢ͷਓʯ͕֮ɾཧղɾૢ࡞Ͱ͖Δ͔ώϡʔϚϯϦʔμϒϧ
ผՄೳίϯςϯπΛɺར༻ऀʹͱͬͯݟ͘͢ɺฉ͖͍͢ͷʹ͢Δ͜ͱ͜ΕʹલܠͱഎܠΛ۠ผ͢Δ͜ͱؚΉ֮Մೳ
ेͳ࣌ؒར༻ऀ͕ίϯςϯπΛಡΈɺ༻͢ΔͨΊʹेͳ࣌ؒΛఏڙ͢Δ͜ͱ ൃ࡞ͷࢭൃ࡞Λى͜͢Α͏ͳίϯςϯπΛઃܭ͠ͳ͍͜ͱ φϏήʔγϣϯՄೳར༻ऀ͕φϏήʔτͨ͠ΓɺίϯςϯπΛ୳͠ग़ͨ͠ΓɺݱࡏҐஔΛ֬ೝͨ͠Γ͢Δ͜ͱΛखॿ͚͢ΔखஈΛఏڙ͢Δ͜ͱཧղՄೳ
ಡΈ͢͞ςΩετͷίϯςϯπΛಡΈ͘͢ཧղՄೳʹ͢Δ͜ͱ ༧ଌՄೳ8FCϖʔδͷදࣔڍಈΛ༧ଌՄೳʹ͢Δ͜ͱ ೖྗࢧԉೖྗऀͷؒҧ͍Λ͗ɺमਖ਼Λࢧԉ͢Δ͜ͱૢ࡞Մೳ
https://developer.apple.com/design/human-interface-guidelines/accessibility/
͋ͳͨͷՁΛߴΊΔ8FCΞΫηγϏϦςΟIUUQTXXXTMJEFTIBSFOFUSJLJIBXFC
ϚγϯϦʔμϒϧ
• ςΩετϒϥβ• ࣈσΟεϓϨΠ• εΫϦʔϯϦʔμʔ• ະདྷͷσόΠε8FCͷ͔ͨͪ͞·͟·• ϏδϡΞϧϒϥβ• εϚʔτϑΥϯ• ݕࡧΤϯδϯʹΑΔݕࡧ݁Ռ• εΫϨΠϐϯάαʔϏε
ίϯςϯπ͕Ϣʔβʹಧ͘·Ͱใίϯςϯπ)5.-$44+4ϒϥβࢧԉٕज़Ϣʔβʔ
ϚγϯϦʔμϒϧͷྫ
͜ΕͰΑ͍ͩΖ͏͔
ը૾ͷ༰Λػցʹཧղͤ͞Α͏
ݟग़͠Ͱ͋Δ͜ͱΛػցʹཧղͤ͞Α͏
8FCΞΫηγϏϦςΟ֬อجຊͷʮΩʯ
https://weba11y.jp/pdf/weba11y-10basics.pdf
֤ϖʔδʹݻ༗Ͱɺผͷ8FCαΠτͱ۠ผͰ͖ΔΑ͏ʹϖʔδͷ༰͕͔ΔϖʔδλΠτϧΛهड़͢Δࣾѫࡰ – αΠϘζגࣜձࣾ
ϚγϯϦʔμϒϧͷجຊ• εΫϦʔϯϦʔμʔʮݟग़͠ʯʮϦετʯͳͲɺߏΛಡΉ• ݟग़͠͝ͱʹδϟϯϓ͢ΔͳͲɺಡΈඈ͢͜ͱ͕Ͱ͖Δݟग़͠ϦετͳͲͷจॻߏΛϚʔΫΞοϓ͢ΔkintoneΞϓϦετΞ
ϦϯΫจݴ͚ͩͰҙຯ͕Θ͔ΔΑ͏ʹ͢Δʮ͜͜ΛΫϦοΫʯʮ͞ΒʹදࣔʯʮৄࡉΛݟΔʯʜจݴΛม͑Δͷ͕͚͠Εɺपғͷݟग़͠ͱΈ߹ΘͤΔϦϯΫςΩετɺϦϯΫઌ͕͔Δจݴʹ͢Δ
ͯ͢ͷJNHཁૉʹదͳBMUଐੑΛ͚ͭΔใΛ͍͑ͯΔը૾ʹସςΩετΛఏڙ͢Δ
BMUଐੑͳ͠ BMUBMUը૾ BMUαΠϘζhttps://jsfiddle.net/ux28cdvk/1/
ସςΩετͷྫ ݕࡧϘλϯ
ସςΩετͷྫ r ԁάϥϑ
ସςΩετΛলུ͢ΔྫHome
৭ͷΈʹґଘͨ͠ใΛఏڙ͠ͳ͍ใΛ͑Δ৭ͷ͍ํʹҙ͢ΔҰൠ৭֮ 1ܕ৭֮ 5ܕ৭֮
" " " " " " " " " "จࣈͱഎܠ৭ͷίϯτϥετൺΛҎ্ʹ͢ΔใΛ͑Δ৭ͷ͍ํʹҙ͢Δ
$ISPNF%FWFMPQFS5PPMTͰଌఆͰ͖Δίϯτϥετൺͷଌఆ
ը໘શମΛ֦େͯ͠ɺཧղɾૢ࡞Ͱ͖ͳ͍༰͕ͳ͍͔ཁૉͷதͷจࣈ͕Έग़ͨ݁͠ՌɺผͷཁૉʹඃΔͳͲϢʔβʔ͕ίϯςϯπΛ֦େදࣔͰ͖ΔΑ͏ʹ͢Δ
https://bozuman.cybozu.com/k/13084/show#record=3433
ΩʔϘʔυ͚ͩͰૢ࡞Ͱ͖ΔΑ͏ʹ͢Δ保存
ଐੑͰमਖ਼͠Α͏ͱ͢ΔͱʜonKeyUp=… tabindex="0" role="button">保存
ΫϦοΫͰ͖Δཁૉ Bཁૉ PS CVUUPOཁૉ Ͱ࣮͠Α͏దͳཁૉΛ͓͏ボタン
• σϑΥϧτͷ$44ͰΩʔϘʔυ͕ࢹೝͰ͖Δ• PVUMJOFOPOF͢ΔͱɺσϑΥϧτελΠϧ͕ফ͑Δ͜ͷ߹ɺඞͣGPDVTελΠϧΛ͚ͭΔ• SFTFUDTTΛ͏߹ཁҙΩʔϘʔυૢ࡞ΛࢹೝͰ͖ΔΑ͏ʹ͠Α͏a:focus { text-decoration: underline; }
http://www.outlinenone.com/
• εΫϦʔϯϦʔμʔϑΥʔϜʹϑΥʔΧεͨ͠ͱ͖ϥϕϧΛಡΈ্͛Δ• ϥϕϧ͕͍͍ͭͯͳ͍ͱɺԿΛೖྗͯ͠ྑ͍͔Θ͔Βͳ͍ϑΥʔϜίϯτϩʔϧͷϥϕϧઆ໌ΛϚʔΫΞοϓ͢Δユーザ名
ϥϕϧΛ͚ͭΔํ๏Ϣʔβ໊placeholder="Ϣʔβ໊Λೖྗ" />ラベルが配置できるときラベルが配置できないとき
Ϣʔβ͕ΤϥʔϝοηʔδΛಡΜͰɺͲͷΑ͏ʹमਖ਼͢Εྑ͍͔ཧղͰ͖ΔΤϥʔϝοηʔδͰΤϥʔՕॴͱमਖ਼ํ๏Λ໌ࣔ͢Δ
ಈըʹΩϟϓγϣϯʢࣈນʣΛఏڙ͢Δ=ԻͰఏڙ͞ΕΔใ ө૾Ͱఏڙ͞ΕΔใ
• ొਓͷൃ༰• #(.ͳͲͷԻָ• ഥखɺ• ڥԻʢిͷݺग़ԻɺυΞ͕։ด͢ΔԻɺνϟΠϜɺཕ໐ͳͲʣಈըʹΩϟϓγϣϯʢࣈນʣΛఏڙ͢Δ
• ΞΫηγϏϦςΟʮͯ͢ͷਓʯͷͨΊ• ΞΫηγϏϦςΟͷղ• ώϡʔϚϯϦʔμϒϧ• ϚγϯϦʔμϒϧ• ΞΫηγϏϦςΟجຊͷΩ·ͱΊ
ΞΫηγϏϦςΟʹΑΓਂ͘औΓΉʹʁ
• σβΠχϯά8FCΞΫηγϏϦςΟΞΫηγϏϦςΟڭՊॻͷܾఆ൛• ίʔσΟϯά8FCΞΫηγϏϦςΟΑΓϚγϯϦʔμϒϧͳ)5.-Λॻͨ͘Ίʹ• ΠϯΫϧʔγϒ)5.-$44+BWB4DSJQU༏Εͨॻ੶Λಡ͏
https://bozuman.cybozu.com/k/#/space/19
࣭ʁ