ブロックエディターではじめるアクセシビリティ / start accessibility with block editor

2021年1月29日に開催された WP Zoom UP #57 新春LT大会2021！で発表したスライドです。
テキスト版はこちら

Transcript

1. 2021.1.29 WP Zoom UP #57
   @mjmjsachi
   ϒϩοΫΤσΟλʔͰ
   ͸͡ΊΔΞΫηγϏϦςΟ
   

   View Slide

2. ߴ஌ࡏॅ
   ϑϦʔϥϯεσβΠφʔ
   ҹ࡮෺ʴ΢Σϒ
   @mjmjsachi
   ؒౢࠫ஌
   

   View Slide

3. ͸͡Ίʹ
   

   View Slide

4. ϒϩοΫΤσΟλʔ
   ࢖ͬͯ·͔͢ʁ
   2
   

   View Slide

5. *OUSPEVDJOH8PSE1SFTT#FCP
   

   View Slide

6. Ͳ͏ͯ͠΢ΣϒͰ
   ൃ৴͢Δͷʁ
   2
   

   View Slide

7. ΑΓଟ͘ͷਓʹ
   ৘ใΛಧ͚ΔͨΊ
   "
   

   View Slide

8. ୭Ͱ΋ੈքʹ޲͚ͯൃ৴Ͱ͖Δ
   ϒϩοΫΤσΟλʔͰ͞Βʹࣗ༝ʹ
   Power of WEB
   ൃ৴͢ΔՄೳੑ
   

   View Slide

9. ୭Ͱ΋޷͖ͳ࣌ʹ޷͖ͳ৔ॴͰ
   ޷͖ͳܗࣜͰ৘ใΛಘΒΕΔ
   Power of WEB
   ड͚औΔՄೳੑ
   

   View Slide

10. εΫϦʔϯϦʔμʔ ఺ࣈσΟεϓϨΠ
    ֦େπʔϧ ϋΠίϯτϥετදࣔ
    ࣈນ ΩʔϘʔυૢ࡞ ຋༁πʔϧ
    Ϣʔβʔʷར༻؀ڥ
    

    View Slide

11. ୭΋͕৘ใʹΞΫηεͰ͖Δ
    ΞΫηγϏϦςΟ
    Access + ability
    ՄೳੑΛ࠷େԽ͢ΔͨΊʹ
    

    View Slide

12. WordPress
    ͱ
    ΞΫηγϏϦςΟ
    

    View Slide

13. IUUQTNBLFXPSEQSFTTPSHBDDFTTJCJMJUZIBOECPPL
    

    View Slide

14. All new or updated code released
    in WordPress must conform with
    the Web Content Accessibility
    Guidelines 2.1 at level AA.
    ʠ
    ʡ
    

    View Slide

15. *OUSPEVDJOH5XFOUZ5XFOUZ0OFc.BLF8PSE1SFTT$PSF
    

    View Slide

16. View Slide

17. 8PSE1SFTTຊମ
    ςʔϚ
    ίϯςϯπ
    

    View Slide

18. ϒϩοΫΤσΟλʔ
    ʷ
    ΞΫηγϏϦςΟ
    

    View Slide

19. ݟग़͠Λ͚ͭΑ͏
    ϙΠϯτ⁞
    

    View Slide

20. ৽͍͠ηΫγϣϯΛ঺հ͠
    ίϯςϯπΛ੔ཧ͢Δ͜ͱͰɺ
    ๚໰ऀ
    ʢ͓ΑͼݕࡧΤϯδϯʣ
    ͷ
    ίϯςϯπߏ଄ཧղͷखॿ͚Λ
    ͠·͠ΐ͏ɻ
    

    View Slide

21. View Slide

22. H1ɹಈ෺ʢλΠτϧʣ
    H2ɹ੸௣ಈ෺
    H3ɹڕྨ
    H3ɹ྆ੜྨ
    H3ɹᗡ஬ྨ
    H3ɹௗྨ
    H3ɹᄡೕྨ
    H4ɹώτ
    H4ɹͿͨ
    (H1)
    H2
    H3
    H4
    H5
    H6
    

    View Slide

23. ݟग़͠ͱ
    จॻߏ଄
    

    View Slide

24. View Slide

25. View Slide

26. ୅ସςΩετΛ͚ͭΑ͏
    ϙΠϯτ 
    

    View Slide

27. View Slide

28. ୅ସςΩετʹ͸
    ը૾ͱ౳Ձͳ಺༰Λ
    ը૾ͱஔ͖׵͑ͯ΋աෆ଍͕ͳ͍
    

    View Slide

29. ͜;ͨͷҭͯํ
    ͜Ϳͨͷҭͯํ
    ྫɿը૾ͷதʹจࣈ͕͋Δ
    

    View Slide

30. ద੾ͳ୅ସςΩετ͸
    ը૾͕࢖ΘΕ͍ͯΔจ຺΍
    ໨తʹΑͬͯมΘΔ
    

    View Slide

31. Ϳͨͷஔ෺
    ྫɿྡ઀͢ΔςΩετ͕͋Δ
    Ϳͨͷஔ෺
    

    View Slide

32. ྫɿྡ઀͢ΔςΩετ͕͋Δ
    Ϳͨͷஔ෺
    ਖ਼໘ͷࣸਅɿϐϯΫͷ
    ؙ͍ମʹͭͿΒͳಏͱ
    ୹͍଍ɻ
    

    View Slide

33. "OBMU%FDJTJPO5SFFc8"*8FC"DDFTTJCJMJUZ5VUPSJBMT
    

    View Slide

34. ୅ସςΩετܾఆπϦʔʛ4"8"%"45"/%"3%%&4*(/
    

    View Slide

35. จࣈͱഎܠͷ৭ʹ
    ؾΛ͚ͭΑ͏
    ϙΠϯτ⁠
    

    View Slide

36. View Slide

37. ίϯτϥετΛ֬อ͠Α͏
    Ϣʔβʔͷࢹྗ΍Ӿཡ؀ڥ͸༷ʑ
    จࣈ৭ͱഎܠ৭ͷ໌Δ͞ͷࠩ
    

    View Slide

38. 1.ݟग़͠Λ͚ͭΑ͏
    2.୅ସςΩετΛ͚ͭΑ͏
    3.จࣈͱഎܠͷ৭ʹؾΛ͚ͭΑ͏
    

    View Slide

39. ͍͞͝ʹ
    

    View Slide

40. ΞΫηγϏϦςΟ͸
    ʮରԠ͢Δʯ
    ΋ͷͰ͸ͳ͘
    ߴΊΔ΋ͷ
    ʠ
    ʡ
    גࣜձࣾίϯηϯτɹ⁋উར͞Μ
    

    View Slide

41. ϒϩοΫΛੵΈ্͛ΔΑ͏ʹ
    

    View Slide

42. ͋Γ͕ͱ͏͍͟͝·ͨ͠
    Enjoy Block Editor & Accessibility!
    

    View Slide