πŸ–₯FrontEnd/ν”„λ‘ νŠΈμ—”λ“œ

TIL) WAI-ARIA, aria-live, 슀크린 리더, μ›Ή μ ‘κ·Όμ„± ν–₯상 μ‹œν‚€λŠ” 방법

hellohailie 2022. 7. 11. 13:19
λ°˜μ‘ν˜•

 

 

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/

 

πŸ˜ƒ 잘λͺ»λœ κ°œλ… 전달이 μžˆλ‹€λ©΄ λŒ“κΈ€ λΆ€νƒλ“œλ¦½λ‹ˆλ‹€. μ €μ˜ μ„±μž₯에 큰 도움이 λ©λ‹ˆλ‹€πŸ€“

λ°˜μ‘ν˜•