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

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

デザインシステムの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/

A3966f193f4bef226a0d3e3c1f728d7f?s=128

LINE Developers
PRO

March 25, 2022
Tweet

More Decks by LINE Developers

Other Decks in Technology

Transcript

  1. デザインシステムのa11y対応に 役立つ新しいWeb Standard Alan Dávalos 2022.03

  2. "CPVUNF ϑϩϯτΤϯυΤϯδχΞ 🇲🇽 -*/&%FTJHO4ZTUFN5FDI-FBE 8$8FC$PNQPOFOUT$PNNVOJUZ(SPVQ !"MBO(%BWBMPT "MBO%ÂWBMPT ϑϩϯτΤϯυ։ൃηϯλʔ

  3. BZͷॏཁੑ σβΠϯγεςϜͰͷBZ BZͷରԠʹ໾ཱͭ৽͍͠8FC4UBOEBSE 01 02 03 Contents

  4. BZͷॏཁੑ

  5. IUUQTFOHJOFFSJOHMJOFDPSQDPNKBCMPHVJUCBTFMJOFGPSGSPOUFOEEFWFMPQNFOUJO BZͷॏཁੑ

  6. ো֐Λ͍࣋ͬͯͳ͍ਓ ΋BZͷԸܙΛ ड͚·͢ BZ69 ੈքͰԿ͔ͷো֐Λ ࣋ͭਓ ԯਓҎ্ ࠃʹΑͬͯ͸BZͷ ରԠΛਖ਼͘͠ߦͳͬͯ ͍ͳ͍ͱૌ͑ΒΕ·͢

    ๏཯໰୊ BZͷॏཁੑ ˞ग़యɿIUUQTFOHJOFFSJOHMJOFDPSQDPNKBCMPHVJUCBTFMJOFGPSGSPOUFOEEFWFMPQNFOUJO
  7. σβΠϯγεςϜ ͰͷBZ

  8. σβΠϯγεςϜͰͷBZ • ༷ʑͳঢ়گͰ࢖ΘΕΔ͜ͱΛ૝ఆ • ৭΍αΠζ΍λΠϛϯάͳͲ • ϖʔδͷBZ͸Ұ൪ऑ͍ͱ͜ΖͰܾΊΒΕΔ • ͪΌΜͱͨ͠σβΠϯγεςϜ͸͍͍౔୆ʹͳΓ·͕͢ɺอূ͸͠·ͤΜ

  9. BZͷରԠʹ໾ཱͭ৽͍͠ 8FC4UBOEBSE

  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 • .FEJBRVFSZͷDPOUBJOFS൛ • ΑΓ3FTQPOTJWFͳσβΠϯΛ࡞ Δ͜ͱʹ༗ޮ • ·ͩ&EJUPS %SBGUͳͷͰɺ4QFD ͕มΘΔՄೳੑ͸ߴ͍

     51 
  16. • IUUQTFOHJOFFSJOHMJOFDPSQDPNKBCMPHVJUCBTFMJOFGPSGSPOUFOEE FWFMPQNFOUJO • IUUQTDTTUSJDLTDPNOVLJOHNPUJPOXJUIQSFGFSTSFEVDFENPUJPO • IUUQTEFWFMPQFSNP[JMMBPSHKBEPDT8FC$44GPDVTWJTJCMF • IUUQTXFCLJUPSHCMPHJOUSPEVDJOHUIFEJBMPHFMFNFOU •

    IUUQTDTTUSJDLTDPNFYQMPSJOHDPMPSDPOUSBTUGPSUIFGJSTUUJNF • IUUQTIBDLTNP[JMMBPSHJOUFSPQ • IUUQTXFCEFWJOKBOFXSFTQPOTJWF ΋ͬͱ஌Γ͍ͨਓ͸ͪ͜ΒΛࢀর͍ͩ͘͞
  17. THANK YOU