π μΉ μ κ·Όμ±μ΄λ?
κ³ λ Ήμ, μ₯μ μΈ, λΉμ₯μ μΈμ μκ΄μμ΄ λͺ¨λ μ¬λμ΄ λλ±νκ² μ κ·Ό κ°λ₯νλλ‘ νλ κ²μ λ§νλ€.
λ§μ½ μκ°μ΄ λΆνΈν μ¬λμ΄ μΉμ μ΄μ©νλ κ²½μ° μ€ν¬λ¦°λ¦¬λμ μμ§ν΄ μνλ λμμ μννκ² λ κ²μ΄λ€. μ΄λ μκ°μ΄ λΆνΈν μ¬λλ μΉμ μ μνλ λμμ μννλλ° μ΄λ €μμ΄ μλλ‘ μ€ν¬λ¦°λ¦¬λκ° λ³΄λ€ μ ννκ³ λͺ ννκ² μ 보λ₯Ό μ λ¬νλ λ±μ κΈ°λ₯μ νλλ‘ ν΄μΌ νλ€.
NAVERμ κ²μμ°½μ΄λ€ μκ°μ΄ λΆνΈν μ¬λμ΄λΌλ©΄ μ΄ μμκ° κ²μνλ λΆλΆμΈμ§λ₯Ό μ ν μ μ μλ€. νμ§λ§ μ΄ ν¬νΈμ¬μ΄νΈμμ κ²μμ°½μ ꡬμ±ν μ½λλ₯Ό μ΄ν΄λ³΄κ² λλ©΄ μ¬μ©μμκ²λ 보μ¬μ§μ§ μμ§λ§ κ²μμ΄λΌκ³ νκΈ°λ₯Ό ν΄λκ³ μ€ν¬λ¦°λ¦¬λκ° μΈμν μ μκ²λ μμ±ν΄λμλ€.
<!-- νλ©΄μλ 보μ΄μ§ μλ νκ·Έ -->
<span class="blind">κ²μ</span>
<!-- κ²μ λ보기 μμ΄μ½ -->
<span class="ico_search_submit"></span>
π WAI-ARIA
(Web Accessibility Initiative - Accessible Rich Internet Application)
μΉμ μ΄μ©νλ μ¬λλ€μ΄ μ¦κ°ν¨μ λ°λΌ μ¬λ¬ μ¬λλ€μ΄ μΉμ μ΄μ©νκ² λμκ³ λͺΈμ΄ λΆνΈν λ λ§μ μ¬λλ€μ΄ μΉμ μ΄μ©ν μ μλλ‘ λμ μΉ μ ν리μΌμ΄μ μ μ κ·Όμ±μ 보μ₯ν΄μ€ μ μλ€. ν΄λΉ μμμ μν , λμ λ±μ λͺ μν΄μ€μΌλ‘μ¨ λ³΄λ€ λͺ μμ μΌλ‘ μΉμ μ΄μ©ν μ μλλ‘ νλ€. (htmlλ§μΌλ‘λ λΆμ‘±ν μΉ μ κ·Όμ±μ 보μ, W3Cμμ λ§λ¬)
κ³Όμ λ₯Ό μ§ννλ©΄μ 체ν¬λ°μ€μ cssλ₯Ό λ³κ²½ν΄μΌν μΌμ΄ μμλ€.
λΉμμλ μΉ μ κ·Όμ±μ λν μ§μμ΄ κ±°μ μλ€μνΌνκΈ° λλ¬Έμ labelμ μ¬μ©ν΄μ checkboxλ₯Ό display: noneμΌλ‘ λμ΄ λ³΄μ΄μ§ μλλ‘ νκ³ , λ΄κ° μνλ λͺ¨μλλ‘ lableμ cssλ₯Ό λ³κ²½ν μ μ΄ μλ€.
νμ§λ§ μ§κΈ μκ°ν΄λ³΄λ©΄ μΉ μ κ·Όμ±μ μν λ°°λ €κ° μ ν λμμ§ μμ μ½λλ₯Ό μμ±νλ€κ³ μκ°νλ€. μ€ν¬λ¦°λ¦¬λλ₯Ό μ΄μ©νλ μ¬λμ΄ ν΄λΉ λΆλΆμ μ νκ² λμλ€λ©΄ μ΄κ±΄ lableμ΄λΌλ μμμΌλΏ checkboxμΈμ§ μ΄λ€ μν μ νλμ§ lableμ΄λΌλ©΄ 무μμ κ°λ₯΄ν€λμ§μ λν λͺ μκ° μ ν μ‘΄μ¬νμ§ μμλ€.
μ΄λ΄λ ARIAλ₯Ό μ΄μ©ν μ μλ€.
ARIAλ₯Ό μ΄μ©νλ©΄ ν΄λΉ μμκ° μ΄λ»κ² μλλλμ§λ₯Ό λͺ μν΄μ€ μ μλ€. μλ₯Ό λ€μ΄ role="checkbox"λΌκ³ μμ±μΌλ‘ μΆκ°ν΄μ£Όκ² λλ©΄ μ΄ μμ±μ΄ checkboxμ²λΌ λμν¨μ λΈλΌμ°μ μκ² μλ €μ€ μ μλ€ μ΄μΈμλ λνμ μΌλ‘ λ€μκ³Ό κ°μ μν μ μννλ€.
Role | UIμ ν¬ν¨λ νΉμ elementμ κΈ°λ₯μ μ μ |
Property | ν΄λΉ μ»΄ν¬λνΈμ νΉμ§μ΄λ μν©μ μ μνλ©° μμ±λͺ μΌλ‘ ‘aria-*‘λΌλ μ λμ¬λ₯Ό μ¬μ© |
State | ν΄λΉ μ»΄ν¨λνΈμ μν μ 보λ₯Ό μ μ |
- WAI-ARIAλ₯Ό μ΄μ©ν΄μ ν΄λΉ μμμ λμμ μ μνκ±°λ, μν© λ° μνκ° μ΄λ€μ§λ₯Ό λͺ μμ μΌλ‘ μλ €μ€λ€.
μ΄μ κ°μ λ°©λ² λλ λ€λ₯Έ λ°©λ²μ νμ©ν΄μ μΉ μ κ·Όμ±μ λμΈ λ©μΈ λ©λ΄λ₯Ό μμ±νλ κ²μ΄ μ’λ€λ μκ°μ νλ€.
λ¨Όμ 보ν΅μ λ©λ΄λ₯Ό λ³΄κ² λλ©΄ <ul>, <li>λ₯Ό μ΄μ©ν΄μ λ©λ΄λ₯Ό μμ±νκ² λλ€ μ΄λ μλ©ν±μ μΌλ‘ λ©λ΄λ₯Ό <nav> νκ·Έλ‘ κ°μΈλλ° μ΄λ κ²μμμ§ μ΅μ νμλ λμμ΄ λλ€. λΈλΌμ°μ λ€μ΄ λ°μ΄ν°λ₯Ό μμ§ν λ ν΄λΉ λΆλΆμ΄ navigator μν μ νλ€λ κ²μ μλ €μ£Όκ² λλ©΄ κ²μμμ§μ΄ λ°μ΄ν°λ₯Ό μμ§ν λ ν¨μ¨μ μΌλ‘ ν μ μκ³ , μ€ν¬λ¦°λ¦¬λλ₯Ό μ΄μ©νλ μ¬μ©μλ€λ ν΄λΉ μμκ° μ΄λμν μ ν μ§ κ°λ΅νκ² μ μ μλ€.
<nav> νκ·Έλ‘ λ©λ΄λΆλΆμ κ°μΈμ£Όκ³ , 보μ΄μ§ μλ (screen leader only)μ μ λͺ©μ μμ±ν΄μ£Όλ©΄ μΉμ μ¬μ©νκΈ° μ΄λ €μ΄ μ¬λλ€λ νμ¬ λΆλΆμ΄ “λ©λ΄μ μν μ νλꡬλ!” λΌκ³ μ μ μμ κ²μ΄λ€.
μλ©ν±νκ·Έλ₯Ό μ΄μ©ν΄μ ν΄λΉ λΆλΆμ΄ μ΄λ€ λΆλΆμΈμ§ ν° λλͺ©μΌλ‘ μ μ μλ€λ©΄ μ΄μ μ λ§ν aria-*λ₯Ό μ΄μ©ν΄μ μ¬μ©μκ° μν νκ² μΉμ μ΄μ©ν μ μλλ‘ ν΄μ€ μ μλ€.(μλ©ν± μμμ role, ariaλ₯Ό νΌμ©ν΄μ μ¬μ©νλ κ²μ μ’μ§ μλ€κ³ νλ€)
λ©κ° λ©λ΄(λ©λ΄κ° κ΅μ₯ν λ§μ λλ‘λ€μ΄μμ λ©λ΄)λ₯Ό μ΄μ©ν λ ν΄λ¬ μμμ λ§μ°μ€λ₯Ό hoverνκ±°λ, clickν΄μΌ μ£Όλ©λ΄ μλμ μλΈλ©λ΄λ€μ νμΈν μ μλ€ μ΄λ μλΈλ©λ΄λ₯Ό μ΄ μ μλλ‘ νλ μμμ aria-label="submenu-open"μ κ°μ΄ ν΄λΉ μμκ° μ΄λ€ μν μ νλμ§ μλ €μ£Όλ κ²μ΄ μ’λ€.
<body>
<div class="container">
<header>
<h1>Test Page</h1>
</header>
<nav>
<h2 class="screen-leader-only">menu(nav)</h2>
<ul>
<li>
<button aria-label="submenu-open">μ£Ό λ©λ΄ 1</button>
<ul>
<li aria-label="submenu"><a>μλΈλ©λ΄ 1-1</a></li>
<li aria-label="submenu"><a>μλΈλ©λ΄ 1-2</a></li>
<li aria-label="submenu"><a>μλΈλ©λ΄ 1-3</a></li>
</ul>
</li>
<li>
<button aria-label="submenu-open">μ£Ό λ©λ΄ 2</button>
<ul>
<li aria-label="submenu"><a>μλΈλ©λ΄ 2-1</a></li>
<li aria-label="submenu"><a>μλΈλ©λ΄ 2-2</a></li>
<li aria-label="submenu"><a>μλΈλ©λ΄ 2-3</a></li>
</ul>
</li>
</ul>
</nav>
<main> content </main>
<footer> footer</footer>
</div>
</body>
μ μ½λλ₯Ό 보면 μλ©ν± μμ(<header>, <nav>, <main>, <footer>)λ₯Ό μ΄μ©ν΄μ κ° μμλ₯Ό λͺ μμ μΌλ‘ νννκ³ μ£Όλ©λ΄ νλ νλλ₯Ό ꡬμ±νλ μμ(μλ°μ€ν¬λ¦½νΈλ‘ λλ‘λ€μ΄ ꡬν)λ₯Ό button νκ·Έλ‘ μμ±νλ€ μ΄λ μ΄ buttonμ΄ λ¬΄μ¨ μν μ νλμ§ μ μ μλ μν©μ΄ μλ€. μ΄λ aria-labelμ μ΄μ©ν΄μ λΈλΌμ°μ κ° μ΄ νκ·Έκ° λ¬΄μμ νλμ§ μ¬μ©μμκ² μλ €μ€ μ μλ€.
- aria-label: λ μ΄λΈλ‘ μ¬μ©ν λ¬Έμμ΄μ μ§μ ν μ μλ€.(aria-labelμ΄ ν΄λΉ μμμ ν μ€νΈλ³΄λ€ μ°μ μλ¨)
- aria-labelledby: μμ μ μ°Έμ‘°νλ μμλ₯Ό κ°λ₯΄ν¨λ€.
- aria-describedby: κΈ°λ₯μ μ€λͺ νλ μμλ₯Ό κ°λ₯΄ν¨λ€.(μμ μ μ€λͺ νλ lableμ κ°λ₯΄ν¨λ€)
'HTML' μΉ΄ν κ³ λ¦¬μ λ€λ₯Έ κΈ
[HTML] HTML κ°μ (0) | 2023.02.20 |
---|