デザインシステムのa11y対応に役立つ新しいWeb Standard

デザインシステムのa11y対応に役立つ新しいWeb Standard
Alan Dávalos ( https://twitter.com/AlanGDavalos )

アクセシビリティー（以下a11y）の対応は大変重要ですが、正しく対応するのは簡単ではないケースが多いです。デザインシステムなどの様々なプロジェクトで使う目的で作成するコンポーネントではa11yをより意識する必要があります。このセッションでは、そのa11yの対応を格段にやりやすくする新しいWeb Standardを紹介します。

2022年3月25日開催「UIT Meetup vol.15 『Relearn Modern Web Standard』」
https://uit.connpass.com/event/242359/

Transcript

1. デザインシステムのa11y対応に 役立つ新しいWeb Standard Alan Dávalos 2022.03
2. "CPVU
   NF ϑϩϯτΤϯυΤϯδχΞ 🇲🇽 -*/&
   %FTJHO
   4ZTUFN
   5FDI
   -FBE 8$
   8FC
   $PNQPOFOUT
   $PNNVOJUZ
   (SPVQ !"MBO(%BWBMPT "MBO
   %ÂWBMPT ϑϩϯτΤϯυ։ൃηϯλʔ
3. BZͷॏཁੑ σβΠϯγεςϜͰͷBZ BZͷରԠʹ໾ཱͭ৽͍͠8FC
   4UBOEBSE 01 02 03 Contents
4. BZͷॏཁੑ
5. IUUQTFOHJOFFSJOHMJOFDPSQDPNKBCMPHVJUCBTFMJOFGPSGSPOUFOEEFWFMPQNFOUJO BZͷॏཁੑ
6. ো֐Λ͍࣋ͬͯͳ͍ਓ ΋BZͷԸܙΛ ड͚·͢ BZ
   
   69 ੈքͰԿ͔ͷো֐Λ ࣋ͭਓ ԯਓҎ্ ࠃʹΑͬͯ͸BZͷ ରԠΛਖ਼͘͠ߦͳͬͯ ͍ͳ͍ͱૌ͑ΒΕ·͢ ๏཯໰୊ BZͷॏཁੑ ˞ग़యɿIUUQTFOHJOFFSJOHMJOFDPSQDPNKBCMPHVJUCBTFMJOFGPSGSPOUFOEEFWFMPQNFOUJO
7. σβΠϯγεςϜ ͰͷBZ
8. σβΠϯγεςϜͰͷBZ • ༷ʑͳঢ়گͰ࢖ΘΕΔ͜ͱΛ૝ఆ • ৭΍αΠζ΍λΠϛϯάͳͲ • ϖʔδͷBZ͸Ұ൪ऑ͍ͱ͜ΖͰܾΊΒΕΔ • ͪΌΜͱͨ͠σβΠϯγεςϜ͸͍͍౔୆ʹͳΓ·͕͢ɺอূ͸͠·ͤΜ
9. BZͷରԠʹ໾ཱͭ৽͍͠ 8FC
   4UBOEBSE
10. QSFGFSTSFEVDFE NPUJPO • ܹ͍͠ಈ͖ʹහײͳਓͷͨΊͷ NFEJBϑΟʔνϟʔ • "OJNBUJPOΛશ෦੾ΓऔΔΑ͏ʹ Α͘࢖ΘΕ·͕͢ɺͲͪΒ͔ͱ͍ ͍͑͹ܹ͠͞ΛݮΒ͢ͷ͕໨త   
11. GPDVTWJTJCMF • GPDVT
    ʹϚον͢ΔҎ֎ʹ΋ϒ ϥ΢βʔ͕ϑΥʔΧεΛݟͤΔ΂ ͖ͩͱ൑அ͢Δ࣌ʹϚον͢Δٖ ࣅΫϥε   
12. EJBMPH • %JBMPH΍NPEBMͳͲΛදࣔ͢Δ ͨΊͷ)5.-ཁૉ • දࣔͷαϙʔτ͸͋Γ·͕͢ɺ· ͩߥ࡟Γͳ෦෼͕͋Γ·͢ • *OUFSPQ
    ͷର৅ͷҰͭ   
13. EJBMPH͕ͳ͍৔߹ͷେม͞ • SPMFBSJB पΓ • SPMFlEJBMPHz • %JBMPHʹBSJBNPEBMlUSVFz΋͘͠͸ͦΕҎ֎શ෦΁ͷBSJBIJEEFOlUSVFz • ΩʔϘʔυૢ࡞ • 5BC͕EJBMPH಺෦͚ͩΛ८ճ͢ΔΑ͏ʹ͢Δ • &TDͰEJBMPHΛด͡Δ • .PEBMϞʔυ • #BDLESPQ΍εΫϩʔϧϒϩοΫͷ༗ແ • ෳ਺ͷEJBMPHͷରԠ • ͳͲ
14. DPMPSDPOUSBTU • ৭ͷϦετͷத͔ΒϕʔεͱͳΔ ৭ͱҰ൪ίϯτϥετ͢Δ΋ͷΛ બͿͨΊͷؔ਺ • 8$"(
     • *OUFSPQ
    ͷର৅ͷҰͭ   
15. !DPOUBJOFS • .FEJB
    RVFSZͷDPOUBJOFS൛ • ΑΓ3FTQPOTJWFͳσβΠϯΛ࡞ Δ͜ͱʹ༗ޮ • ·ͩ&EJUPS %SBGUͳͷͰɺ4QFD ͕มΘΔՄೳੑ͸ߴ͍  51
     
16. • IUUQTFOHJOFFSJOHMJOFDPSQDPNKBCMPHVJUCBTFMJOFGPSGSPOUFOEE FWFMPQNFOUJO • IUUQTDTTUSJDLTDPNOVLJOHNPUJPOXJUIQSFGFSTSFEVDFENPUJPO • IUUQTEFWFMPQFSNP[JMMBPSHKBEPDT8FC$44GPDVTWJTJCMF • IUUQTXFCLJUPSHCMPHJOUSPEVDJOHUIFEJBMPHFMFNFOU • IUUQTDTTUSJDLTDPNFYQMPSJOHDPMPSDPOUSBTUGPSUIFGJSTUUJNF • IUUQTIBDLTNP[JMMBPSHJOUFSPQ • IUUQTXFCEFWJOKBOFXSFTQPOTJWF ΋ͬͱ஌Γ͍ͨਓ͸ͪ͜ΒΛࢀর͍ͩ͘͞
17. THANK YOU