TIL) WAI-ARIA, aria-live, μ€ν¬λ¦° 리λ, μΉ μ κ·Όμ± ν₯μ μν€λ λ°©λ²
WAI-ARIA λ?
WAIμμ λ°νν RIA νκ²½μμμ μΉ μ κ·Όμ± κΈ°μ κ·κ²©,
μ§§κ², μΉ μ κ·Όμ±μ ν₯μμν¬ μ μλ λ°©λ² μ€ νλ
WAI (web accessibility initiative) = μΉ νμ€μ μ νλ W3Cμμ μΉ μ κ·Όμ±μ λ΄λΉνλ κΈ°κ΄
ARIA (accessible rich internet applications) = μ₯μ κ° μλ μ¬λλ€μ΄ μΉ μ½ν μΈ μ μΉ μμ© νλ‘κ·Έλ¨μ λ μ½κ² μ‘μΈμ€ν μ μλλ‘ νλ, μ¦ μΉ μ κ·Όμ±μ κ°μΆκΈ° μν κΈ°μ
RIA (rich internet applications) = λ°λ‘ νλ‘κ·Έλ¨μ μ€μΉνμ§ μμλ μΉ λΈλΌμ°μ λ₯Ό ν΅ν΄ μ¬μ©ν μ μλ νΈλ¦¬μ± + νλ‘κ·Έλ¨μ μ§μ μ€μΉν΄μ μ¬μ©νλ κ²μ²λΌ λΉ λ₯Έ λ°μμ μ¬μ©μ μΈν°νμ΄μ€λ₯Ό λμμ κ°μ§λ μΉ μ ν리μΌμ΄μ .
WAI-ARIA μ νμμ±
μλ§¨ν± HTMLμ μ¬μ©νλ©΄ μΉ μ κ·Όμ±μ ν₯μμν¬ μ μλ€.
WAI-ARIAλ HTML μμμ μΆκ°μ μΌλ‘ μλ―Έλ₯Ό λΆμ¬ν μ μκ² ν΄μ€λ€.
1. μλ§¨ν± μμλ§μΌλ‘ μλ―Έλ₯Ό μΆ©λΆν λΆμ¬ν μ μλ μν©μ WAI-ARIAλ₯Ό μ¬μ©νλ©΄ HTML μμμ μΆκ°μ μΈ μλ―Έλ₯Ό λΆμ¬νμ¬ λ μννκ² νμ΄μ§λ₯Ό νμν μ μλ€. (WAI-ARIAλ 보쑰μ μΈ μν λ‘λ§ μ¬μ©νκ³ , λ¨μ© κΈμ§! μλ§¨ν± HTMLμ μ°μ μ μΌλ‘ μ¬μ©νκΈ°!)
2. SPAμ²λΌ AJAXλ₯Ό μ¬μ©νλ μν©, μ¦ μλ‘κ³ μΉ¨ μμ΄ νμ΄μ§μ λ΄μ©μ΄ λ°λλ μν©μμλ λ³κ²½λ μμμ λν μ 보λ₯Ό μ λ¬ν΄μ€ μ μμ΄ λμ μΈ μ½ν μΈ μμλ μΉ μ κ·Όμ±μ ν₯μμν¬ μ μλ€.
WAI-ARIA μ¬μ©λ²
HTML νκ·Έ λ΄λΆμ μμ±μ μΆκ°ν΄μ μλ―Έλ₯Ό λΆμ¬νλ€.
1. μν role: HTML μμμ μν μ μ μνλ€.
2. μν state: μμμ νμ¬ μνλ₯Ό λνλΈλ€.
3. μμ± property: μμμ νΉμ§μ μ μνλ€.
1. μν role : HTML μμ μ’ λ₯μ μν μ΄ μλ‘ λ§μ§ μμ λ, μ΄λ€ μν μ νλ μμμΈμ§ λͺ μν΄μ€ λ μ¬μ©
λ²νΌμΌλ‘ μ¬μ©λλ μμλ₯Ό λ§λ€μλλ°, <div> μμλ₯Ό μ¬μ©νλ€λ©΄ π
<div role="button">divμ΄μ§λ§ buttonμΌλ‘ μ¬μ©λλ μμ</div>
HTML μμλ‘ μΆ©λΆν νμ ν μ μλ λ΄μ©μ WAI-ARIAλ‘ λ μ€λͺ ν΄μ€ νμ μλ€.
(β)<button role="button"></button>
μλ§¨ν± μμ λ³Έμ°μ μλ―Έλ₯Ό μμλ‘ λ°κΎΈλ©΄ μλλ€.
(β)<h1 role="button">μ΄κ±΄ h1 μμ</h1>
νμ© μμ)
<div role="tabList">
<li role="tab">Tab1</li>
<li role="tab">Tab2</li>
<li role="tab">Tab3</li>
</div>
<div role="tabpanel">Tab menu ONE</div>
<div role="tabpanel">Tab menu TWO</div>
<div role="tabpanel">Tab menu THREE</div>
2. μν state: μμμ νμ¬ μνλ₯Ό λνλΈλ€.
- νμ¬ μ΄λ€ νμ΄ μ νλμλμ§ νμνκΈ° (aria-selected μ¬μ©νκΈ°)
<div role="tabList">
<li role="tab" aria-selected="true">Tab1</li>
<li role="tab" aria-selected="false">Tab2</li>
<li role="tab" aria-selected="false">Tab3</li>
</div>
<div role="tabpanel">Tab menu ONE</div>
<div role="tabpanel">Tab menu TWO</div>
<div role="tabpanel">Tab menu THREE</div>
- μμ½λμΈ UIκ° νΌμ³μ§ μνμΈμ§ νμνκΈ° (aria-expanded)
- μμκ° μ¨κΉ μνμΈμ§ νμνκΈ° (aria-hidden)
3. μμ± property : μμμ νΉμ§μ μ μνλ€.
- ν μ€νΈ μ½ν μΈ μμ΄ μ΄λ―Έμ§λ‘λ§ λ§λ€μ΄μ§ λ²νΌμ μ€λͺ ν λ (aria-label)
κΈ°μ‘΄
<button> <img src="X.png" /> </button>
<button> <img src="λ보기.png" /> </button>
μΉμ κ·Όμ±μ ν₯μμν¨ λ²νΌ
<button aria-label="λ«κΈ°"/> <img src="X.png" /> </button>
<button aria-label="κ²μ"/> <img src="λ보기.png" /> </button>
- ν΄λΉ μμκ° μ€μκ°μΌλ‘ λ΄μ©μ κ°±μ νλ μμμΈμ§ νμνκΈ° (aria-live)
alert, modal, dialog μ κ°μ λΈλΌμ°μ§ λμ€μ λ΄μ©μ λμ°λ μμλ, AJAX κΈ°μ μ μ¬μ©ν΄μ μ€μκ°μΌλ‘ λ΄μ©μ κ°±μ νλ μμμ μ¬μ©νλ€.
μμ±κ°
1. polite : μ€ν¬λ¦° 리λκ° νμ¬ μ½κ³ μλ λ΄μ©μ λͺ¨λ μ½κ³ λμ κ°±μ λ λ΄μ©μ μ¬μ©μμκ² μ λ¬νλ€.
2. assertive : μ€ν¬λ¦° 리λκ° νμ¬ μ½κ³ μλ λ΄μ©μ μ€λ¨νκ³ κ°±μ λ λ΄μ©μ λ°λ‘ μ¬μ©μμκ² μ λ¬νλ€.
μ°Έκ³ )
https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/ARIA_Techniques
https://www.w3.org/TR/html-aria/