WAI-ARIAλ?
Web Accessibility Initiative’s Accessible Rich Internet Applications
μ€ν¬λ¦°λ¦¬λκ° λΈλΌμ°μ λ₯Ό μ½μ λ κ° μμκ° μ΄λ€ μν μ νλμ§, λ¬΄μ¨ μλ―Έλ‘ μ‘΄μ¬νλμ§ μ μ μλλ‘ νκΈ° μν΄ λ§λ€μ΄μ§ κΈ°μ μ΄λ€.
λ²νΌ, λ§ν¬, λλ‘λ€μ΄ λ©λ΄ λ±μ μμμ WAI-ARIA μμ±μ μΆκ°νμ¬, μ€ν¬λ¦°λ¦¬λκ° ν΄λΉ μμλ₯Ό μ ννκ² μΈμνκ³ , μ¬μ©μμκ² μ μ ν μ 보λ₯Ό μ 곡ν μ μλ€.
μ€ν¬λ¦° 리λλ : λΈλΌμ°μ λ₯Ό μκ°μ μΌλ‘ μ½λ κ²μ΄ λΆνΈν μ¬μ©μλ₯Ό μν΄ μ»΄ν¨ν° νλ©΄μ λλ ν΄μ£Όλ μννΈμ¨μ΄μ΄λ€.
aria-label
νκ·Έκ° κ°μ§κ³ μλ μλ―Έλ₯Ό μ μ΄μ£Όλ μ΄λ¦ν κ°μ μν μ νλ€.
νμ¬ μμμ κΈ°λ₯ λ° λͺ©μ μ μ μ΄λλ κ²μ΄λ€.
<strong aria-label="μ€λμ μ±
μ μ ">μ€λμ μ±
</strong>μ΄λ κ² aria-labelμ μμ±ν΄μ€μΌλ‘μ¨ λ΄μ©μ λͺ ννκ² μλ €μ€ μ μλ€.
aria-hidden="true"
<strong aira-label="νμ 9.4">
<span aria-hidden="true">
<i class="fas fa-star"></i>
<i class="fas fa-star"></i>
<i class="fas fa-star"></i>
<i class="fas fa-star"></i>
<i class="fas fa-star-half"></i>
</span>
9.4
</strong>μ€ν¬λ¦° 리λλ‘ μ½μ λ, λ³νλ₯Ό νλ νλ λ€ μ½μ΄μ£Όλ κ²μ΄ μλλΌ, νμ 9.4λ§ μ½μ΄μ£ΌκΈ°λ₯Ό μν λ μ¬μ©νλ κ²μ΄ aria-hiddenμ΄λ€.
νμν μ λ³΄λ§ μ½μ΄μ€ μ μλ€.
μμ : μμμ¦
<body>
<h1>Bill sharing request <span>from Kimbug</span></h1>
<div class="receipt">
<h2>McDonald's</h2>
<strong class="barcode">
<img src="./assets/barcode.svg" alt="Barcode">
</strong>
<span aria-label="Issue on June 24th, 20xx">24.06.20xx</span>
<div>
<dl>
<div>
<dt>Coke light - 0.3<span aria-label="litter">L</span></dt>
<dd>$1.50</dd>
</div>
<div>
<dt>Heineken Beer - 0.5<span aria-label="litter">L</span></dt>
<dd>$3.25</dd>
</div>
<div>
<dt>Chicken McNuggets</dt>
<dd>$21.00</dd>
</div>
</dl>
<dl>
<dt>In total</dt>
<dd><strong>$25.75</strong></dd>
</dl>
</div>
</div>
</body>
aria-labelμ 보μ.
Lμ 보면 λ¬΄μ¨ μλ―ΈμΈμ§ λͺ¨λ₯΄λκΉ aria-labelμ litterλΌκ³ λͺ μν΄μ€¬λ€.
κ·Έλ¦¬κ³ μμ£Όμ¦ λ°ν λ μ§μλ Issue on June 24th, 20xx λΌκ³ μ μ΄μ€¬λ€.
(Issue on : μμμ¦μ λ°ννλ€λΌλ λ»)
class="sr-only"
<table>
<thead class="sr-only">
<tr>
<th scope="col">Actions</th>
<th scope="col">Sender</th>
<th scope="col">Title</th>
<th scope="col">Time</th>
</tr>
</thead>
</table>
screen reader onlyλ₯Ό μ€μ¬μ sr-onlyλ‘ λ리 μ°μ΄κ³ μλ€.
class="sr-only"λ μ€ν¬λ¦° 리λμμλ§ λ³΄μ΄κ³ , μΌλ° μ¬μ©μμκ²λ 보μ΄μ§ μλ μμλ₯Ό λ§λ€κΈ° μν΄ μμ£Ό μ¬μ©λλ€.
μ΄λ₯Ό ν΅ν΄, μ€ν¬λ¦° 리λ μ¬μ©μλ€μ΄ μΉ νμ΄μ§μ μ 보λ₯Ό λμ± μ½κ² μ΄ν΄νκ³ , μ κ·Όν μ μλ€.
css μμ±μΌλ‘λ visibility : hidden;μ μ€λ€.
'πΏππππππππππ π»πππππππ > π·ππΌπ»' μΉ΄ν κ³ λ¦¬μ λ€λ₯Έ κΈ
| [HTML] title | link | script 맨 λ§μ§λ§μ μμ±νλ μ΄μ (0) | 2023.12.27 |
|---|---|
| [HTML] ꡬ쑰 | Doctype & Document Structure (0) | 2023.12.27 |
| [HTML] abbr | address | pre | code (0) | 2023.12.27 |
| [HTML] media files (0) | 2023.12.27 |
| [HTML] WEB titleμ icon μ μ©νλ λ°©λ² (0) | 2023.07.20 |
