๐ฐ์น ์ ๊ทผ์ฑ(Web Accessibility)
๐ด ๋ชจ๋ ์ฌ์ฉ์๊ฐ ์ ์ฒด์ , ํ๊ฒฝ์ ์กฐ๊ฑด์ ๊ด๊ณ์์ด ์น์ ์ ๊ทผํ์ฌ ์ด์ฉํ ์ ์๋๋ก ๋ณด์ฅํ๋ ๊ฒ.
- ์ ์ฒด์ ์กฐ๊ฑด - ์ฅ์ ์ธ, ๊ณ ๋ น์ ๋ฑ์ ํฌํจํ ๋ชจ๋ ์ฌ์ฉ์
- ํ๊ฒฝ์ ์กฐ๊ฑด - ๋ค์ํ ๊ธฐ๊ธฐ(์ด์์ฒด์ , ์น ๋ธ๋ผ์ฐ์ ๋ฑ)
๐ฐ์น ์ ๊ทผ์ฑ ๊ฐ์ด๋๋ผ์ธ(WCAG)
๐ด Web Content Accessibility Guidelines, ์น ์ฌ์ดํธ/์ ํ๋ฆฌ์ผ์ด์ ์์ ์ถฉ์กฑํด์ผ ํ๋ ๊ธฐ์ค ์ ์.
<4๊ฐ์ง ์์น>
- ์ธ์ ๊ฐ๋ฅํ๊ณ (perceivable) - ex) img์ alt์์ฑ ์ฌ์ฉ
- ์กฐ์ ๊ฐ๋ฅํ๋ฉฐ(operable) - ex) div ์ฌ์ฉ ์ tabindex="0"
- ์ดํด ํ ์ ์๊ณ (understandable) - ex) <html lang="ko-KR"> ์ฌ์ฉ
- ๊ฒฌ๊ณ ํด์ผ ํจ(robust) - ex) ์ฌ์ฉ์๊ฐ ์ด์ฉํ๋ ๋ชจ๋ ๊ธฐ๊ธฐ ๋ฐ ๋ธ๋ผ์ฐ์ ์์ ์ ๊ทผ/์ฌ์ฉ ๊ฐ๋ฅํด์ผ ํจ.
๐ฐ์ ๊ทผ ๊ฐ๋ฅํ ๋ฆฌ์น ์ธํฐ๋ท ์ ํ๋ฆฌ์ผ์ด์ (WAI-ARIA)
๐ด Web Accessibility Initiative - Accessible Rich Internet Applications
๐ฅ Rich Internet Applications
- ์ด๊ธฐ ์น์ ๋ฌธ์์ ๋ฌธ์ ์ฐ๊ฒฐ์ ์ํ ๋ชฉ์ ์ผ๋ก ์ค๊ณ => Hyper Text
- ์น์ ๋น ๋ฅธ ์ฑ์ฅ์ผ๋ก ๋ ์ด์ ๋ฌธ์ ๊ฐ๋ ์ด ์๋ ๋ฐ์คํฌํ ์์ค์ ์ ํ๋ฆฌ์ผ์ด์ ๊ณผ ๊ฐ์ ์ฌ์ฉ์ ๊ฒฝํ์ ์๊ตฌ์ ์ด๋ฆ => ์ด๋ฐ ์๊ตฌ ์ถฉ์กฑ์ํค๊ธฐ ์ํด Rich Internet Applications ๋ฑ์ฅ
- ๊ทธ๋ฌ๋ RIA ๊ธฐ์ ์ ์คํฌ๋ฆฐ ๋ฆฌ๋ ๋ฑ ๋ณด์กฐ ๊ธฐ์ ์ ์ฌ์ฉํ๋ ์ฅ์ ์ธ์ด ์ ๋๋ก ์ฌ์ฉํ ์ ์์์
๐ฅ WAI-ARIA๋ ๋ณด์กฐ๊ธฐ๊ธฐ์์ ์ ๊ทผ์ฑ ๋ฐ ์ํธ ์ด์ฉ์ฑ ํฅ์์ํค๊ธฐ ์ฐ์ดํ ์ ๋ณด ์ถ๊ฐํ๋๋ก ์ง์
- ์ญํ (role), ์์ฑ(property), ์ํ(state) ์ ๋ณด
- ์ด๋ฐ ์ ๋ณด๊ฐ ์น ๋ธ๋ผ์ฐ์ ์ ์ํด ์๋ ํด์, ๊ฐ ์ด์์ฒด์ ์ ์ ๊ทผ์ฑ API๋ก ๋ณํ๋๋๋ก ์ค๊ณ๋จ
- ๋ณด์กฐ๊ธฐ๊ธฐ๋ ์ด์์ฒด์ ์์ ์ ๊ณตํ๋ API๋ฅผ ํตํด ๋ฐ์คํฌํ ์ ํ๋ฆฌ์ผ์ด์ ๊ณผ ๋์ผํ ๋ฐฉ๋ฒ์ผ๋ก ์ธ์, ์ํธ์์ฉ
์ฐธ๊ณ :
'HTML & CSS' ์นดํ ๊ณ ๋ฆฌ์ ๋ค๋ฅธ ๊ธ
| [Sass] Sass ์ค์น, ์ปดํ์ผ ๋ช ๋ น์ด (0) | 2024.05.20 |
|---|---|
| Flexbox -> justify-content, align-items, order (0) | 2024.05.06 |
| Flexbox -> flex-direction, flex-wrap, flex-flow (0) | 2024.05.06 |
| margin/padding/border (0) | 2024.02.01 |
| Block & Inline (0) | 2024.02.01 |