중요하지만 긴급하지 않은 일, 그럼에도 계획해야 하는 웹 접근성

1. 개요

멤버십 앱을 개발하면서 웹 접근성은 반드시 고려해야 할 요소라는 생각이 들어 강연을 듣게 되었다.

---

2. 웹 접근성이란?

• 누구나 동등하게 상호작용할 수 있도록 제품을 설계·구현하는 것.

• 사용자 중심 디자인의 또 다른 관점이며, 보안만큼이나 중요하다.

예시:
열차 조회 서비스의 경우 예쁜 디자인보다 잘 보이는 UI가 중요하다.
리뉴얼 후 디자인이 세련되어도, 접근성이 떨어지면 오히려 사용하기 불편하다.

---

3. 접근성의 4대 원칙 (POUR)

1. 인지(Perceivable)

   • 대체 텍스트, 자막, 적은 모션, 고배율/고대비 모드 지원

2. 조작(Operable)

   • 키보드/터치 스크린 등 다양한 입력 방식 지원

3. 이해(Understandable)

   • 예측 가능한 상호작용, 일관성 있는 UI

4. 견고함(Robust)

   • 다양한 보조기기와 환경에서 제약 없이 사용 가능

---

4. 접근성 준수 방법

• 시멘틱 마크업만 잘해도 기본적인 접근성이 보장된다.

• 커스텀 UI 구현 시에는 WAI-ARIA 속성을 적절히 활용해야 한다.

WAI-ARIA란?

• 장애가 있는 사용자도 일반 사용자와 동등한 경험을 할 수 있도록 보조 속성을 제공하는 표준.

• 시멘틱 태그는 이미 고유한 역할을 갖고 있지만, 없는 경우에는 별도의 role 속성을 지정해야 한다.

---

5. ARIA 속성 활용

• 상태 속성: HTML에 없는 상태를 표현 (aria-expanded, aria-checked 등)

• 관계 속성: 요소 간 연결 (aria-labelledby, aria-describedby)

• 동작 속성: 알림·구조 제공 (aria-live, aria-hidden 등)

👉 접근성 작업은 리소스가 많이 들지만,
👉 처음부터 파이프라인에 포함시키는 것이 가장 효율적이다.
👉 놓쳤다가 나중에 일괄 적용하려면 훨씬 더 힘들다.

주의: class 이름에 의미를 담는 것은 접근성 보장과 무관하다.

---

6. Headless UI & 테스트

• Headless UI 라이브러리를 활용하면, 하나하나 직접 지정하지 않아도 기본적인 접근성 지원을 쉽게 얻을 수 있다.

• E2E 테스트 시에도 ARIA를 적극 활용할 수 있다.

  • 기존에는 getByRole 정도만 사용했다면,

  • **접근성 트리(Accessibility Tree)**를 이용하면 더 정밀하고 편리한 테스트가 가능하다.

---

7. 한계

• ARIA 속성은 모든 브라우저에서 완벽히 표준화되어 있지 않다는 점에 유의해야 한다.

---

8. 강연 소감

• 전반적으로 강사의 전달력이 부족해 이해하기 어려웠음.

• 내용은 유익했지만 아쉬움이 남았다.