๐ฐ HTML/CSS๋ฅผ ํ์ฉํ ํ ํ๋ก์ ํธ
html ๊ณผ css๋ฅผ ์ด์ฉํด์ ์นด์นด์ค๋ฑ
ํฌ๋ฅผ ํด๋ก ์ฝ๋ฉํ๋ ํ ํ๋ก์ ํธ๋ฅผ ์งํํ๋ค. ํ์ง๋ง ๋๊ฐ์ด ๋ง๋ค์ด๋ด๋๊ฑด ์๋ฏธ๊ฐ ์๋ค๊ณ ์๊ฐํ๊ณ , ๋ผ์ดํธํ์ฐ์ค ์ ์๋ฅผ ๊ธฐ์ค์ผ๋ก ๋ ๊ฐ์ ์ ํ๋ ๊ฒ์ ์ค์ ์ ๋์๋ค.
์นด์นด์ค๋ฑ ํฌ ์นํ์ด์ง์ ์ ์๊ฐ ๋ค๋ฅธ ๋๊ธฐ์ ๋ค์ ๋นํด ๋ฎ์์๋ค.
๋๋ฌธ์ ์ฐ๋ฆฌ ํ์ด ๊ฐ์ ํ ์ฌ์ง๊ฐ ์๋ค๊ณ ์๊ฐํ๋ค.
์นด์นด์ค๋ฑ ํฌ์ ์ปจ์คํ ์ ํ๋ค๊ณ ์๊ฐํ๋ค. ์นด์นด์ค๋ผ๊ณ ํด์ ๋ชจ๋ ๊ฒ ์๋ฒฝํ๊ฒ ๋์ด์์ ๊ฒ์ด๋ผ ์๊ฐํ์ง ์์๋ค.
ํฌ๊ฒ ์ ๊ทผ์ฑ, ๋งํฌ์ , ์ฑ๋ฅ ์ธ ๊ฐ์ง ๋ถ๋ถ์์ ๊ณ ์น ๋ถ๋ถ์ ์ฐพ์๊ณ , ํด๊ฒฐ ๋ฐฉ๋ฒ์ ์ฐพ์๋๋ค.
์ ๊ทผ์ฑ ๋ด๋น, ๋งํฌ์ ๋ด๋น, ์ฑ๋ฅ ๋ด๋น ์ธ ๋ช ์ผ๋ก ๊ตฌ์ฑํ๋ค. ํด๋น ๋ถ๋ถ์ ์ฑ ์์ง๊ณ ๊ฐ์ ํ๊ธฐ๋ก ํ๊ณ , ๊ฐ์๋ ํ์ด์ง๋ฅผ (ํค๋, ํธํฐ), ์ํ์ค๋ช ํ์ด์ง, ์ด๋ฒคํธ ํ์ด์ง๋ก ๋๋์ด ์์ ํ๋ค.
์์ ๊ฐ์ ๋ฌธ์ ๊ฐ ์์๊ณ , ํด๋น ๋ฌธ์ ๋ค์ KWCAG ์ง์นจ์์ ์ฐพ์๋ณด์์ ๋๋ ์๋์ ๊ฐ์ด ์ ๋ฆฌํ ์ ์์๋ค.
-
๊ตฌ์ฒด์ ์ด์ง ์์ ๋์ฒด ํ ์คํธ
-
์ปจํ ์ธ ๊ฐ์ ๋ช ๋/์ฑ๋ ๋๋น ๋ถ์กฑ
-
๋ฉ๊ฐ๋ฉ๋ด์ ํค๋ณด๋ ์ ๊ทผ์ฑ ๋ถ์กฑ
-
ํญ ์์๋ผ์ธ์ ๋น์ ์์ ์ถ๋ ฅ
-
๋ฉ๋ด์ depth๊ฐ ๋๋ฌด ๊น์
-
๋์์ธ์ ์ํ ๊ณผ๋ํ ํ๊ทธ ์ฌ์ฉ
-
์๋ชป๋ WAI-ARIA ์ฌ์ฉ
-
๋ชจ๋ฐ์ผ ํ์ด์ง์์ ์คํ๋ผ์ดํธ ์ด๋ฏธ์ง ๋ฏธ์ฌ์ฉ
-
ํ์ด์ง์์ ์ฌ์ฉํ์ง ์๋ ์ด๋ฏธ์ง ๋ก๋ฉ
-
๋นํจ์จ์ ์ธ js ํ์ผ ์์ฒญ ๋ฐฉ์
๋ค๋น๊ฒ์ด์ ํญ์ ์ํฐ๋ก ์ด ์ ์์ด, ๋ค์ ํญ์ผ๋ก ์ด๋ํ ๋ ๋ง์ ์์ ํญ์ ๋๋ฌ์ผ ์ด๋ํ ์ ์์. ํ์ํ ๋ถ๋ถ์์ ์ํฐ๋ฅผ ์ด์ฉํด ์ ๊ทผํ๋๋ก ๊ตฌํ
- ์นด์นด์ค๋ฑ ํฌ์ ๋ฉ๋ด๋ depth3๊น์ง ๋ค์ด๊ฐ๋ฏ๋ก ๋ฉ๊ฐ ๋ฉ๋ด๋ฅผ ์ ์ฉํด๋ด
- depth2 ๋ฉ๋ด์ ์ด๋ค ์๋งจํฑํ ํ๊ทธ๋ฅผ ์ฌ์ฉํ๋ฉด ์ข์์ง ๊ณ ๋ฏผ
- depth๊ฐ ๊น์ด์ง๋๋ผ๋ ๊ธฐ๋ณธ ์๋งจํฑํ ํ๊ทธ๋ฅผ ์ฌ์ฉํ๋ ๊ฒ ์ข๋ค๋ ๊ฒฐ๋ก ์ ๋ด๋ฆผ. ๋ฐ๋ผ์ ul-li-a ๋ก ๋ฆฌ์คํธ์ ๋งํฌ ์ ๋ณด๋ฅผ ๋ชจ๋ ์ ๊ณต
- aria์ property์ state๋ฅผ ํตํด ์ถ๊ฐ ์ ๋ณด ์ ๊ณต
- ์ถํ js๋ฅผ ์ด์ฉํด ํค๋ณด๋ ์ธํฐ๋ ์ ์ ๊ตฌํํ ์ ์๋ค๋ฉด ๋ ์ข์ ์ ๊ทผ์ฑ์ ๋ง๋ค์ด๋ผ ์ ์์ ๊ฒ.
์นด์นด์ค๋ฑ
ํฌ ํ์ด์ง ์ ์ฒด์ ์ผ๋ก ๊ตต์ ๊ธ์๋ฅผ ํ์ํ๊ธฐ ์ํด strong
ํ๊ทธ๋ฅผ ์ฌ์ฉํจ
strong ํ๊ทธ๋ ๋ด์ฉ์ ๊ฐ์กฐํ๋ ์๋ฏธ๋ก, ๋จ์ง ๊ตต์ ๊ธ์ ์คํ์ผ์ ์ํ ์ฌ์ฉ์ ์๋งจํฑํ ํ๊ทธ ์ฌ์ฉ์ด๋ผ๊ณ ๋ณด๊ธฐ ์ด๋ ค์
์์ ๊ฒฝ์ฐ, ๊ธฐ๋ณธ ๊ธ๋ฆฌ
๋ ์ฐ 0.1%
๋ผ๋ key-value ๊ฐ์ผ๋ก ๋ณผ ์ ์์ผ๋ฏ๋ก dl-dt-dd ํ๊ทธ๋ฅผ ์ ์ฉ
wai-aria practice์ ๋ฉ๋ด, ํญ, ์์ฝ๋์ธ UI ์์ ์ฐธ๊ณ ํ์ฌ ์ ์ฉ
๋ชจ๋ ์ด๋ฏธ์ง๋ฅผ ๊ฐ๋ณ์ ์ผ๋ก ์์ฒญํ๊ณ ์์๋ค. ์ด๋ฅผ ์คํ๋ผ์ดํธ ์ด๋ฏธ์ง๋ก ๋ง๋ค์ด์ ๋ ํจ์จ์ ์ธ ์์ฒญ์ ํ๋๋ก ๋ง๋ค์ด ์ฃผ์๋ค.
์ด ํ์ด์ง์์๋ ์์ ์ด๋ฏธ์ง์ ๋นจ๊ฐ ๋ฐ์ค ์ณ์ง ์ด๋ฏธ์ง ๋ง์ ์ฌ์ฉํ๊ณ ์์๋๋ฐ๋ ๋ถ๊ตฌํ๊ณ ๋ค๋ฅธ ์ด๋ฏธ์ง๊น์ง ์คํ๋ผ์ดํธ ์ด๋ฏธ์ง์ ํฌํจ๋์ด์์๋ค. ์ฌ์ฉํ์ง ์๋ ์ด๋ฏธ์ง๋ฅผ ์ ๊ฑฐํ๊ณ ์คํ๋ผ์ดํธ ์ด๋ฏธ์ง๋ฅผ ๋ง๋ค์ด ๋ ํจ์จ์ ์ธ ์์ฒญ์ ํ๋๋ก ๋ง๋ค์๋ค.
์์ ์ด๋ฏธ์ง๋ฅผ ๋ณด๋ฉด ์๋ฐ์คํฌ๋ฆฝํธ ํ์ผ์ html ํ์ฑ ๋์ค์ ๋ถ๋ฌ์ค๊ฑฐ๋ html ํ์ฑ์ด ๋๋๊ณ ๋ถ๋ฌ์ค๊ณ ์์๋ค. ์ด๋ ์๋ฐ์คํฌ๋ฆฝํธ ํ์ผ์์ DOM ์ ์ ๊ทผํ ๋ ํ์ฑ์ด ๋๋์ง ์์๋๋ฐ ์ ๊ทผํ๋ ์ํฉ์ ๋ง๊ธฐ ์ํด์ ๊ฐ์ ์ ์ผ๋ก ๋๊ธฐํ ์ํค๊ณ ์๋ ๊ฒ์ด๋ค. ์ด๋ ๊ฒ ๋๋ฉด html ํ์ผ์ ํ์ฑ ๋์ค์ ํ์ฑ์ ๋ง๊ณ ์๋ฐ์คํฌ๋ฆฝํธ๋ฅผ ๋ถ๋ฌ์ค๊ฒ ๋๋๋ฐ, ์ด๋ ์ฑ๋ฅ ์ ํ๋ฅผ ์ผ๊ธฐํ๋ค. ๋๋ฌธ์ ํด๋น ์๋ฐ์คํฌ๋ฆฝํธ๋ฅผ ๋ชจ๋ ํค๋ ๋ถ๋ถ์ผ๋ก ์ฎ๊ธฐ๊ณ , ์๋ฐ์คํฌ๋ฆฝํธ ์ด๋ฒคํธ ํธ๋ค๋ฌ ์คํ์ ๋ ์ปจํ ์ธ ๊ฐ ๋ชจ๋ ๋ก๋๋์ด์์ ๋ ์คํํ๋๋ก ์ค์ ํ์๋ค. ์ด๋ ๊ฒ ํ๋ฉด ํ์ผ ํธ์ถ์ ๋น๋๊ธฐ์ ์ผ๋ก ์คํํ ์ ์๊ณ , ์๋ ๋์ ์ ๊ทผํ๋ ์ค๋ฅ ์ํฉ๋ ๋ง์ ์ ์๋ค.