ํค๋ณด๋ ํ์์ ํ์ ํ์ฉํด ๋ณด์ธ์! ์ด ์ข ํฉ ๊ฐ์ด๋๋ ์ ์ธ๊ณ ๊ฐ๋ฐ์์ ์ฌ์ฉ์๋ฅผ ์ํ ํฌ์ปค์ค ๊ด๋ฆฌ ๊ธฐ์ , ์ ๊ทผ์ฑ ๋ชจ๋ฒ ์ฌ๋ก, ๊ณ ๊ธ ํ์ ๋ค๋ฃน๋๋ค.
ํค๋ณด๋ ํ์: ์ ๊ทผ์ฑ ๋ฐ ํจ์จ์ฑ์ ์ํ ํฌ์ปค์ค ๊ด๋ฆฌ ๋ง์คํฐํ๊ธฐ
์น์ฌ์ดํธ์ ์ ํ๋ฆฌ์ผ์ด์ ์ด ์ ์ ๋ ๋ณต์กํด์ง๋ ์ค๋๋ ์ ๋์งํธ ์ธ์์์, ๋์์ ์ธ ํ์ ๋ฐฉ๋ฒ์ ์ ๊ณตํ๋ ๊ฒ์ ๋งค์ฐ ์ค์ํฉ๋๋ค. ๋ง์ ์ฌ์ฉ์๊ฐ ๋ง์ฐ์ค๋ ํฐ์นํจ๋์ ์์กดํ์ง๋ง, ํค๋ณด๋ ํ์์ ์ฝํ ์ธ ์ ์ํธ์์ฉํ๋ ๊ฐ๋ ฅํ๋ฉด์๋ ์ข ์ข ๊ฐ๊ณผ๋๋ ๋ฐฉ๋ฒ์ ์ ๊ณตํฉ๋๋ค. ์ด ๊ฐ์ด๋๋ ํค๋ณด๋ ํ์์ ์ค์์ฑ์ ๊น์ด ํ๊ณ ๋ค๋ฉฐ, ํฌ์ปค์ค ๊ด๋ฆฌ๋ผ๋ ํต์ฌ ๊ฐ๋ ์ ์ค์ ์ ๋ก๋๋ค. ์ฐ๋ฆฌ๋ ๊ฐ๋ฐ์์ ์ฌ์ฉ์๊ฐ ๋ฅ๋ ฅ์ด๋ ์ ํธํ๋ ์ํธ์์ฉ ๋ฐฉ์์ ๊ด๊ณ์์ด ๋ชจ๋์๊ฒ ์ ๊ทผ ๊ฐ๋ฅํ๊ณ ํจ์จ์ ์ธ ๊ฒฝํ์ ๋ณด์ฅํ๊ธฐ ์ํ ๊ธฐ์ , ๋ชจ๋ฒ ์ฌ๋ก ๋ฐ ๊ณ ๊ธ ํ์ ํ์ํ ๊ฒ์ ๋๋ค.
ํค๋ณด๋ ํ์์ด ์ค์ํ ์ด์
ํค๋ณด๋ ํ์์ ๋จ์ํ ๋ง์ฐ์ค ์ฌ์ฉ์๋ฅผ ์ํ ๋์ฒด ์๋จ์ด ์๋๋๋ค. ์ด๊ฒ์ ์ ๊ทผ์ฑ๊ณผ ์ฌ์ฉ์ฑ์ ๊ทผ๋ณธ์ ์ธ ์ธก๋ฉด์ ๋๋ค. ํค๋ณด๋ ํ์์ด ์ค์ํ ์ด์ ๋ ๋ค์๊ณผ ๊ฐ์ต๋๋ค:
- ์ ๊ทผ์ฑ: ์ด๋ ์ฅ์ , ์๊ฐ ์ฅ์ ๋๋ ์ธ์ง ์ฅ์ ๊ฐ ์๋ ๊ฐ์ธ์ ํค๋ณด๋๋ ํค๋ณด๋ ์ ๋ ฅ์ ์๋ฎฌ๋ ์ดํธํ๋ ๋ณด์กฐ ๊ธฐ์ ์ ์ ์ ์ผ๋ก ์์กดํ ์ ์์ต๋๋ค. ์ ์ ํ ํค๋ณด๋ ํ์์ ์ด๋ฌํ ์ฌ์ฉ์๊ฐ ๋์งํธ ์ฝํ ์ธ ์ ์ ๊ทผํ๊ณ ์ํธ์์ฉํ๋ ๋ฐ ํ์์ ์ ๋๋ค. ์๋ฅผ ๋ค์ด, ์คํฌ๋ฆฐ ๋ฆฌ๋ ์ฌ์ฉ์๋ ์ฃผ๋ก ํค๋ณด๋๋ฅผ ์ฌ์ฉํ์ฌ ์น์ฌ์ดํธ๋ฅผ ํ์ํฉ๋๋ค.
- ํจ์จ์ฑ: ํ์ ์ ์ ๋ค์ ์ข ์ข ๋ฐ๋ณต์ ์ธ ์์ , ํนํ IDE์์ ํค๋ณด๋ ๋จ์ถํค๋ฅผ ์ฌ์ฉํ๋ ์ํํธ์จ์ด ๊ฐ๋ฐ์๋ ์์์ ๋น ๋ฅด๊ฒ ํ์ํ๋ ๋ฐ์ดํฐ ์ ๋ ฅ ์ ๋ฌธ๊ฐ์ ๊ฒฝ์ฐ, ๋ง์ฐ์ค๋ฅผ ์ฌ์ฉํ๋ ๊ฒ๋ณด๋ค ํค๋ณด๋ ํ์์ด ๋ ๋น ๋ฅด๊ณ ํจ์จ์ ์ด๋ผ๋ ๊ฒ์ ๋ฐ๊ฒฌํฉ๋๋ค.
- ๋ณด์กฐ ๊ธฐ์ ํธํ์ฑ: ์คํฌ๋ฆฐ ๋ฆฌ๋, ์์ฑ ์ธ์ ์ํํธ์จ์ด, ์ค์์น ์ฅ์น์ ๊ฐ์ ๋ง์ ๋ณด์กฐ ๊ธฐ์ ์ ์ ํ๋ฆฌ์ผ์ด์ ๊ณผ ์ํธ์์ฉํ๊ธฐ ์ํด ํค๋ณด๋ ์ ๋ ฅ์ ์์กดํฉ๋๋ค. ์ ์ ์๋ ํค๋ณด๋ ํ์ ๊ฒฝํ์ ์ ๊ณตํ๋ฉด ์ด๋ฌํ ๋๊ตฌ์์ ํธํ์ฑ์ ๋ณด์ฅํ ์ ์์ต๋๋ค.
- ๋ถ๋ด ๊ฐ์: ์ผ๋ถ ์ฌ์ฉ์๋ ์ฅ์๊ฐ ๋ง์ฐ์ค๋ฅผ ์ฌ์ฉํ ๋ ๋ถํธํจ์ด๋ ํต์ฆ์ ๊ฒฝํํฉ๋๋ค. ํค๋ณด๋ ํ์์ ๋ ํธ์ํ๊ณ ์ธ์ฒด๊ณตํ์ ์ธ ๋์์ ์ ๊ณตํ ์ ์์ต๋๋ค.
- ์ ๋๋ฒ์ค ๋์์ธ: ํค๋ณด๋ ํ์์ ๊ณ ๋ คํ์ฌ ์ค๊ณํ๋ฉด ๋ฅ๋ ฅ์ ๊ด๊ณ์์ด ๋ชจ๋ ์ฌ์ฉ์๋ฅผ ์ํด ์น์ฌ์ดํธ๋ ์ ํ๋ฆฌ์ผ์ด์ ์ ์ ๋ฐ์ ์ธ ์ฌ์ฉ์ฑ์ ๋ณธ์ง์ ์ผ๋ก ํฅ์์ํต๋๋ค. ์ด๋ ๊ฐ๋ฐ์๊ฐ ์ฝํ ์ธ ์ ๋ ผ๋ฆฌ์ ํ๋ฆ๊ณผ ๊ตฌ์กฐ๋ฅผ ๊ณ ๋ คํ๋๋ก ๋ง๋ญ๋๋ค.
ํฌ์ปค์ค ๊ด๋ฆฌ ์ดํดํ๊ธฐ
ํฌ์ปค์ค ๊ด๋ฆฌ๋ ํค๋ณด๋ ํฌ์ปค์ค(์ผ๋ฐ์ ์ผ๋ก ์๊ฐ์ ์ธ ํฌ์ปค์ค ๋ง์ผ๋ก ํ์๋จ)๊ฐ ์น ํ์ด์ง๋ ์ ํ๋ฆฌ์ผ์ด์ ์ ์ํธ์์ฉ ๊ฐ๋ฅํ ์์๋ฅผ ํตํด ์ด๋ํ๋ ๋ฐฉ์์ ๋งํฉ๋๋ค. ์ ๊ด๋ฆฌ๋ ํฌ์ปค์ค ์์๋ ๋ ผ๋ฆฌ์ ์ด๊ณ ์์ธก ๊ฐ๋ฅํ๋ฉฐ ์ง๊ด์ ์ด์ด์ ์ฌ์ฉ์๊ฐ ์ฝ๊ฒ ์ฝํ ์ธ ๋ฅผ ํ์ํ๊ณ ์ํธ์์ฉํ ์ ์๋๋ก ํด์ผ ํฉ๋๋ค. ์๋ชป๋ ํฌ์ปค์ค ๊ด๋ฆฌ๋ ์ข์ ๊ฐ, ํผ๋์ ์ ๋ฐํ๊ณ ์ผ๋ถ ๊ฐ์ธ์๊ฒ๋ ์น์ฌ์ดํธ๋ฅผ ์ฌ์ฉํ ์ ์๊ฒ ๋ง๋ค ์๋ ์์ต๋๋ค.
ํต์ฌ ๊ฐ๋ :
- ํฌ์ปค์ค ์์: ์ฌ์ฉ์๊ฐ Tab ํค๋ฅผ ๋๋ฅผ ๋ ์์๊ฐ ํฌ์ปค์ค๋ฅผ ๋ฐ๋ ์์์ ๋๋ค. ๊ธฐ๋ณธ ํฌ์ปค์ค ์์๋ ์ผ๋ฐ์ ์ผ๋ก ์์ค ์์(HTML ์ฝ๋์์ ์์๊ฐ ์ ์๋ ์์)๋ฅผ ๋ฐ๋ฆ ๋๋ค.
- ํฌ์ปค์ค ๋ง: ํ์ฌ ํฌ์ปค์ค๋ฅผ ๋ฐ์ ์์๋ฅผ ๊ฐ์กฐํ๋ ์๊ฐ์ ํ์๊ธฐ(์ผ๋ฐ์ ์ผ๋ก ํ ๋๋ฆฌ๋ ์ธ๊ณฝ์ )์ ๋๋ค. ์ด๋ ์ฌ์ฉ์๊ฐ ์์ ์ ํค๋ณด๋ ์ ๋ ฅ์ด ์ด๋๋ก ํฅํ ์ง ์ดํดํ๋ ๋ฐ ๋์์ด ๋ฉ๋๋ค. ํฌ์ปค์ค ๋ง์ ์คํ์ผ๊ณผ ๋ชจ์์ ์ข ์ข CSS๋ฅผ ์ฌ์ฉํ์ฌ ์ฌ์ฉ์ ์ ์ํ ์ ์์ต๋๋ค.
- ํญ ์ธ๋ฑ์ค: ๊ฐ๋ฐ์๊ฐ ์์์ ํฌ์ปค์ค ์์๋ฅผ ๋ช
์์ ์ผ๋ก ์ ์ดํ ์ ์๊ฒ ํด์ฃผ๋ HTML ์์ฑ(
tabindex)์ ๋๋ค.tabindex๋ฅผ ์๋ชป ์ฌ์ฉํ๋ฉด ํผ๋์ค๋ฝ๊ณ ๋ฐฉํฅ ๊ฐ๊ฐ์ ์๊ฒ ํ๋ ๊ฒฝํ์ ๋ง๋ค ์ ์์ต๋๋ค. - ํฌ์ปค์ค ๊ฐ๋ฅ ์์: ๋งํฌ(
<a>), ๋ฒํผ(<button>), ์์ ํ๋(<input>,<textarea>,<select>) ๋ฐtabindex์์ฑ์ด ์๋ ์์์ ๊ฐ์ด ํค๋ณด๋ ํฌ์ปค์ค๋ฅผ ๋ฐ์ ์ ์๋ ์์์ ๋๋ค.
ํค๋ณด๋ ํ์ ๊ตฌํ์ ์ํ ๋ชจ๋ฒ ์ฌ๋ก
ํจ๊ณผ์ ์ธ ํค๋ณด๋ ํ์์ ๊ตฌํํ๋ ค๋ฉด ์ ์คํ ๊ณํ๊ณผ ์ธ๋ถ ์ฌํญ์ ๋ํ ์ฃผ์๊ฐ ํ์ํฉ๋๋ค. ๋ค์์ ๋ฐ๋ผ์ผ ํ ๋ช ๊ฐ์ง ๋ชจ๋ฒ ์ฌ๋ก์ ๋๋ค:
1. ๋ ผ๋ฆฌ์ ์ธ ํฌ์ปค์ค ์์
ํฌ์ปค์ค ์์๋ ์ผ๋ฐ์ ์ผ๋ก ํ์ด์ง์ ์๊ฐ์ ํ๋ฆ์ ๋ฐ๋ผ์ผ ํฉ๋๋ค. ์ฌ์ฉ์๋ ์ผ๋ฐ์ ์ผ๋ก ์ผ์ชฝ์์ ์ค๋ฅธ์ชฝ, ์์์ ์๋๋ก ๋ ผ๋ฆฌ์ ์ด๊ณ ์์ธก ๊ฐ๋ฅํ ๋ฐฉ์์ผ๋ก ์์๋ฅผ ํ์ํ ์ ์์ด์ผ ํฉ๋๋ค. ์ด๋ ์ฌ์ฉ์๊ฐ ์ฝํ ์ธ ๋ฅผ ์ฝ๊ฒ ๋ฐ๋ผ๊ฐ๊ณ ์๋ํ ์์๋๋ก ์์์ ์ํธ์์ฉํ ์ ์๋๋ก ๋ณด์ฅํฉ๋๋ค. ์ฝํ ์ธ ์ ์ธ์ด ๋ฐฉํฅ์ ๊ณ ๋ คํ์ญ์์ค. ์ค๋ฅธ์ชฝ์์ ์ผ์ชฝ์ผ๋ก ์ฐ๋ ์ธ์ด(์: ์๋์ด, ํ๋ธ๋ฆฌ์ด)์ ๊ฒฝ์ฐ ํฌ์ปค์ค ์์๋ ๊ทธ์ ๋ฐ๋ผ ํ๋ฌ์ผ ํฉ๋๋ค.
2. ๋์ ์ ๋๋ ํฌ์ปค์ค ํ์๊ธฐ
ํฌ์ปค์ค ๋ง์ด ์ฃผ๋ณ ์์์ ๋ช ํํ๊ฒ ๋ณด์ด๊ณ ๊ตฌ๋ณ๋ ์ ์๋๋ก ํ์ญ์์ค. ํฌ์ปค์ค ํ์๊ธฐ๋ ์ ์๋ ฅ์ด๋ ์ธ์ง ์ฅ์ ๊ฐ ์๋ ์ฌ์ฉ์๊ฐ ์ฝ๊ฒ ๋ณผ ์ ์๋๋ก ์ถฉ๋ถํ ๋๋น์ ํฌ๊ธฐ๋ฅผ ๊ฐ์ ธ์ผ ํฉ๋๋ค. ํฌ์ปค์ค ๋ง์ ์์ ํ ์ ๊ฑฐํ์ง ๋ง์ญ์์ค. ๊ทธ๋ ๊ฒ ํ๋ฉด ํค๋ณด๋ ์ฌ์ฉ์๊ฐ ํ์ฌ ์ด๋ค ์์์ ํฌ์ปค์ค๊ฐ ์๋์ง ํ์ธํ๋ ๊ฒ์ด ๋ถ๊ฐ๋ฅํด์ง ์ ์์ต๋๋ค. ์น์ฌ์ดํธ ๋์์ธ์ ๋ง๊ฒ CSS๋ฅผ ์ฌ์ฉํ์ฌ ํฌ์ปค์ค ๋ง์ ์ฌ์ฉ์ ์ ์ํ๋, ํญ์ ์๊ฐ์ ์ผ๋ก ๋์ ๋๊ฒ ์ ์งํด์ผ ํฉ๋๋ค.
์์ (CSS):
button:focus {
outline: 2px solid blue; /* ๊ฐ๋จํ๊ณ ๋์ ์ ๋๋ ํฌ์ปค์ค ํ์๊ธฐ */
}
3. ํจ๊ณผ์ ์ธ Tabindex ์ฌ์ฉ
tabindex ์์ฑ์ ์์์ ํฌ์ปค์ค ์์๋ฅผ ์ ์ดํ๋ ๋ฐ ์ฌ์ฉํ ์ ์์ง๋ง ์ ์คํ๊ฒ ์ฌ์ฉํด์ผ ํฉ๋๋ค. ๋ค์์ ํจ๊ณผ์ ์ผ๋ก ์ฌ์ฉํ๋ ๋ฐฉ๋ฒ์
๋๋ค:
tabindex="0": ์์๋ฅผ ์์ฐ์ค๋ฌ์ด ํญ ์์(์์ค ์์๋ฅผ ๋ฐ๋ฆ)์์ ํฌ์ปค์ค ๊ฐ๋ฅํ๊ฒ ๋ง๋ญ๋๋ค. ๋ณธ์ง์ ์ผ๋ก ์ํธ์์ฉ ๊ฐ๋ฅํ์ง๋ง ๊ธฐ๋ณธ์ ์ผ๋ก ํฌ์ปค์ค ๊ฐ๋ฅํ์ง ์์ ์ ์๋ ์์(์: ์ฌ์ฉ์ ์ง์ ๋ฒํผ์ผ๋ก ์ฌ์ฉ๋๋<div>)์ ์ฌ์ฉํฉ๋๋ค.tabindex="-1": ์์๋ฅผ ํ๋ก๊ทธ๋๋ฐ ๋ฐฉ์(JavaScript ์ฌ์ฉ)์ผ๋ก๋ง ํฌ์ปค์ค ๊ฐ๋ฅํ๊ฒ ๋ง๋ญ๋๋ค. ์ด๋ ์ฌ์ฉ์๊ฐ ํฌ์ปค์คํด์๋ ์ ๋์ง๋ง ์คํฌ๋ฆฝํธ์ ์ํด ํฌ์ปค์ค๋ ํ์๊ฐ ์๋ ์์์ ์ ์ฉํฉ๋๋ค.- 0๋ณด๋ค ํฐ
tabindex๊ฐ ํผํ๊ธฐ: ์์tabindex๊ฐ์ ์ฌ์ฉํ๋ฉด ์์ฐ์ค๋ฌ์ด ํญ ์์๋ฅผ ๋ฐฉํดํ๊ณ ํผ๋์ค๋ฝ๊ณ ์์ธกํ ์ ์๋ ๊ฒฝํ์ ๋ง๋ค ์ ์์ต๋๋ค. ์ฌ์ฉ์๊ฐ ๋ ผ๋ฆฌ์ ์ธ ๋ฐฉ์์ผ๋ก ํ์ด์ง๋ฅผ ํ์ํ๊ธฐ ์ด๋ ต๊ฒ ๋ง๋ญ๋๋ค.
์์:
<div role="button" tabindex="0" onclick="myFunction()">์ฌ์ฉ์ ์ง์ ๋ฒํผ</div>
4. ๋์ ์ฝํ ์ธ ์์ ํฌ์ปค์ค ๊ด๋ฆฌ
ํ์ด์ง์์ ๋์ ์ฝํ ์ธ ๊ฐ ์ถ๊ฐ๋๊ฑฐ๋ ์ ๊ฑฐ๋ ๋(์: JavaScript๋ฅผ ์ฌ์ฉํ์ฌ ๋ชจ๋ฌ ๋ํ ์์๋ฅผ ํ์ํ๊ฑฐ๋ ๋ชฉ๋ก์ ์ ๋ฐ์ดํธํ ๋) ํฌ์ปค์ค๋ฅผ ์ ์ ํ๊ฒ ๊ด๋ฆฌํ๋ ๊ฒ์ด ์ค์ํฉ๋๋ค. ์๋ฅผ ๋ค์ด, ๋ชจ๋ฌ ๋ํ ์์๊ฐ ์ด๋ฆฌ๋ฉด ํฌ์ปค์ค๋ ๋ํ ์์ ๋ด์ ์ฒซ ๋ฒ์งธ ํฌ์ปค์ค ๊ฐ๋ฅ ์์๋ก ์ด๋ํด์ผ ํฉ๋๋ค. ๋ํ ์์๊ฐ ๋ซํ๋ฉด ํฌ์ปค์ค๋ ๋ํ ์์๋ฅผ ํธ๋ฆฌ๊ฑฐํ ์์๋ก ๋ค์ ๋์์์ผ ํฉ๋๋ค.
์์ (JavaScript):
const modal = document.getElementById('myModal');
const openModalButton = document.getElementById('openModal');
const closeModalButton = document.getElementById('closeModal');
openModalButton.addEventListener('click', () => {
modal.style.display = 'block';
closeModalButton.focus(); // ํฌ์ปค์ค๋ฅผ ๋ชจ๋ฌ์ ๋ซ๊ธฐ ๋ฒํผ์ผ๋ก ์ด๋
});
closeModalButton.addEventListener('click', () => {
modal.style.display = 'none';
openModalButton.focus(); // ๋ชจ๋ฌ์ ์ฐ ๋ฒํผ์ผ๋ก ํฌ์ปค์ค ๋ฐํ
});
5. ๊ฑด๋๋ฐ๊ธฐ ๋งํฌ
์ฌ์ฉ์๊ฐ ์ฃผ ํ์ ๋ฉ๋ด๋ฅผ ๊ฑด๋๋ฐ๊ณ ์ฃผ ์ฝํ ์ธ ๋ก ๋ฐ๋ก ์ด๋ํ ์ ์๋๋ก ํ์ด์ง ์๋จ์ "๊ฑด๋๋ฐ๊ธฐ ๋งํฌ"๋ฅผ ์ ๊ณตํ์ญ์์ค. ์ด๋ ์คํฌ๋ฆฐ ๋ฆฌ๋๋ ํค๋ณด๋๋ฅผ ์ฌ์ฉํ์ฌ ํ์ํ๋ ์ฌ์ฉ์์๊ฒ ํนํ ์ ์ฉํฉ๋๋ค. ๋ชจ๋ ํ์ด์ง์์ ๊ธด ํ์ ๋งํฌ ๋ชฉ๋ก์ ํญ์ผ๋ก ํต๊ณผํ ํ์๊ฐ ์๊ธฐ ๋๋ฌธ์ ๋๋ค.
์์ (HTML):
<a href="#main-content" class="skip-link">์ฃผ ์ฝํ
์ธ ๋ก ๊ฑด๋๋ฐ๊ธฐ</a>
<main id="main-content">...</main>
์์ (CSS - ํฌ์ปค์ค๋ฅผ ๋ฐ๊ธฐ ์ ๊น์ง ๋งํฌ๋ฅผ ์๊ฐ์ ์ผ๋ก ์จ๊น):
.skip-link {
position: absolute;
top: -999px;
left: -999px;
}
.skip-link:focus {
top: 0;
left: 0;
z-index: 1000; /* ๋ค๋ฅธ ์ฝํ
์ธ ์์ ์๋๋ก ๋ณด์ฅ */
}
6. ํค๋ณด๋ ํจ์
ํค๋ณด๋ ํจ์ ์ ์ฌ์ฉ์๊ฐ ํค๋ณด๋๋ฅผ ์ฌ์ฉํ์ฌ ํ์ด์ง์ ํน์ ์์๋ ์์ญ์์ ํฌ์ปค์ค๋ฅผ ์ด๋ํ ์ ์์ ๋ ๋ฐ์ํฉ๋๋ค. ์ด๋ ํนํ ๋ชจ๋ฌ ๋ํ ์์๋ ๋ณต์กํ ์์ ฏ์์ ํํ ์ ๊ทผ์ฑ ๋ฌธ์ ์ ๋๋ค. ์ฌ์ฉ์๊ฐ ํญ์ Tab ํค๋ ๋ค๋ฅธ ์ ์ ํ ํค๋ณด๋ ๋จ์ถํค(์: Esc ํค๋ก ๋ชจ๋ฌ ๋ซ๊ธฐ)๋ฅผ ์ฌ์ฉํ์ฌ ๋ชจ๋ ์ํธ์์ฉ ์์์์ ๋ฒ์ด๋ ์ ์๋๋ก ํด์ผ ํฉ๋๋ค.
7. ARIA ์์ฑ
ARIA(Accessible Rich Internet Applications) ์์ฑ์ ์ฌ์ฉํ์ฌ ํนํ ์ฌ์ฉ์ ์ง์ ์์ ฏ์ด๋ ๋์ ์ฝํ ์ธ ์ ๋ํด ์์์ ๋ํ ์ถ๊ฐ์ ์ธ ์๋ฏธ ์ ๋ณด๋ฅผ ์ ๊ณตํ์ญ์์ค. ARIA ์์ฑ์ ๋ณด์กฐ ๊ธฐ์ ์ด ์์์ ์ญํ , ์ํ ๋ฐ ์์ฑ์ ์ดํดํ๋ ๋ฐ ๋์์ด ๋์ด ํ์ด์ง์ ์ ๋ฐ์ ์ธ ์ ๊ทผ์ฑ์ ํฅ์์ํฌ ์ ์์ต๋๋ค.
์๋ฅผ ๋ค์ด, <div> ์์๋ฅผ ์ฌ์ฉํ์ฌ ์ฌ์ฉ์ ์ง์ ๋ฒํผ์ ๋ง๋๋ ๊ฒฝ์ฐ, role="button" ์์ฑ์ ์ฌ์ฉํ์ฌ ํด๋น ์์๊ฐ ๋ฒํผ์์ ๋ํ๋ผ ์ ์์ต๋๋ค. ๋ํ ARIA ์์ฑ์ ์ฌ์ฉํ์ฌ ๋ฒํผ์ ์ํ๋ฅผ ๋ํ๋ผ ์๋ ์์ต๋๋ค(์: ํ ๊ธ ๋ฒํผ์ ๊ฒฝ์ฐ aria-pressed="true").
8. ํค๋ณด๋ ํ์ ํ ์คํธ
ํค๋ณด๋๋ง ์ฌ์ฉํ์ฌ(๋ง์ฐ์ค ์์ด) ํค๋ณด๋ ํ์์ ์ฒ ์ ํ ํ ์คํธํ์ญ์์ค. ํ์ด์ง์ ๋ชจ๋ ์ํธ์์ฉ ์์๋ฅผ ํ์ํด ๋ณด๊ณ ํฌ์ปค์ค ์์๊ฐ ๋ ผ๋ฆฌ์ ์ธ์ง, ํฌ์ปค์ค ๋ง์ด ๋ณด์ด๋์ง, ํค๋ณด๋ ํจ์ ์ด ์๋์ง ํ์ธํ์ญ์์ค. ๋ํ ํค๋ณด๋ ํ์์ ๋์์ด ๋ค๋ฅผ ์ ์์ผ๋ฏ๋ก ๋ค๋ฅธ ๋ธ๋ผ์ฐ์ ์ ์ด์ ์ฒด์ ์์ ํ ์คํธํ์ญ์์ค. ํธํ์ฑ์ ๋ณด์ฅํ๊ธฐ ์ํด ์คํฌ๋ฆฐ ๋ฆฌ๋์ ๊ฐ์ ๋ณด์กฐ ๊ธฐ์ ๋ก ํ ์คํธํ๋ ๊ฒ์ ๊ณ ๋ คํ์ญ์์ค.
๊ณ ๊ธ ํฌ์ปค์ค ๊ด๋ฆฌ ๊ธฐ์
๊ธฐ๋ณธ์ ์ธ ๋ชจ๋ฒ ์ฌ๋ก ์ธ์๋ ํค๋ณด๋ ํ์ ๊ฒฝํ์ ๋์ฑ ํฅ์์ํฌ ์ ์๋ ๋ช ๊ฐ์ง ๊ณ ๊ธ ๊ธฐ์ ์ด ์์ต๋๋ค:
1. ๋ก๋น ํญ์ธ๋ฑ์ค(roving tabindex)
๋ก๋น ํญ์ธ๋ฑ์ค๋ ๋๊ตฌ ๋ชจ์์ด๋ ๊ทธ๋ฆฌ๋์ ๊ฐ์ ์ฌ์ฉ์ ์ง์ ์์ ฏ์์ ์ฌ์ฉ๋๋ ํจํด์ผ๋ก, ์์ ฏ ๋ด์ ํ ์์๋ง ์ธ์ ๋ ์ง tabindex="0"์ ๊ฐ์ง๋๋ค. ์ฌ์ฉ์๊ฐ ์์ ฏ ๋ด์์ ํ์ํ ๋(์: ํ์ดํ ํค ์ฌ์ฉ), tabindex="0"์ ํ์ฌ ํฌ์ปค์ค๋ ์์๋ก ์ด๋ํ๊ณ ๋ค๋ฅธ ๋ชจ๋ ์์๋ tabindex="-1"์ ๊ฐ์ต๋๋ค. ์ด๋ฅผ ํตํด ์ฌ์ฉ์๋ ํ์ด์ง์ ์ ์ฒด ํญ ์์๋ฅผ ๋ฐฉํดํ์ง ์๊ณ ํ์ดํ ํค๋ฅผ ์ฌ์ฉํ์ฌ ์์ ฏ ๋ด์์ ํ์ํ ์ ์์ต๋๋ค.
์์ (JavaScript - ๋จ์ํ๋จ):
const items = document.querySelectorAll('.toolbar-item');
items[0].tabIndex = 0; // ์ด๊ธฐ ํฌ์ปค์ค ๊ฐ๋ฅ ํญ๋ชฉ
items.forEach(item => {
item.addEventListener('keydown', (event) => {
if (event.key === 'ArrowLeft' || event.key === 'ArrowRight') {
event.preventDefault();
let currentIndex = Array.from(items).indexOf(event.target);
let nextIndex = (event.key === 'ArrowRight') ? currentIndex + 1 : currentIndex - 1;
if (nextIndex >= 0 && nextIndex < items.length) {
items[currentIndex].tabIndex = -1;
items[nextIndex].tabIndex = 0;
items[nextIndex].focus();
}
}
});
});
2. ์ฌ์ฉ์ ์ง์ ํฌ์ปค์ค ์คํ์ผ
๋์ ์ ๋๋ ํฌ์ปค์ค ํ์๊ธฐ๋ฅผ ์ ๊ณตํ๋ ๊ฒ์ด ์ค์ํ์ง๋ง, ๊ธฐ๋ณธ ๋ธ๋ผ์ฐ์ ํฌ์ปค์ค ๋ง์ด ํญ์ ์น์ฌ์ดํธ ๋์์ธ๊ณผ ์ผ์นํ์ง ์์ ์ ์์ต๋๋ค. CSS๋ฅผ ์ฌ์ฉํ์ฌ ํฌ์ปค์ค ๋ง์ ์ฌ์ฉ์ ์ ์ํ ์ ์์ง๋ง, ์ฌ์ฉ์ ์ ์ ํฌ์ปค์ค ์คํ์ผ์ด ์๊ฐ์ ์ผ๋ก ๋์ ๋๊ณ ์ ๊ทผ์ฑ ์๊ตฌ ์ฌํญ์ ์ถฉ์กฑํ๋์ง ํ์ธํ๋ ๊ฒ์ด ์ค์ํฉ๋๋ค. ์๊ฐ์ ์ผ๋ก ๋งค๋ ฅ์ ์ด๋ฉด์๋ ์ ๊ทผ์ฑ์ด ๋์ ํฌ์ปค์ค ์คํ์ผ์ ๋ง๋ค๊ธฐ ์ํด outline, box-shadow, ๋ฐฐ๊ฒฝ์ ๋ณ๊ฒฝ์ ์กฐํฉ์ ์ฌ์ฉํ๋ ๊ฒ์ ๊ณ ๋ คํ์ญ์์ค.
3. ๋ชจ๋ฌ์์์ ํฌ์ปค์ค ํธ๋ํ
๋ชจ๋ฌ ๋ํ ์์ ๋ด์ ๊ฒฌ๊ณ ํ ํฌ์ปค์ค ํธ๋ฉ์ ๋ง๋๋ ๊ฒ์ ์ด๋ ค์ธ ์ ์์ต๋๋ค. ์ผ๋ฐ์ ์ธ ์ ๊ทผ ๋ฐฉ์์ JavaScript๋ฅผ ์ฌ์ฉํ์ฌ ์ฌ์ฉ์๊ฐ ๋ชจ๋ฌ์ ์ฒซ ๋ฒ์งธ ๋๋ ๋ง์ง๋ง ํฌ์ปค์ค ๊ฐ๋ฅ ์์์ ๋๋ฌํ์ ๋๋ฅผ ๊ฐ์งํ ๋ค์ ๋ชจ๋ฌ์ ๋ค๋ฅธ ์ชฝ ๋์ผ๋ก ํฌ์ปค์ค๋ฅผ ๋ค์ ์ด๋์ํค๋ ๊ฒ์ ๋๋ค. ์ด๋ ์ํ ํฌ์ปค์ค ๋ฃจํ๋ฅผ ๋ง๋ค์ด ์ฌ์ฉ์๊ฐ ์ค์๋ก ๋ชจ๋ฌ ๋ฐ์ผ๋ก ํญํ์ง ์๋๋ก ๋ณด์ฅํฉ๋๋ค.
4. JavaScript ๋ผ์ด๋ธ๋ฌ๋ฆฌ ์ฌ์ฉ
๋ช๋ช JavaScript ๋ผ์ด๋ธ๋ฌ๋ฆฌ๋ ํนํ ๋ณต์กํ ์ ํ๋ฆฌ์ผ์ด์ ์์ ํฌ์ปค์ค ๊ด๋ฆฌ๋ฅผ ๋จ์ํํ๋ ๋ฐ ๋์์ด ๋ ์ ์์ต๋๋ค. ์ด๋ฌํ ๋ผ์ด๋ธ๋ฌ๋ฆฌ๋ ํฌ์ปค์ค ์์ ๊ด๋ฆฌ, ๋ชจ๋ฌ์์ ํฌ์ปค์ค ํธ๋ํ, ์ฌ์ฉ์ ์ง์ ํฌ์ปค์ค ์คํ์ผ ์์ฑ ๋ฑ์ ์ํ ์ ํธ๋ฆฌํฐ๋ฅผ ์ ๊ณตํฉ๋๋ค. ์์๋ ๋ค์๊ณผ ๊ฐ์ต๋๋ค:
- ally.js: ์น ์ ํ๋ฆฌ์ผ์ด์ ์ ์ ๊ทผ์ฑ์ ๋์ด๊ธฐ ์ํ JavaScript ๋ผ์ด๋ธ๋ฌ๋ฆฌ์ ๋๋ค.
- FocusTrap: DOM ๋ ธ๋ ๋ด์์ ํฌ์ปค์ค๋ฅผ ํธ๋ํํ๊ธฐ ์ํ ๊ฒฝ๋ ๋ผ์ด๋ธ๋ฌ๋ฆฌ์ ๋๋ค.
ํค๋ณด๋ ํ์์ ๋ํ ๊ธ๋ก๋ฒ ๊ณ ๋ ค ์ฌํญ
๊ธ๋ก๋ฒ ๊ณ ๊ฐ์ ์ํด ๋์์ธํ ๋๋ ๋ค๋ฅธ ์ง์ญ์ ๋ฌธํ์ ์ฐจ์ด์ ์ ๊ทผ์ฑ ํ์ค์ ๊ณ ๋ คํ๋ ๊ฒ์ด ์ค์ํฉ๋๋ค:
- ์ธ์ด ๋ฐฉํฅ: ์์์ ์ธ๊ธํ๋ฏ์ด ํฌ์ปค์ค ์์๋ ์ฝํ ์ธ ์ ์ธ์ด ๋ฐฉํฅ์ ๋ฐ๋ผ์ผ ํฉ๋๋ค.
- ํค๋ณด๋ ๋ ์ด์์: ๋ค๋ฅธ ๊ตญ๊ฐ์์๋ ๋ค๋ฅธ ํค๋ณด๋ ๋ ์ด์์(์: QWERTY, AZERTY, Dvorak)์ ์ฌ์ฉํ๋ค๋ ์ ์ ์ธ์งํ์ญ์์ค. ๋ค๋ฅธ ํค๋ณด๋ ๋ ์ด์์์ผ๋ก ์น์ฌ์ดํธ๋ฅผ ํ ์คํธํ์ฌ ํค๋ณด๋ ๋จ์ถํค์ ํ์์ด ์ฌ๋ฐ๋ฅด๊ฒ ์๋ํ๋์ง ํ์ธํ์ญ์์ค.
- ์ ๊ทผ์ฑ ํ์ค: WCAG(์น ์ฝํ ์ธ ์ ๊ทผ์ฑ ๊ฐ์ด๋๋ผ์ธ), EN 301 549(ICT ์ ํ ๋ฐ ์๋น์ค์ ๋ํ ์ ๋ฝ ์ ๊ทผ์ฑ ์๊ตฌ์ฌํญ ํ์ค), Section 508(๋ฏธ๊ตญ ์ ๊ทผ์ฑ ๋ฒ)๊ณผ ๊ฐ์ ๋ค๋ฅธ ์ง์ญ์ ์ ๊ทผ์ฑ ํ์ค ๋ฐ ๊ฐ์ด๋๋ผ์ธ์ ์ต์ํด์ง์ญ์์ค.
- ๋ณด์กฐ ๊ธฐ์ : JAWS, NVDA, VoiceOver์ ๊ฐ์ด ๋ค๋ฅธ ์ง์ญ์์ ๋๋ฆฌ ์ฌ์ฉ๋๋ ๋ณด์กฐ ๊ธฐ์ ๋ก ์น์ฌ์ดํธ๋ฅผ ํ ์คํธํ์ญ์์ค.
๊ฒฐ๋ก
ํค๋ณด๋ ํ์์ ์ ๊ทผ์ฑ๊ณผ ์ฌ์ฉ์ฑ์ ์ค์ํ ์ธก๋ฉด์
๋๋ค. ์ ์ ํ ํฌ์ปค์ค ๊ด๋ฆฌ ๊ธฐ์ ์ ๊ตฌํํจ์ผ๋ก์จ ๊ฐ๋ฐ์๋ ๋ ๋์ ๋ฒ์์ ์ฌ์ฉ์๊ฐ ์ ๊ทผํ ์ ์๋ ์น์ฌ์ดํธ์ ์ ํ๋ฆฌ์ผ์ด์
์ ๋ง๋ค๊ณ ๋ชจ๋ ์ฌ๋์๊ฒ ๋ ํจ์จ์ ์ด๊ณ ์ฆ๊ฑฐ์ด ๊ฒฝํ์ ์ ๊ณตํ ์ ์์ต๋๋ค. ๋
ผ๋ฆฌ์ ์ธ ํฌ์ปค์ค ์์, ๋์ ์ ๋๋ ํฌ์ปค์ค ํ์๊ธฐ, tabindex์ ํจ๊ณผ์ ์ธ ์ฌ์ฉ์ ์ฐ์ ์ํ๋ ๊ฒ์ ๊ธฐ์ตํ์ญ์์ค. ํค๋ณด๋๋ง์ผ๋ก ์ฒ ์ ํ ํ
์คํธํ๊ณ ์ ๊ทผ์ฑ์ ํฅ์์ํค๊ธฐ ์ํด ARIA ์์ฑ ์ฌ์ฉ์ ๊ณ ๋ คํ์ญ์์ค. ์ด๋ฌํ ๋ชจ๋ฒ ์ฌ๋ก๋ฅผ ๋ฐ๋ฅด๋ฉด ์น์ฌ์ดํธ๋ ์ ํ๋ฆฌ์ผ์ด์
์ด ์ง์ ์ผ๋ก ๋ชจ๋ ์ฌ๋์ด ์ ๊ทผํ๊ณ ์ฌ์ฉํ ์ ์๋๋ก ๋ณด์ฅํ ์ ์์ต๋๋ค.
ํค๋ณด๋ ํ์๊ณผ ํฌ์ปค์ค ๊ด๋ฆฌ์ ํฌ์ํ๋ ๊ฒ์ ๋จ์ง ์ ๊ทผ์ฑ ํ์ค์ ์ค์ํ๋ ๊ฒ๋ง์ด ์๋๋๋ค. ์ด๋ ๋ ํฌ์ฉ์ ์ด๊ณ ์ฌ์ฉ์ ์นํ์ ์ธ ๋์งํธ ์ธ์์ ๋ง๋๋ ๊ฒ์ ๋๋ค. ์ด๋ฌํ ๊ธฐ์ ์ ์์ฉํ๊ณ ์ ์ธ๊ณ ์ฌ์ฉ์๊ฐ ์์ ์ ๋ฅ๋ ฅ์ด๋ ์ ํธํ๋ ์ํธ์์ฉ ๋ฐฉ์์ ๊ด๊ณ์์ด ์ฝํ ์ธ ์ ํจ๊ณผ์ ์ผ๋ก ์ํธ์์ฉํ ์ ์๋๋ก ํ์ ์ค์ด์ฃผ์ญ์์ค. ์ฌ๋ ค ๊น์ ํค๋ณด๋ ํ์์ ๋ค์ด๋ ๋ ธ๋ ฅ์ ์ฌ์ฉ์ ๋ง์กฑ๋์ ๋ ๋๊ณ ์ฐธ์ฌ๋ ๋์ ์ ์ฌ ๊ณ ๊ฐ์ด๋ผ๋ ๊ฒฐ์ค๋ก ๋์์ฌ ๊ฒ์ ๋๋ค.