{"id":431,"date":"2025-06-20T09:30:00","date_gmt":"2025-06-20T09:30:00","guid":{"rendered":"https:\/\/pixelline.co.kr\/blog\/?p=431"},"modified":"2025-06-18T07:05:01","modified_gmt":"2025-06-18T07:05:01","slug":"%ec%a4%91%ec%86%8c%ea%b8%b0%ec%97%85%ec%9d%84-%ec%9c%84%ed%95%9c-%ec%9b%b9%ec%a0%91%ea%b7%bc%ec%84%b1wcag-2-2-%ed%95%b5%ec%8b%ac-%ec%b2%b4%ed%81%ac-10%ea%b0%80%ec%a7%80","status":"publish","type":"post","link":"https:\/\/pixelline.co.kr\/blog\/%ec%a4%91%ec%86%8c%ea%b8%b0%ec%97%85%ec%9d%84-%ec%9c%84%ed%95%9c-%ec%9b%b9%ec%a0%91%ea%b7%bc%ec%84%b1wcag-2-2-%ed%95%b5%ec%8b%ac-%ec%b2%b4%ed%81%ac-10%ea%b0%80%ec%a7%80\/","title":{"rendered":"\uc911\uc18c\uae30\uc5c5\uc744 \uc704\ud55c \uc6f9\uc811\uadfc\uc131(WCAG 2.2) \ud575\uc2ec \uccb4\ud06c 10\uac00\uc9c0"},"content":{"rendered":"\n

‘\uc811\uadfc\uc131\uc740 \uacf5\uacf5\uae30\uad00\ub9cc \uc9c0\ud0a4\uba74 \ub418\ub294 \uaddc\uce59 \uc544\ub2cc\uac00?’ \uc774\uc81c\ub294 \uac80\uc0c9\u00b7\ubc95\uaddc\u00b7\ube0c\ub79c\ub4dc \uc2e0\ub8b0 \ubaa8\ub450\uac00 \uc694\uad6c\ud558\ub294 \ud544\uc218 \ud56d\ubaa9\uc785\ub2c8\ub2e4. WCAG 2.2 \uae30\uc900\uc744 \uac04\ub2e8\ud788 \uc774\ud574\ud558\uace0 10\uac00\uc9c0 \uccb4\ud06c\ub9ac\uc2a4\ud2b8\ub9cc \ub530\ub77c\ub3c4 ‘\ud648\ud398\uc774\uc9c0 \uc81c\uc791’ \ucd08\uae30 \ub2e8\uacc4\uc5d0\uc11c 80 % \uc774\uc0c1\uc758 \uc624\ub958\ub97c \uc608\ubc29\ud560 \uc218 \uc788\uc2b5\ub2c8\ub2e4.<\/strong><\/p>\n\n\n\n

\ubaa9\ucc28<\/h2>\n\n\n\n
    \n
  1. \ud0a4\ubcf4\ub4dc \ud3ec\ucee4\uc2a4 \uc21c\uc11c<\/a><\/li>\n\n\n\n
  2. \ub300\uccb4 \ud14d\uc2a4\ud2b8(ALT)<\/a><\/li>\n\n\n\n
  3. \uba85\ub3c4 \ub300\ube44 4.5 : 1<\/a><\/li>\n\n\n\n
  4. \ud3fc \ub77c\ubca8 & \uc624\ub958 \uba54\uc2dc\uc9c0<\/a><\/li>\n\n\n\n
  5. ARIA Role & \uc0c1\ud0dc<\/a><\/li>\n\n\n\n
  6. \ubaa8\uc158\u00b7\uc560\ub2c8\uba54\uc774\uc158 \uc81c\uc5b4<\/a><\/li>\n\n\n\n
  7. Skip \ub9c1\ud06c & \uad6c\uc870\ud654<\/a><\/li>\n\n\n\n
  8. \uc790\ub9c9\u00b7\uc790\ub9c9 \uc5c6\ub294 \uc601\uc0c1<\/a><\/li>\n\n\n\n
  9. \ucca8\ubd80 \ud30c\uc77c \uc811\uadfc\uc131<\/a><\/li>\n\n\n\n
  10. \uc790\ub3d9 \ud14c\uc2a4\ud2b8 & CI \ud30c\uc774\ud504\ub77c\uc778<\/a><\/li>\n\n\n\n
  11. \uc2e4\uc804 \ud65c\uc6a9 \uac00\uc774\ub4dc<\/a><\/li>\n\n\n\n
  12. FAQ<\/a><\/li>\n\n\n\n
  13. \ub9fa\uc74c\ub9d0<\/a><\/li>\n<\/ol>\n\n\n\n

    1. \ud0a4\ubcf4\ub4dc \ud3ec\ucee4\uc2a4 \uc21c\uc11c<\/h2>\n\n\n\n

    Tab \ud0a4\ub9cc\uc73c\ub85c \ubaa8\ub4e0 \ub9c1\ud06c\u00b7\ud3fc\u00b7\ubc84\ud2bc\uc744 \uc21c\uc11c\ub300\ub85c \uc774\ub3d9\ud560 \uc218 \uc788\uc5b4\uc57c \ud569\ub2c8\ub2e4. \ud3ec\ucee4\uc2a4\uac00 \uc2dc\uac01\uc801\uc73c\ub85c\ub3c4 \ub69c\ub837\ud574\uc57c \ud558\uba70, outline \uc81c\uac70 \ub300\uc2e0 ‘outline-offset:2px’\uc640 \uad75\uc740 \uceec\ub7ec\ub97c \uc0ac\uc6a9\ud569\ub2c8\ub2e4.<\/p>\n\n\n\n

    2. \ub300\uccb4 \ud14d\uc2a4\ud2b8(ALT)<\/h2>\n\n\n\n

    \ubaa8\ub4e0 \uc758\ubbf8 \uc788\ub294 \uc774\ubbf8\uc9c0\uc5d0\ub294 ALT\ub97c \ub123\uace0, \uc7a5\uc2dd\uc6a9 \uc774\ubbf8\uc9c0\ub294 ALT=”(\ube48 \ubb38\uc790\uc5f4)\ub85c \uc2a4\ud06c\ub9b0\ub9ac\ub354 \uac74\ub108\ub6f0\uae30\ub97c \uc124\uc815\ud569\ub2c8\ub2e4. \uc608: ‘\uc81c\ud488 A \uc804\uba74 \uc0ac\uc9c4’\ucc98\ub7fc \ud575\uc2ec \uc815\ubcf4\ub97c \uc694\uc57d\ud569\ub2c8\ub2e4.<\/p>\n\n\n\n

    3. \uba85\ub3c4 \ub300\ube44 4.5 : 1<\/h2>\n\n\n\n

    \ud14d\uc2a4\ud2b8\u00b7\uc544\uc774\ucf58\uacfc \ubc30\uacbd \uac04 \uba85\ub3c4 \ub300\ube44\ub97c 4.5 : 1 \uc774\uc0c1 \uc720\uc9c0\ud569\ub2c8\ub2e4. Figma \ud50c\ub7ec\uadf8\uc778 ‘Stark’\ub85c \uc2e4\uc2dc\uac04 \uac80\uc0ac\uac00 \uac00\ub2a5\ud569\ub2c8\ub2e4.<\/p>\n\n\n\n

    \"\ud14d\uc2a4\ud2b8\u00b7\uc544\uc774\ucf58\uacfc<\/figure>\n\n\n\n

    4. \ud3fc \ub77c\ubca8 & \uc624\ub958 \uba54\uc2dc\uc9c0<\/h2>\n\n\n\n

    \ud0dc\uadf8\ub97c \uc0ac\uc6a9\ud558\uace0 aria-invalid=’true’\ub97c \uc624\ub958 \ud544\ub4dc\uc5d0 \uc9c0\uc815\ud569\ub2c8\ub2e4. \uc2e4\uc2dc\uac04 \uac80\uc99d \uc2dc \uc2dc\uac01\u00b7\uc2a4\ud06c\ub9b0\ub9ac\ub354 \ub3d9\uc2dc\uc5d0 \uc54c\ub9b4 \uc218 \uc788\ub3c4\ub85d role=’alert’ \ucee8\ud14c\uc774\ub108\ub97c \uc501\ub2c8\ub2e4.<\/p>\n\n\n\n

    5. ARIA Role & \uc0c1\ud0dc<\/h2>\n\n\n\n

    \ub2e4\uc774\uc5bc\ub85c\uadf8\u00b7\ud1a0\uae00\u00b7\ud0ed \ucef4\ud3ec\ub10c\ud2b8\uc5d0\ub294 role=’dialog’ ‘tablist’ \ub4f1\uc744 \uc815\uc758\ud558\uace0 aria-expanded, aria-selected\ub85c \ud604\uc7ac \uc0c1\ud0dc\ub97c \uba85\ud655\ud788 \ud45c\uc2dc\ud569\ub2c8\ub2e4.<\/p>\n\n\n\n

    6. \ubaa8\uc158\u00b7\uc560\ub2c8\uba54\uc774\uc158 \uc81c\uc5b4<\/h2>\n\n\n\n

    prefers-reduced-motion : reduce \ubbf8\ub514\uc5b4 \ucffc\ub9ac\ub97c \uc774\uc6a9\ud574 \uc560\ub2c8\uba54\uc774\uc158\uc744 \ube44\ud65c\uc131\ud654 \uc635\uc158\uc73c\ub85c \uc81c\uacf5\ud569\ub2c8\ub2e4. 3\ucd08 \uc774\uc0c1 \uae5c\ube61\uc774\ub294 \ud6a8\uacfc\ub294 \uae08\uc9c0\uc785\ub2c8\ub2e4.<\/p>\n\n\n\n

    \"\ubaa8\uc158\u00b7\uc560\ub2c8\uba54\uc774\uc158<\/figure>\n\n\n\n

    7. Skip \ub9c1\ud06c & \uad6c\uc870\ud654<\/h2>\n\n\n\n

    \ud398\uc774\uc9c0 \uc0c1\ub2e8\uc5d0 ‘\ubcf8\ubb38 \ubc14\ub85c\uac00\uae30’ \ub9c1\ud06c\ub97c \uc228\uae40 \ud3ec\ucee4\uc2a4(outline-visible)\ub85c \uc81c\uacf5\ud558\uace0, h1\u2192h2\u2192h3 \uacc4\uce35\uc744 \ub17c\ub9ac\uc801 \uc21c\uc11c\ub85c \uc720\uc9c0\ud574 \uc2a4\ud06c\ub9b0\ub9ac\ub354 \ud750\ub984\uc744 \ubcf4\uc7a5\ud569\ub2c8\ub2e4.<\/p>\n\n\n\n

    8. \uc790\ub9c9\u00b7\uc790\ub9c9 \uc5c6\ub294 \uc601\uc0c1<\/h2>\n\n\n\n

    \ubaa8\ub4e0 \ub3d9\uc601\uc0c1\uc5d0\ub294 \ub3d9\uc77c \uc5b8\uc5b4 \uc790\ub9c9\uc744, \ubc30\uacbd \uc0ac\uc6b4\ub4dc \uc5c6\ub294 \uc124\uba85 \uc601\uc0c1\uc5d0\ub294 \ud14d\uc2a4\ud2b8 \ub300\ubcf8 \ub9c1\ud06c\ub77c\ub3c4 \uc81c\uacf5\ud574\uc57c \ud569\ub2c8\ub2e4.<\/p>\n\n\n\n

    9. \ucca8\ubd80 \ud30c\uc77c \uc811\uadfc\uc131<\/h2>\n\n\n\n

    PDF\u00b7PPT\ub294 \ud0dc\uadf8\ub41c \uad6c\uc870(Tagged PDF)\ub85c \uc800\uc7a5\ud558\uace0, \ub9c1\ud06c \ubc14\ub85c \uc55e\uc5d0 ‘(PDF, 2 MB)’\ucc98\ub7fc \ud615\uc2dd\u00b7\uc6a9\ub7c9\uc744 \uc548\ub0b4\ud569\ub2c8\ub2e4.<\/p>\n\n\n\n

    10. \uc790\ub3d9 \ud14c\uc2a4\ud2b8 & CI \ud30c\uc774\ud504\ub77c\uc778<\/h2>\n\n\n\n

    axe-core + Playwright \uc2a4\ud06c\ub9bd\ud2b8\ub97c GitHub Actions\uc5d0 \ucd94\uac00\ud558\uba74 \ud478\uc2dc \ub54c\ub9c8\ub2e4 \uc811\uadfc\uc131 \uc624\ub958\ub97c \ub9ac\ud3ec\ud2b8\ud569\ub2c8\ub2e4. \uc624\ub958 0, \uacbd\uace0 \u22645\ub97c \ud1b5\uacfc \uae30\uc900\uc73c\ub85c \uc124\uc815\ud569\ub2c8\ub2e4.<\/p>\n\n\n\n

    \"\uc790\ub3d9<\/figure>\n\n\n\n

    \uc2e4\uc804 \ud65c\uc6a9 \uac00\uc774\ub4dc<\/h2>\n\n\n\n
      \n
    1. \ub514\uc790\uc778 \uc2dc\uc2a4\ud15c\uc5d0 \uceec\ub7ec\u00b7\ud3f0\ud2b8 \ud1a0\ud070 \ub4f1\ub85d<\/li>\n\n\n\n
    2. \ucef4\ud3ec\ub10c\ud2b8 \ub77c\uc774\ube0c\ub7ec\ub9ac(React) ARIA \uc18d\uc131 \uc810\uac80<\/li>\n\n\n\n
    3. axe-linter VS Code \ud50c\ub7ec\uadf8\uc778 \uc124\uce58<\/li>\n\n\n\n
    4. CI \ud30c\uc774\ud504\ub77c\uc778 \uc790\ub3d9 \uc2a4\uce94 & Slack \uc54c\ub9bc<\/li>\n\n\n\n
    5. \ubd84\uae30\ubcc4 \uc218\ub3d9 \uac10\ub9ac(\uc2a4\ud06c\ub9b0\ub9ac\ub354, \ud0a4\ubcf4\ub4dc) \uc9c4\ud589<\/li>\n<\/ol>\n\n\n\n

      FAQ<\/h2>\n\n\n\n