WCAG 2.1 ์ •๋ฆฌ

๐Ÿ‘€ WCAG?

  • WCAG๋Š” Web Content Accessibility Guideline์˜ ์ค„์ž„๋ง๋กœ ์›น ์ฝ˜ํ…์ธ ๋ฅผ ์ ‘๊ทผ์„ฑ ์žˆ๊ฒŒ ๋งŒ๋“ค๊ธฐ ์œ„ํ•œ ๊ถŒ์žฅ ํ‘œ์ค€
  • ์ด ํ‘œ์ค€์„ ์ค€์ˆ˜ํ•จ์„ ํ†ตํ•ด ์‹œ๊ฐ, ์ฒญ๊ฐ, ์šด๋™์žฅ์•  ๋“ฑ ๊ด‘๋ฒ”์œ„ํ•œ ์žฅ์• ์— ๋Œ€ํ•œ ์ ‘๊ทผ์„ฑ ์žˆ๋Š” ์ฝ˜ํ…์ธ ๋ฅผ ๋งŒ๋“ค ์ˆ˜ ์žˆ์Œ
  • ์›น ์ ‘๊ทผ์„ฑ์˜ ๊ธฐ์ดˆ๋ฅผ ์ œ๊ณตํ•˜๋Š” 4๊ฐ€์ง€ ์›์น™์ธ ์ธ์‹์˜ ์šฉ์ด์„ฑ(Perceivable), ์šด์šฉ์˜ ์šฉ์ด์„ฑ(Operable), ์ดํ•ด์˜ ์šฉ์ด์„ฑ(Understandable), ๊ฒฌ๊ณ ์„ฑ(Robust)์— ๊ธฐ๋ฐ˜์„ ๋‘๊ณ  ์žˆ์Œ
  • ์›์น™์„ ๊ธฐ๋ฐ˜์œผ๋กœ ์ ‘๊ทผ์„ฑ์„ ์œ„ํ•ด ์–ด๋– ํ•œ ๋ชฉํ‘œ๋ฅผ ๋‹ฌ์„ฑํ•ด์•ผ ํ•˜๋Š”์ง€์— ๋Œ€ํ•œ ์ง€์นจ๊ณผ ๋˜ ๊ทธ ์ง€์นจ์— ๋Œ€ํ•œ ๊ฒ€์ฆ๊ฐ€๋Šฅํ•œ ์„ฑ๊ณต๊ธฐ์ค€์„ ์ œ์‹œํ•˜๊ณ  ์žˆ์Œ
  • ์„ฑ๊ณต๊ธฐ์ค€์€ ์ตœ์ €์ˆ˜์ค€์ธ level A ๋ถ€ํ„ฐ ์ตœ๊ณ ์ˆ˜์ค€์ธ level AAA๊นŒ์ง€ 3๋‹จ๊ณ„๋กœ ๋‚˜๋ˆ„์–ด์ง

WCAG 2.0 VS WCAG 2.1

WCAG 2.0 ์ด ๋งŒ๋“ค์–ด์กŒ์„๋•Œ๋Š” ์ฃผ๋กœ ๋ฐ์Šคํฌํƒ‘ ํ™˜๊ฒฝ๋งŒ์„ ๊ณ ๋ คํ–ˆ์ง€๋งŒ ๊ทธ ํ›„ ๋ชจ๋ฐ”์ผ ์‚ฐ์—…์˜ ํญ๋ฐœ์ ์ธ ํ™•์žฅ์œผ๋กœ ๋ชจ๋ฐ”์ผ ํ™˜๊ฒฝ์„ ํ•„์ˆ˜์ ์œผ๋กœ ๊ณ ๋ คํ•ด์•ผํ•˜๋Š” ์ƒํ™ฉ์ด ์ฐพ์•„์™”๋‹ค.

WCAG 2.1์€ WCAG 2.0์˜ ์š”๊ตฌ์‚ฌํ•ญ๋“ค์„ ์ƒ์†ํ•˜๋ฉด์„œ ์ถ”๊ฐ€์ ์œผ๋กœ ์ธ์ง€๋‚˜ ํ•™์Šต์žฅ์• ๊ฐ€ ์žˆ๋Š” ์‚ฌ์šฉ์ž, ์ €์‹œ๋ ฅ์ž, ๋ชจ๋ฐ”์ผ ๊ธฐ๊ธฐ๋ฅผ ์‚ฌ์šฉํ•˜๋Š”๋ฐ ์žฅ์• ๊ฐ€ ์žˆ๋Š” ์‚ฌ์šฉ์ž์˜ ์ ‘๊ทผ์„ฑ ์ง€์นจ์„ ๊ฐœ์„ ํ•˜๋Š” ๋ฐ ๋ชฉํ‘œ๋ฅผ ๋‘๊ณ ์žˆ๋‹ค.

์ฆ‰ WCAG 2.1์€ ์ƒˆ๋กœ์šด ์„ฑ๊ณต๊ธฐ์ค€, ์ด๋ฅผ ์ง€์›ํ•˜๊ธฐ ์œ„ํ•œ ์ •์˜, ์ถ”๊ฐ€์‚ฌํ•ญ์„ ์กฐ์งํ•˜๊ธฐ ์œ„ํ•œ ์ง€์นจ, ๊ทธ๋ฆฌ๊ณ  ์ค€์ˆ˜ ์ ˆ(section)์— ๋Œ€ํ•œ ๋ช‡ ๊ฐ€์ง€ ์‚ฌํ•ญ์„ ์ถ”๊ฐ€ํ•˜์—ฌ WCAG 2.0์„ ํ™•์žฅํ•œ ๊ฒƒ์ด๋‹ค.


1. ์ธ์‹์˜ ์šฉ์ด์„ฑ(Perceivable)

  • ์ •๋ณด์™€ ์‚ฌ์šฉ์ž ์ธํ„ฐํŽ˜์ด์Šค ์š”์†Œ๋Š” ์‚ฌ์šฉ์ž๊ฐ€ ์ธ์‹ํ•  ์ˆ˜ ์žˆ๋Š” ๋ฐฉ๋ฒ•์œผ๋กœ ์ œ์‹œ๋˜์–ด์•ผ ํ•œ๋‹ค.
  • 4๊ฐ€์ง€ ์ง€์นจ๊ณผ ๊ทธ์— ๋Œ€ํ•œ 29๊ฐ€์ง€ ์„ฑ๊ณต๊ธฐ์ค€์„ ๊ฐ€์ง€๊ณ  ์žˆ๋‹ค.

์ง€์นจ 1.1 ๋Œ€์ฒดํ…์ŠคํŠธ

  • ํ…์ŠคํŠธ๊ฐ€ ์•„๋‹Œ ์ฝ˜ํ…์ธ ์˜ ๊ฒฝ์šฐ ๋ชฉ์ ์— ์ƒ์‘ํ•˜๋Š” ๋Œ€์ฒด ํ…์ŠคํŠธ๋ฅผ ์ œ๊ณตํ•ด์•ผ ํ•œ๋‹ค. (ex - img alt์†์„ฑ)

  • ๋‹จ ์‹œ๋ ฅ๊ฒ€์‚ฌ, ๋ฐ›์•„์“ฐ๊ธฐ์™€ ๊ฐ™์€ Test๋‚˜ ํŠน์ • ๊ฐ๊ฐ์„ ์œ„ํ•œ ์•…๊ธฐ์—ฐ์ฃผ ๋“ฑ ํ…์ŠคํŠธ๋งŒ์œผ๋กœ ๊ทธ ๋‚ด์šฉ์„ ์„ค๋ช…ํ•˜๊ธฐ์— ์• ๋งคํ•œ ๊ฒฝ์šฐ ์ฝ˜ํ…์ธ ์˜ ์šฉ๋„๋งŒ์„ ๊ธฐ์ˆ ํ•˜๋Š” ๊ฒƒ๋„ ๊ดœ์ฐฎ๋‹ค.

  • ํ…์ŠคํŠธ ์•„๋‹Œ ์ฝ˜ํ…์ธ ๊ฐ€ ์ˆœ์ˆ˜ํ•œ ์žฅ์‹์ด๊ฑฐ๋‚˜, ๋ณด์ด์ง€ ์•Š๋Š”๊ฒฝ์šฐ ๋Œ€์ฒดํ…์ŠคํŠธ๋ฅผ ์ œ๊ณตํ•˜์ง€ ์•Š๋Š” ํŽธ์ด ํ•ฉ๋ฆฌ์ ์ด๋‹ค

์ง€์นจ 1.2 ์‹œ๊ฐ„๊ธฐ๋ฐ˜ ๋ฏธ๋””์–ด

  • ์‹œ๊ฐ„๊ธฐ๋ฐ˜ ๋ฏธ๋””์–ด์— ๋Œ€ํ•œ ๋Œ€์ฒด์ˆ˜๋‹จ์„ ์ œ๊ณตํ•ด์•ผ ํ•œ๋‹ค

  • ๋‹ฌ์„ฑํ•˜๊ธฐ ๋น„๊ต์  ์‰ฌ์šด level A ๋ถ€ํ„ฐ ์–ด๋ ค์šด level AAA ๊นŒ์ง€ ์ด 9๊ฐœ์˜ ๊ธฐ์ค€์„ ๊ฐ€์ง€๊ณ  ์žˆ๋‹ค.

  • level์ด ์˜ฌ๋ผ๊ฐˆ์ˆ˜๋ก ๋” ์ž์„ธํ•˜๊ณ  ๋งŽ์€ ์ •๋ณด๋ฅผ ์‹ค์‹œ๊ฐ„์œผ๋กœ ์ œ๊ณตํ•˜๋Š” ๊ฒƒ์„ ๊ธฐ์ค€์œผ๋กœ ์‚ผ๊ณ  ์žˆ๋‹ค.

์ง€์นจ 1.3 ์ ์‘๊ฐ€๋Šฅ

  • ์ฝ˜ํ…์ธ ๊ฐ€ ์ •๋ณด๋‚˜ ๊ตฌ์กฐ์˜ ์†์‹ค ์—†์ด ๋‹ค๋ฅธ ๋ฐฉ๋ฒ•๋“ค๋กœ ํ‘œ์‹œ๋  ์ˆ˜ ์žˆ๋„๋ก ์ œ์ž‘๋˜์–ด์•ผ ํ•œ๋‹ค.

  • ์ฝ˜ํ…์ธ ์˜ ์ •๋ณด, ๊ตฌ์กฐ, ๊ด€๊ณ„๋Š” ํ”„๋กœ๊ทธ๋ž˜๋ฐ ๋ฐฉ์‹์œผ๋กœ ๊ฒฐ์ •๋˜์–ด์•ผ ํ•˜๊ณ  ๋˜ ์ฝ˜ํ…์ธ ๊ฐ€ ํ‘œ์‹œ๋˜๋Š” ์ˆœ์„œ๊ฐ€ ์˜๋ฏธ์— ์˜ํ–ฅ์„ ์ฃผ๋Š” ๊ฒฝ์šฐ ์˜ฌ๋ฐ”๋ฅธ ์ฝ๊ธฐ ์ˆœ์„œ ์—ญ์‹œ ํ”„๋กœ๊ทธ๋ž˜๋ฐ ๋ฐฉ์‹์œผ๋กœ ๊ฒฐ์ •๋˜์–ด์•ผ ํ•œ๋‹ค.

    ํ”„๋กœ๊ทธ๋ž˜๋ฐ ๋ฐฉ์‹์œผ๋กœ ๊ฒฐ์ •๋œ๋‹ค๋Š” ๊ฒƒ์€ ํ™•๋Œ€๊ธฐ, ์Œ์„ฑ ์ธ์‹ ์†Œํ”„ํŠธ์›จ์–ด์™€ ๊ฐ™์€ ๋ณด์กฐ๊ณตํ•™์„ ํฌํ•จํ•œ user agent(์›น ๋ธŒ๋ผ์šฐ์ €)๊ฐ€ ๊ฐœ๋ฐœ์ž ์ œ๊ณต ๋ฐ์ดํ„ฐ๋กœ๋ถ€ํ„ฐ ์ •๋ณด๋ฅผ ์ถ”์ถœํ•ด ์‚ฌ์šฉ์ž์—๊ฒŒ ๋‹ค๋ฅธ ํ˜•์‹์œผ๋กœ ์ œ๊ณตํ•  ์ˆ˜ ์žˆ์Œ์„ ๋œปํ•œ๋‹ค - ๋Œ€์ฒดํ…์ŠคํŠธ์˜ img alt ์†์„ฑ ์ฒ˜๋Ÿผ

  • ์ฝ˜ํ…์ธ ๋ฅผ ์ดํ•ดํ•˜๊ณ  ์ž‘๋™ํ•˜๊ธฐ ์œ„ํ•ด ์ œ๊ณต๋œ ์ง€์‹œ๋ฌธ์€ ๋ชจ์–‘, ์ƒ‰์ƒ, ํฌ๊ธฐ, ์‹œ๊ฐ์  ์œ„์น˜ ๋“ฑ ๊ตฌ์„ฑ์š”์†Œ์˜ ๊ฐ๊ฐ์  ํŠน์„ฑ์— ์ „์ ์œผ๋กœ ์˜์กดํ•ด์„œ๋Š” ์•ˆ ๋œ๋‹ค.

์ง€์นจ 1.4 ์‹๋ณ„ ๊ฐ€๋Šฅ

  • ์ƒ‰์ƒ์€ ์‹œ๊ฐ์  ์š”์†Œ ๊ตฌ๋ณ„์„ ์œ„ํ•œ ์œ ์ผํ•œ ์‹œ๊ฐ์  ์ˆ˜๋‹จ์œผ๋กœ๋งŒ ์‚ฌ์šฉ๋˜์–ด์„œ๋Š” ์•ˆ๋œ๋‹ค.

  • ์›น ํŽ˜์ด์ง€์— ์žˆ๋Š” ์˜ค๋””์˜ค๋ฅผ ์ปจํŠธ๋กค ํ• ์ˆ˜ ์žˆ์–ด์•ผ ํ•˜๊ณ , ๋ฐฐ๊ฒฝ์Œ์ด ๋‚ฎ๊ฑฐ๋‚˜ ์—†์–ด์•ผํ•œ๋‹ค - ์Šคํฌ๋ฆฐ๋ฆฌ๋” ์‚ฌ์šฉ์ž๋ฅผ ์œ„ํ•œ ํ•ญ๋ชฉ์œผ๋กœ, ์Šคํฌ๋ฆฐ๋ฆฌ๋” ์‚ฌ์šฉ์ž๋Š” ์ฒญ๊ฐ์„ ํ†ตํ•ด ์ •๋ณด๋ฅผ ๋ฐ›์•„๋“ค์ด๊ธฐ ๋•Œ๋ฌธ์— ๋‹ค๋ฅธ ์˜ค๋””์˜ค๋‚˜ ๋ฐฐ๊ฒฝ์Œ์ด ์ง€์†๋œ๋‹ค๋ฉด ์ฝ˜ํ…์ธ ๋ฅผ ์ด์šฉํ•˜๋Š”๋ฐ ๋ถˆํŽธํ•จ์„ ๊ฒช์„ ์ˆ˜ ์žˆ์Œ.

  • ํ…์ŠคํŠธ ์ด๋ฏธ์ง€ ๋ณด๋‹ค๋Š” ํ…์ŠคํŠธ๋ฅผ ์‚ฌ์šฉํ•ด์•ผ ํ•˜๊ณ , ํ…์ŠคํŠธ์˜ ๋ช…๋„๋Œ€๋น„, ํฌ๊ธฐ ์กฐ์ •๋“ฑ์„ ํ†ตํ•ด ๊ฐ€์‹œ์„ฑ์„ ๋†’์—ฌ์•ผํ•œ๋‹ค.


์ถ”๊ฐ€์ค‘โ€ฆ


์ฐธ๊ณ