ユーザー補助を意識したbuttonタグの改善

Transcript

1. 10݄11೔ ϢʔβʔิॿΛҙࣝͨ͠ buttonλάͷվળ
2. ब׆ͷͨΊʹ։ൃͨ͠ΞϓϦΛݟฦ͍ͯͨ͠ • ΠϯλʔϯͷΩϟονΞοϓͷͨΊʹ࡞੒ͨ͠ʮχϡʔεαΠτʯ
3. LighthouseͰ֬ೝͯ͠Έͨ • Google͕ແྉͰఏڙ͍ͯ͠Δ • WebαΠτΛ෼ੳɾ਍அͯ͘͠ΕΔ ɾʮύϑΥʔϚϯεʯ ɾʮϢʔβʔิॿʯ ɾʮ͓͢͢Ίͷํ๏ʯ ɾʮSEOʯ
4. ਍அ݁Ռ͸ɺɺɺ ͍ΖΜͳਓʹ࢖͍΍͍͢ઃܭʹͳͬͯͳ͍Α😢
5. Ͳ͕͜μϝͳͷ͔🤔 ࢦఠ͞ΕͨϔομʔͷݕࡧϘλϯ
6. ϘλϯʹϢʔβʔิॿػೳ໊͕ࢦఆͳ͠ ɾࢹ֮ʹো͕͍Λ๊͑Δਓ ɾݕࡧΤϯδϯͷΫϩʔϥʔ ʹ഑ྀͰ͖ͯͳ͍Α💦
7. ButtonλάΛվળ͢ΔͨΊʹ • ࢹ֮తཁૉ👀 • Ϙλϯ͸ΞΠίϯ͚ͩͰͳ͘ɺจࣈͰͷઆ໌ • ௌ֮తཁૉ👂 • ࢧԉٕज़(εΫϦʔϯϦʔμʔ΍Ի੠ಡΈ্͛ιϑτ)ͷར༻ऀʹ഑ྀ ɾΞΫηγϒϧ໊Λఆٛ͢Δ ΞΫηγϒϧ໊ͱ͸ɿ ࢧԉٕज़͕ɺϢʔβʔʹཁૉͷ಺༰΍໨తΛ఻͑ΔͨΊʹ࢖͏໊લͷ͜ͱ
8. 5ύλʔϯͷbuttonվળ
9. ਪ঑͞Ε͍ͯΔํ๏ 1. ςΩετϘλϯΛ࢖༻ 2. ը૾Ϙλϯ͸ a lt ଐੑΛࢦఆ ɾϘλϯʹ௚઀ςΩετɹɹɹɹ ʮݕࡧʯΛؚΊΔ ɾࢹ֮ɺௌ֮తʹ΋👍 ɾը૾ͷ಺༰Λઆ໌ 3. a ri a -l a belledby ଐੑ ɾՄࢹԽςΩετཁૉΛ ࢀর͠ɺΞΫηγϒϧ໊ Λఆٛ
10. ͋·Γਪ঑͞Ε͍ͯͳ͍ํ๏ 5. title ଐੑ (πʔϧνοϓ) ɾ͋͘·Ͱิॿ৘ใΛࢦ ఆ͢Δଐੑ ɾΞΫηγϒϧ໊ͳΒ a ri a -l a belledbyɺ a ri a - l a belΛ࢖͏ํ͕ྑ͍ 4. a ri a -l a bel ଐੑ ɾ௚઀ΞΫηγϒϧ໊Λ ఆٛ ɾʮݕࡧʯ͕ՄࢹԽ͞Ε ͳ͍
11. ஫ҙ͢Δ͜ͱ ɾεΫϦʔϯϦʔμʔ͚ͩΛର৅ʹͨ͠ࢦࣔ͸ඞཁͳ͍ ɾࢦ͕ࣔඞཁͳΒ͹ɺ͢΂ͯͷਓʹఏڙ͢Δ΂͖!
12. εΫϦʔϯϦʔμʔͰࢼͯ͠ΈΔ M a cͳΒʮVoiceOverʯ(comm a nd+ిݯϘλϯ3ճΫϦοΫ)
13. ࢀߟϦϯΫ • Lighthouse ʹΑΔϢʔβʔิॿείΞϦϯά.. • Buttons must h a ve discernible text • a ri a -l a belledby ͱ͸ • a ri a -l a bel ͱ͸
14. ͝ਗ਼ௌ͋Γ͕ͱ͏͍͟͝·ͨ͠!