Skip to content

TabsΒ #2

@hsskey

Description

@hsskey

πŸ“‹ μ»΄ν¬λ„ŒνŠΈ 정보

  • μ»΄ν¬λ„ŒνŠΈ 이름: 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-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>λ₯Ό μ‚¬μš©ν•˜μ—¬ νƒ­ κ°„ μ „ν™˜ μ‹œ 슀크둀과 같은 μΈν„°λž™μ…˜μ„ κ°•μ‘°. 슀크둀둜 μ „ν™˜ν•˜λŠ” 방식은 λͺ¨λ°”일 λ“±μ—μ„œ 보닀 μžμ—°μŠ€λŸ½κ²Œ μ‚¬μš©ν•  수 μžˆλ„λ‘ 함

πŸ’‘ 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)μ—μ„œ νƒ­ μ „ν™˜μ΄ μ •μƒμ μœΌλ‘œ λ™μž‘ν•˜λŠ”μ§€ 확인
  • μ‚¬μš©μž ν”Όλ“œλ°±: μ‚¬μš©μž ν…ŒμŠ€νŠΈλ₯Ό 톡해 νƒ­ μ»΄ν¬λ„ŒνŠΈλ₯Ό ν†΅ν•œ μ „ν™˜μ΄ 직관적이고 νŽΈλ¦¬ν•œμ§€ ν™•μΈν•˜κ³  κ°œμ„  사항 반영

πŸ“Œ μΆ”κ°€ μ°Έκ³  사항

🎯 μ—­ν• , 속성, μƒνƒœ 및 νƒœκ·Έ 속성

  • Role, Attribute, State
    • Role: role="tablist", role="tab", role="tabpanel"을 톡해 각 역할을 λͺ…μ‹œ
    • Attribute: aria-controls, aria-labelledbyλ₯Ό μ‚¬μš©ν•΄ νƒ­κ³Ό νŒ¨λ„ κ°„μ˜ 관계 λͺ…ν™•νžˆ μ„€μ •
    • State: ν˜„μž¬ ν™œμ„±ν™”λœ νƒ­μ—λŠ” aria-selected="true"λ₯Ό μ„€μ •ν•΄ μ‹œκ°μ  및 ν”„λ‘œκ·Έλž¨μ μœΌλ‘œ ν˜„μž¬ μœ„μΉ˜ ν‘œμ‹œ
  • JavaScript 및 CSS μ‚¬μš© μ—¬λΆ€
    • JavaScript μ‚¬μš© μ—¬λΆ€: νƒ­ μ „ν™˜ μ‹œ μ½˜ν…μΈ μ˜ ν‘œμ‹œ 및 μˆ¨κΉ€μ„ JavaScript둜 μ œμ–΄ν•˜λ©°, ν‚€λ³΄λ“œ 이벀트 처리λ₯Ό 톡해 μ ‘κ·Όμ„± ν–₯상
    • CSS 적용 사항: 슀크둀 μ „ν™˜ λ“± μ‹œκ°μ  효과λ₯Ό μœ„ν•΄ CSS 슀크둀 μŠ€λƒ…(snap)을 μ‚¬μš©ν•΄ μžμ—°μŠ€λŸ¬μš΄ UX 제곡

Metadata

Metadata

Assignees

No one assigned

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions