1) 접근성은 초반 기획의 산출물입니다

• 접근성은 처음 기획 단계에서 어떤 정보를 제공할지를 정의하는 일입니다. 이는 **사용자 중심 디자인(UXD)**의 또 다른 관점입니다.
• "어떻게 보일지"(심미성, UI)와 "무엇을 전달할지"(정보 구조, IA)를 함께 설계하면 WCAG의 POUR 원칙 전체를 실천하게 됩니다.

POUR 요약

• Perceivable(지각 가능): 대체 텍스트, 명확한 레이블, 충분한 색 대비로 정보를 보이게/들리게 합니다.
• Operable(조작 가능): 키보드만으로도 모든 조작이 가능해야 하며, 포커스 흐름과 단축키 규칙을 제공합니다.
• Understandable(이해 가능): 역할/상태/값이 예측 가능하고 일관되어야 하며, 오류는 명확히 안내합니다.
• Robust(견고성): 다양한 보조기기·브라우저에서 접근성 트리가 안정적으로 해석되도록 HTML‑First + 필요한 최소 ARIA로 구성합니다.

2) 접근성 준수 전략(요약)

1. HTML‑First: 네이티브 요소를 먼저 사용합니다. 클릭은 <button>, 입력은 <input>, 목록은 <ul>/<ol>.
2. 필요 최소 ARIA: 네이티브로 표현되지 않는 역할/상태/관계만 ARIA로 보강합니다.
3. 상태를 속성으로 노출: 펼침/선택 등을 aria-*로 노출하고, CSS는 속성 선택자로 조건부 스타일링합니다.
4. 키보드 규칙 문서화: 탭 시퀀스, 화살표 이동, Enter/Escape 동작을 명시합니다.
5. 테스트는 접근성 중심 쿼리: getByRole, getByLabelText 등으로 사용자/스크린리더 관점의 테스트를 작성합니다.

3) WAI‑ARIA 핵심 정리(역할/상태/속성)

• 역할(Role): button, switch, dialog, combobox, listbox, option, tablist/tab/tabpanel, menu/menuitem 등.
  • 예: 시각적으로 스위치라면 <input type="checkbox" role="switch" aria-checked="true|false"> 권장.
• 상태(State): aria-expanded, aria-selected, aria-pressed, aria-checked, aria-hidden, aria-invalid, aria-busy, aria-current 등.
• 속성(Property): 관계와 이름/설명 연결.
  • aria-labelledby(접근성 이름), aria-describedby(접근성 설명)
  • aria-controls(제어↔대상 연결, 토글 버튼→팝업)
  • aria-activedescendant(포커스는 입력에 두고, 활성 하위 항목 id를 가리킴)