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

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

majimasachi
January 29, 2021

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

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

majimasachi

January 29, 2021
Tweet

More Decks by majimasachi

Other Decks in Design

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