Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
0→1フェーズでのアクセシビリティへの取り組み
Search
himi
September 26, 2023
0
450
0→1フェーズでのアクセシビリティへの取り組み
himi
September 26, 2023
Tweet
Share
More Decks by himi
See All by himi
スクリーンリーダーを使ったアクセシビリティ検証のすすめ
himi
0
2.7k
スクリーンリーダーはプレースホルダーにアクセスできるのか
himi
2
580
書籍『Webアプリケーションアクセシビリティ』を活用したアクセシビリティ改善
himi
0
190
Featured
See All Featured
Code Reviewing Like a Champion
maltzj
526
40k
Why Our Code Smells
bkeepers
PRO
340
57k
The Myth of the Modular Monolith - Day 2 Keynote - Rails World 2024
eileencodes
26
3.1k
Evolution of real-time – Irina Nazarova, EuRuKo, 2024
irinanazarova
9
990
Typedesign – Prime Four
hannesfritz
42
2.8k
The Invisible Side of Design
smashingmag
302
51k
10 Git Anti Patterns You Should be Aware of
lemiorhan
PRO
657
61k
A better future with KSS
kneath
239
18k
CSS Pre-Processors: Stylus, Less & Sass
bermonpainter
359
30k
StorybookのUI Testing Handbookを読んだ
zakiyama
31
6.2k
Cheating the UX When There Is Nothing More to Optimize - PixelPioneers
stephaniewalter
285
14k
[RailsConf 2023 Opening Keynote] The Magic of Rails
eileencodes
31
9.7k
Transcript
ˠϑΣʔζͰͷΞΫηγϏ ϦςΟͷऔΓΈ 5VFˠΛεΫϥϜͰͬͯΈͨεΩϧཧػೳͷ࡞Γํ ණݟ߂ 4NBSU)3ϓϩμΫτΤϯδχΞ
ࣗݾհ ɾ໊લɿhimiʢ@himi_himi_ʣ ɾSmartHRϓϩμΫτΤϯδχΞάϧʔϓ ɾϑϩϯτΤϯυΤϯδχΞ ɹɾReact, TypeScript, Next.js ɾւಓࡳຈࢢ͔ΒϑϧϦϞʔτۈ
ࠓ͢͜ͱ
ΞΫηγϏϦςΟʹ͍ͭͯ ɾˠϑΣʔζͰऔΓΜͩ༰ ɾˠϑΣʔζͰऔΓΜͰྑ͔ͬͨ͜ͱ ɾˠϑΣʔζͰऔΓΜͰ͔ͬͨ͜͠ͱ
ˠϑΣʔζͰऔΓΜͩ ༰
σβΠϯɾ༷ࡦఆϑΣʔζ
ΞΫηγϏϦςΟʹ͍ͭͯؾʹͳͬͨʹ͍ͭͯਵ ࣌ίϝϯτ🗣 ɾจࣈαΠζɺจࣈྔʹґଘͨ͠UIʹͳͬͯͳ͍͔ ɹɾจࣈαΠζΛ֦େͨ͠ΓɺଟݴޠԽͨ͠ࡍʹจࣈྔ͕૿͑ͯແ͍͔ ɾεΫϦʔϯϦʔμʔར༻ऀʹͱ͍ͬͯͮΒ͍UIʹͳͬͯແ͍͔ ɹɾϑΥʔϜϘλϯͷDescriptionͷҐஔɺϘλϯͷϥϕϧͷจݴͳͲ ͳͲͳͲ…
ΞΫηγϏϦςΟͷίϝϯτʹඞཁͳࣝࣾ Ͱഓͬͨͷ͕΄ͱΜͲ📚 ɾSmartHRओ࠵Ͱ։࠵ͨ͠ॻ੶ʮWebΞϓϦέʔγϣϯΞΫηγϏϦ ςΟʯྠಡձ ɾࣾͰ։࠵͞Ε͍ͯΔΞΫηγϏϦςΟϚελʔཆߨ࠲
Α͘Θ͔Βͳ͍߹ࣾͷΞΫηγϏϦςΟεϖ γϟϦετʹਵ࣌૬ஊ🙏 ɾɹɹɹɹmasuP9ʢ@masuP9ʣ ɾɹɹɹɹmaihaʢ@mt_dew2ʣ ɾɹɹɹɹmaverickʢ@KatsutoshiTsujiʣ
࣮ϑΣʔζ
4NBSU)36*Λར༻ͯ͠։ൃ👩💻 ɾ4NBSU)3͕։ൃ͍ͯ͠Δ6*ίϯϙʔωϯτू ɾΞΫηγϏϦςΟରԠਐΜͰ͓Γɺ4NBSU)36*Λར༻ͯ͠։ൃ͢ Δ͜ͱͰجຊతͳ༰୲อ͞ΕΔ
ΞΫηγϏϦςΟ্ͷͨΊͷ࣮ᶃ ɾλϒ6*ΛεΫϦʔϯϦʔμʔͰಡΈ্͛ͨࡍɺͳ͘ಡΈ্͛Β ΕΔΑ͏ʹ࣮ ɹɾSPMF BSJBDPOUSPMFT BSJBMBCFMMFECZ BSJBTFMFDUFEͳͲͷଐੑΛదʹઃఆ
ΞΫηγϏϦςΟ্ͷͨΊͷ࣮ᶄ ɾϞόΠϧͰจࣈαΠζΛେ͖ͯ͘͠ද่ࣔΕ͕ແ͍Α͏࣮
ಈ࡞ݕূϑΣʔζ
ΞΫηγϏϦςΟνΣοΫΛ࣮ࢪ✅ ɾࣾͷΞΫηγϏϦςΟεϖγϟϦετʹओಋͯ͠Β͍࣮ͭͭࢪ ɾSmartHRͰ࡞͍ͯ͠ΔΣϒΞΫηγϏϦςΟ؆қνΣοΫϦε τͷ߲ΛνΣοΫ ɹɾhttps://smarthr.design/accessibility/check-list/
None
ϦϦʔεޙ
ΞΫηγϏϦςΟ্ͷ׆ಈଓ͍͍ͯΔ🏃 ɾϦϦʔεલʹશػೳͷΞΫηγϏϦςΟରԠΛྃͰ͖ͨΘ͚Ͱ ͳ͍ͷͰɺҾ͖ଓ͖ରԠΛߦ͍ͬͯΔ
ˠϑΣʔζͰऔΓΜͰྑ ͔ͬͨ͜ͱ
ઃܭΛࠜຊ͔Βݟ͞ͳ͚ΕΞΫηγϒϧʹͰ͖ ͳ͍ը໘͕ੜ·Εͳ͔ͬͨ🎉
νʔϜͷϝϯόʔʹΞΫηγϏϦςΟʹڵຯΛ࣋ͬ ͯΒ͑ͨ🎉 ɾΞΫηγϏϦςΟεϖγϟϦετͱͷ૬ஊձʹɺσβΠφʔQA ΤϯδχΞɺUXWڵຯΛ࣋ͬͯࢀՃͯ͘͠Εͨ🫶
ˠϑΣʔζͰऔΓΜͰ ͔ͬͨ͜͠ͱ
ϦϦʔε·ͰͷݶΒΕͨ࣌ؒͱϦιʔεͷதͰɺͲ ͜·ͰΞΫηγϏϦςΟʹࢿ͢Δ͔ͷஅ🤯 ɾϦϦʔεͰ͖ͳ͚Ε୭ΞΫηεͰ͖ͳ͍ ɾ࣌ؒͱϦιʔεແݶͰͳ͍
ΞΫηγϏϦςΟνΣοΫΛߦ͏ػೳʹ͍ͭͯɺ༏ ઌΛݕ౼͠ͳ͕ΒରԠΛਐΊͨ🧐 ɾϦϦʔε·ͰʹͲͷػೳʹ͍ͭͯͲͷϨϕϧ·ͰରԠ͢Δ͔ΛܾΊ Δ ɾར༻ऀ͕ଟ͍toCͷੑ࣭Λ࣋ͭը໘ʹ͍ͭͯ༏ઌతʹରԠΛਐΊͨ
·ͱΊ
ɾࣾͷΞΫηγϏϦςΟεϖγϟϦετʹڠྗͯ͠Β͍ͳ͕Βɺ 0→1ϑΣʔζ͔ΒΞΫηγϏϦςΟʹऔΓΜͩ💪 ɾ0→1ϑΣʔζ͔ΒऔΓΉ͜ͱͰɺઃܭΛࠜຊతʹݟ͞ͳ͚Ε ΞΫηγϒϧʹͰ͖ͳ͍ը໘͕ੜ·Εͳ͔ͬͨ🎉 ɾϦϦʔε·Ͱͷ࣌ؒͱϦιʔεແݶͰͳ͍ͷͰɺ༏ઌΛߟ͑ ͳ͕ΒରԠΛਐΊͨ🤔 ɾϦϦʔεޙΞΫηγϏϦςΟ্ͷͨΊͷ׆ಈଓ͍͍ͯΔ🏃
͓ΘΓ