๐ฐ WAI-ARIA ์์ฑ๋ค ์ ๋ฆฌ
ARIA ์์ฑ ์ ํ
- Widget ์์ฑ - ์น ํ์ด์ง์ ์ํธ ์์ฉ ์์๋ฅผ ์๋ณํ๊ณ ๊ธฐ๋ฅ์ ์ ์
- Live region ์์ฑ - ์น ํ์ด์ง์ ๋ด์ฉ์ด ๋์ ์ผ๋ก ์ ๋ฐ์ดํธ๋๋ ์์ญ์ ์๋ณํ๊ณ ์คํฌ๋ฆฐ ๋ฆฌ๋์ ์๋ฆผ
- Drag-and-Drop ์์ฑ - ์น ํ์ด์ง์์ ๋๋๊ทธ ์ค ๋๋กญ ๊ธฐ๋ฅ์ ๊ตฌํํ๊ณ ์ ๊ทผ์ฑ์ ํฅ์์ํด
- Relationship ์์ฑ - ์น ํ์ด์ง์ ์์๋ค ๊ฐ์ ๊ด๊ณ๋ฅผ ์ ์ํ๊ณ ์๋ฏธ๋ฅผ ๋ช ํํ๊ฒ ์ ๋ฌํจ
aria-haspopup - ํด๋น ์์์ ์ฐ๊ฒฐ๋ ํ์ ์ฐฝ์ด๋ ๋ฉ๋ด๊ฐ ์๋์ง ์ฌ๋ถ ๋ํ๋
- true - ์์์ ์ฐ๊ฒฐ๋ ํ์ ์ด ์์
- false - ์์์ ์ฐ๊ฒฐ๋ ํ์ ์ด ์์(๊ธฐ๋ณธ๊ฐ)
aria-controls - ํ์ฌ ์์๊ฐ ์ ์ดํ๋ ์์(๋ค)์ ์๋ณํจ
- ex. ํญ ํจ๋์ ์ ์ดํ๋ ํญ๊ณผ ๊ฐ์ด ๋ค๋ฅธ ์์๋ฅผ ์ ์ดํ๋ ์์์ ์ฌ์ฉ๋จ
- ํ์ฌ ์์๊ฐ ์ ์ดํ๋ ์์์ ID ๋ชฉ๋ก์ ๊ณต๋ฐฑ์ผ๋ก ๊ตฌ๋ถํจ
aria-expended - ํ์ฅํ๊ฑฐ๋ ์ถ์ํ ์ ์๋ ์์์ ํ์ฌ ํ์ฅ ์ํ๋ฅผ ๋ํ๋
- ex. ์์ฝ๋์ธ, ๋ฉ๋ด, ํธ๋ฆฌ๋ทฐ ๊ฐ์ด ์ด๊ฑฐ๋ ๋ซ์ ์ ์๋ ์์์ ์ฌ์ฉ๋จ
- true - ์์๊ฐ ํ์ฌ ํ์ฅ๋์ด ์์
- false - ์์๊ฐ ํ์ฌ ์ถ์๋์ด ์์(๊ธฐ๋ณธ๊ฐ)
aria-pressed - ํ ๊ธ ๋ฒํผ์ด ํ์ฌ ํ์ฑํ ๋์ด ์๋์ง ์ฌ๋ถ
- true - ์์๊ฐ ํ์ฌ ๋๋ ค ์๊ฑฐ๋ ํ์ฑํ๋์ด ์์
- false - ์์๊ฐ ํ์ฌ ๋๋ฆฌ์ง ์๊ฑฐ๋ ๋นํ์ฑํ๋์ด ์์(๊ธฐ๋ณธ๊ฐ)
aria-label - ์์์ ๊ธฐ๋ฅ์ด๋ ์ฉ๋์ ๋ํ ํ ์คํธ ์ค๋ช ์ ์ ๊ณต
- ์์์ ์๊ฐ์ ํํ๋ง์ผ๋ก๋ ์๋ฏธ๊ฐ ๋ช ํํ๊ฒ ์ ๋ฌ๋์ง ์๋ ๊ฒฝ์ฐ ์ฌ์ฉ
aria-labelledby - ํ์ฌ ์์์ ์ค๋ช ์ ์ ๊ณตํ๋ ๋ค๋ฅธ ์์๋ฅผ ์ฐธ์กฐ
- aria-label๊ณผ ์ ์ฌํ์ง๋ง ์ค๋ช ์ ์ํด ๊ธฐ์กด ์ฝํ ์ธ (์ ๋ชฉ, ๋จ๋ฝ)๋ฅผ ์ฐธ์กฐ
aria-describedby - ํ์ฌ ์์์ ๋ํ ์ถ๊ฐ ์ค๋ช ํ ์คํธ๋ฅผ ์ ๊ณตํ๋ ํ๋ ์ด์์ ์์๋ฅผ ์ฐธ์กฐ
- aria-label ๋๋ aria-labelledby ์ธ์ ์์์ ๋ํ ์ถ๊ฐ ์ค๋ช ์ด ํ์ํ ๊ฒฝ์ฐ ์ฌ์ฉ
'HTML & CSS' ์นดํ ๊ณ ๋ฆฌ์ ๋ค๋ฅธ ๊ธ
| Pre Built-in๊ณผ Utility-first (0) | 2024.05.22 |
|---|---|
| [Sass] Sass - ์ฃผ์, ๋ณ์, ์ค์ฒฉ ๊ท์น, ๋ฏน์ค์ธ, ์ธ์ (0) | 2024.05.20 |
| [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 |