-
Notifications
You must be signed in to change notification settings - Fork 0
Open
Labels
Description
π μ»΄ν¬λνΈ μ 보
- μ»΄ν¬λνΈ μ΄λ¦: Tab
- μ»΄ν¬λνΈ μ€λͺ : νμ νλμ UI λ΄μμ μ¬λ¬ μΉμ μ λ΄μ©μ κ³μΈ΅μ μΌλ‘ μ 곡νλ©°, κ° νμ μ ννμ¬ νΉμ μ½ν μΈ λ₯Ό νμ±νμν¬ μ μλ μ»΄ν¬λνΈ
- μ¬μ© μ¬λ‘: λμΌν μΉ΄ν κ³ λ¦¬λ μ£Όμ λ₯Ό ν¬ν¨νλ μ¬λ¬ νμ΄μ§λ μΉμ μ ν νλ©΄μμ μ 곡ν λ μ¬μ©. μλ₯Ό λ€μ΄, μ€μ νμ΄μ§, μ¬λ¬ κ°μ μ 보 μμ λ±μ νλμ νλ©΄μμ κ°λ¨ν μ ννλ©° λ³Ό μ μλλ‘ μ§μ
π μ°Έμ‘° λ° λ νΌλ°μ€
- ARIA Authoring Practices: W3C ARIA Patterns
- κ΄λ ¨ ν¨ν΄ λ° μ μ©λ μ κ·Όμ± κΈ°μ€ νμΈ
- κΈ°ν λ νΌλ°μ€: MUI, Ant Design, Web.dev λ±μ λ¬Έμμ λΉκ΅νμ¬ ν¨ν΄ λΆμ
π μ κ·Όμ± λ° ARIA μ μ© μ¬λΆ
- ARIA Pattern μ μ©: ARIA Pattern λ§ν¬
- μ¬μ©λ ARIA μμ±:
role="tablist",role="tab",aria-selected,aria-controls,role="tabpanel"λ±μ΄ μ¬μ©λ¨.role="tablist"λ νμ 리μ€νΈμμ λͺ μνλ©°, κ°κ°μ νμrole="tab"μ κ°κ³ ν΄λΉ μ½ν μΈ μμκ³Ό μ°κ²°λ¨.aria-selectedμμ±μ ν΅ν΄ νμ¬ μ νλ νμ λͺ μνκ³ ,aria-controlsλ‘ νκ³Ό μ½ν μΈ μμμ μ°κ²°ν¨
- μ¬μ©λ ARIA μμ±:
- μ κ·Όμ± κ΄λ ¨ κ³ λ €μ¬ν: νμ μ ν μ ν€λ³΄λ μ¬μ© λ° ν¬μ»€μ€ μ΄λμ κ³ λ €ν΄μΌ νλ©°, κ° ν ν¨λμ΄ μ½κ² νμ κ°λ₯νλλ‘
aria-labelledbyμ κ°μ μμ±μ νμ© - μ κ·Όμ± κΈ°λ₯ μμ½: νμ¬ νμ±νλ νμ
aria-selected="true"λ‘ μ€μ νκ³ , ν΄λΉ ν¨λμ΄ λͺ νν μΈμλ μ μλλ‘role="tabpanel"μ ν΅ν΄ μ κ·Όμ± κ°ν
ποΈ λ§ν¬μ ꡬ쑰 λΆμ
- HTML μλ§¨ν± νκ·Έ μ¬μ©:
<div>λ΄μrole="tablist",role="tab",role="tabpanel"λ±μΌλ‘ μ맨ν±ν ꡬ쑰λ₯Ό μ 곡. κ° νμaria-controlsμμ±μ ν΅ν΄ νΉμ ν¨λκ³Ό μ°κ²°λκ³ , νμ±ν μνλ₯Ό λνλ΄κΈ° μν΄aria-selectedμμ±μ μ¬μ© - λ§ν¬μ ꡬ쑰 λΉκ΅:
// W3C μμ
<div role="tablist" aria-labelledby="tablist-1">
<button role="tab" aria-controls="tabpanel-1"></button>
</div>
<div role="tabpanel" id="tabpanel-1"></div>
// MUI μμ
<div role="tablist">
<button role="tab" aria-controls="tabpanel-id"></button>
</div>
<div role="tabpanel" id="tabpanel-id"></div>
// Web.dev
<snap-tabs>
<header>
<nav><a href="#tab1"></a></nav>
</header>
<section><article id="tab1"></article></section>
</snap-tabs>
// Ant Design
<div role="tablist">
<div role="tab" aria-controls="tabpanel-id"></div>
</div>
<div role="tabpanel" id="tabpanel-id"></div>- ꡬ쑰μ μ ν μ΄μ :
- MUI λ° Ant Design: μλ§¨ν± μΉ μ κ·Όμ±μ μ μ§νκΈ° μν΄
role="tablist",role="tab",role="tabpanel"μ μ¬μ©νμ¬ λͺ νν ꡬ쑰 μ 곡. μ΄λ‘μ¨ μ€ν¬λ¦° 리λ μ¬μ©μμκ² κ° νκ³Ό ν¨λ κ°μ κ΄κ³λ₯Ό λͺ νν μ λ¬νκ³ , μ¬μ©μ κ²½ν λ° μ κ·Όμ±μ ν₯μμν΄ - Web.dev:
<snap-tabs>λ₯Ό μ¬μ©νμ¬ ν κ° μ ν μ μ€ν¬λ‘€κ³Ό κ°μ μΈν°λμ μ κ°μ‘°. μ€ν¬λ‘€λ‘ μ ννλ λ°©μμ λͺ¨λ°μΌ λ±μμ λ³΄λ€ μμ°μ€λ½κ² μ¬μ©ν μ μλλ‘ ν¨
- MUI λ° Ant Design: μλ§¨ν± μΉ μ κ·Όμ±μ μ μ§νκΈ° μν΄
π‘ UI λΌμ΄λΈλ¬λ¦¬ λΉκ΅ λΆμ
- MUI:
<button>μ μ¬μ©ν΄ κ° νμ μ μνλ©°, μ맨ν±νκ³ μ κ·Όμ± λμ ꡬ쑰 μ μ§.aria-selectedμaria-controlsμμ±μ μ¬μ©ν΄ νκ³Ό μ½ν μΈ μμμ λͺ νν μ°κ²° - Ant Design: λΉμ·νκ² μ맨ν±ν μ κ·Όμ±μ μ€μνλ©°, κ° νμ
role="tab"μμ±μ ν΅ν΄ ν¨λκ³Ό μ°κ²°λκ³aria-labelledbyμ κ°μ μμ±μΌλ‘ μ κ·Όμ± κ°ν - Web.dev:
<snap-tabs>λ₯Ό μ¬μ©ν΄ ν μ ν μ μ€ν¬λ‘€κ³Ό κ°μ μμ°μ€λ¬μ΄ UXλ₯Ό μ 곡νλ©°, HTML νκ·Έμ CSS μ€ν¬λ‘€ κΈ°λ₯μ κ²°ν©νμ¬ λ³΄λ€ μΈν°λν°λΈν μ¬μ©μ κ²½νμ μ 곡
βοΈ κ΅¬ν λ° μ€κ³ κ³ λ €μ¬ν
- μ£Όμ μ€κ³ κ³ λ €μ¬ν: ν μ»΄ν¬λνΈλ μλ§¨ν± HTML νκ·Έ λ° μ μ ν ARIA μμ± μ¬μ©μ ν΅ν΄ μ κ·Όμ±μ κ°ννκ³ , μ¬μ©μκ° μ½κ² νμ¬ νκ³Ό ν¨λμ λ΄μ©μ μ΄ν΄ν μ μλλ‘ ν΄μΌ ν¨. ν μ ν μ μ€ν¬λ‘€μ΄λ ν΄λ¦ μ΄λ²€νΈμ λ°λΌ μ μ ν μ½ν μΈ κ° νμλλλ‘ μ€κ³
- μ½λ μμ:
<div role="tablist">
<button role="tab" aria-controls="panel-1" aria-selected="true" id="tab-1">Tab 1</button>
<button role="tab" aria-controls="panel-2" aria-selected="false" id="tab-2">Tab 2</button>
</div>
<div role="tabpanel" id="panel-1" aria-labelledby="tab-1">Content of Tab 1</div>
<div role="tabpanel" id="panel-2" aria-labelledby="tab-2" hidden>Content of Tab 2</div>π ν μ€νΈ λ° κ²ν
- μ κ·Όμ± ν
μ€νΈ: μ€ν¬λ¦° 리λμ ν€λ³΄λ λ΄λΉκ²μ΄μ
μ¬μ©μ± ν
μ€νΈλ₯Ό ν΅ν΄ κ° νμ΄ μ μ ν μΈμλκ³ μ νλλμ§ νμΈ.
aria-selectedμμ±μ λμμ ν΅ν΄ νμ±νλ νμ΄ μ λλ‘ μλ΄λλμ§ κ²ν - λΈλΌμ°μ νΈνμ± ν μ€νΈ: μ£Όμ λΈλΌμ°μ (Chrome, Firefox, Safari, Edge)μμ ν μ νμ΄ μ μμ μΌλ‘ λμνλμ§ νμΈ
- μ¬μ©μ νΌλλ°±: μ¬μ©μ ν μ€νΈλ₯Ό ν΅ν΄ ν μ»΄ν¬λνΈλ₯Ό ν΅ν μ νμ΄ μ§κ΄μ μ΄κ³ νΈλ¦¬νμ§ νμΈνκ³ κ°μ μ¬ν λ°μ
π μΆκ° μ°Έκ³ μ¬ν
- κ΄λ ¨ λ¬Έμ: W3C ARIA Authoring Practices, Web.dev Tabs Example
- μ견 λ° μ μ: ν μ»΄ν¬λνΈμ λν μ견μ΄λ κ°μ μ¬ν μΆκ°
π― μν , μμ±, μν λ° νκ·Έ μμ±
- Role, Attribute, State
- Role:
role="tablist",role="tab",role="tabpanel"μ ν΅ν΄ κ° μν μ λͺ μ - Attribute:
aria-controls,aria-labelledbyλ₯Ό μ¬μ©ν΄ νκ³Ό ν¨λ κ°μ κ΄κ³ λͺ νν μ€μ - State: νμ¬ νμ±νλ νμλ
aria-selected="true"λ₯Ό μ€μ ν΄ μκ°μ λ° νλ‘κ·Έλ¨μ μΌλ‘ νμ¬ μμΉ νμ
- Role:
- JavaScript λ° CSS μ¬μ© μ¬λΆ
- JavaScript μ¬μ© μ¬λΆ: ν μ ν μ μ½ν μΈ μ νμ λ° μ¨κΉμ JavaScriptλ‘ μ μ΄νλ©°, ν€λ³΄λ μ΄λ²€νΈ μ²λ¦¬λ₯Ό ν΅ν΄ μ κ·Όμ± ν₯μ
- CSS μ μ© μ¬ν: μ€ν¬λ‘€ μ ν λ± μκ°μ ν¨κ³Όλ₯Ό μν΄ CSS μ€ν¬λ‘€ μ€λ (snap)μ μ¬μ©ν΄ μμ°μ€λ¬μ΄ UX μ 곡