Skip to content

πŸ› οΈ Learning UI markup patterns for better accessibility

Notifications You must be signed in to change notification settings

hsskey/component-pattern-practice

Folders and files

NameName
Last commit message
Last commit date

Latest commit

Β 

History

7 Commits
Β 
Β 
Β 
Β 

Repository files navigation

component-pattern-practice

🧩 μ»΄ν¬λ„ŒνŠΈ νŒ¨ν„΄μ— λŒ€ν•œ 이해와 ν•™μŠ΅μ„ μœ„ν•œ λ ˆν¬μ§€ν† λ¦¬μž…λ‹ˆλ‹€. λ‹€μ–‘ν•œ UI 라이브러리(MUI, Ant Design λ“±)와 μ›Ή μ ‘κ·Όμ„±(ARIA Pattern)을 μ°Έκ³ ν•˜λ©°, μ»΄ν¬λ„ŒνŠΈ λ§ˆν¬μ—…μ„ λΉ„κ΅ν•˜κ³  ν•™μŠ΅ν•©λ‹ˆλ‹€.

λ§ˆν¬μ—… νŒ¨ν„΄ 및 μ»΄ν¬λ„ŒνŠΈ 섀계에 λŒ€ν•œ λ…Όμ˜μ™€ 문제 ν•΄κ²° 과정은 Issue νƒ­μ—μ„œ 확인할 수 μžˆμŠ΅λ‹ˆλ‹€.

⚑️ Component Patterns Overview

Component Description Note
1 Breadcrumb 탐색 μœ„μΉ˜λ₯Ό λ‚˜νƒ€λ‚΄λŠ” μ»΄ν¬λ„ŒνŠΈ
2 Tabs 컨텐츠λ₯Ό νƒ­ ν˜•νƒœλ‘œ λ‚˜λˆ„μ–΄ ν‘œμ‹œ
3 Accordion ν™•μž₯ κ°€λŠ₯ν•œ 리슀트 μ»΄ν¬λ„ŒνŠΈ
4 Select λ“œλ‘­λ‹€μš΄ ν˜•νƒœλ‘œ 선택 μž…λ ₯을 λ°›λŠ” μ»΄ν¬λ„ŒνŠΈ
5 Button μ‚¬μš©μž μž…λ ₯을 λ°›κΈ° μœ„ν•œ λ²„νŠΌ
6 Switch ν† κΈ€ ν˜•νƒœλ‘œ μƒνƒœλ₯Ό λ³€κ²½ν•˜λŠ” μ»΄ν¬λ„ŒνŠΈ
7 Carousel μ—¬λŸ¬ 개의 ν•­λͺ©μ„ μŠ¬λΌμ΄λ“œ ν˜•νƒœλ‘œ 순차적으둜 λ³΄μ—¬μ£ΌλŠ” μ»΄ν¬λ„ŒνŠΈ
8 Modal μ‚¬μš©μž μΈν„°λž™μ…˜μ„ μœ„ν•œ νŒμ—…μ°½

πŸ“ Issues and Component Analysis

  • 각 μ»΄ν¬λ„ŒνŠΈμ— λŒ€ν•΄ Issue νƒ­μ—μ„œ λ‹€μ–‘ν•œ λ§ˆν¬μ—… νŒ¨ν„΄μ„ λΉ„κ΅ν•˜κ³  μ •λ¦¬ν•©λ‹ˆλ‹€.
  • ARIA Pattern을 기반으둜 μ»΄ν¬λ„ŒνŠΈμ˜ μ ‘κ·Όμ„± κΈ°λŠ₯을 ν•™μŠ΅ν•˜κ³ , MUI, Ant Design λ“±μ˜ λΌμ΄λΈŒλŸ¬λ¦¬μ™€ λΉ„κ΅ν•©λ‹ˆλ‹€.

μ˜ˆμ‹œ 이슈 ν…œν”Œλ¦Ώ

  • ARIA Patterns: https://www.w3.org/WAI/ARIA/apg/patterns/ 링크λ₯Ό μ°Έκ³ ν•˜μ—¬ μ»΄ν¬λ„ŒνŠΈκ°€ μ›Ή 접근성에 따라 μ–΄λ–»κ²Œ λ§ˆν¬μ—…λ˜μ–΄μ•Ό ν•˜λŠ”μ§€ ν•™μŠ΅ν•©λ‹ˆλ‹€.
  • 라이브러리 비ꡐ: MUI, Ant Design λ“±μ—μ„œ λ™μΌν•œ μ»΄ν¬λ„ŒνŠΈλ₯Ό μ–΄λ–»κ²Œ λ§ˆν¬μ—…ν•˜λŠ”μ§€ λΉ„κ΅ν•˜κ³ , 각각의 μž₯단점을 λΆ„μ„ν•©λ‹ˆλ‹€.

About

πŸ› οΈ Learning UI markup patterns for better accessibility

Resources

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published