토스의 접근성 문서 A11y Fundamentals 을 소개합니다 (오픈 기념 이벤트 ~9/10)

토스는 접근성을 어디서부터 적용할지 막막한 개발자를 위해 실무에서 자주 발생하는 오류와 핵심 원칙을 담은 A11y Fundamentals 문서를 공개했다. 문서는 시맨틱 HTML과 역할·레이블·대체 텍스트를 활용해 스크린리더와 키보드 사용자를 지원하고, 버튼 중첩이나 클릭 이벤트만 있는 div 같은 패턴을 피하도록 안내한다. 올바른 마크업은 링크와 폼의 기본 동작을 보장할 뿐 아니라 Testing Library의 getByRole을 활용한 견고한 테스트에도 도움이 된다. 접근성은 특정 사용자만을 위한 별도 기능이 아니라 모두의 웹 경험과 코드 유지보수성을 높이는 기본 원칙이라는 점을 강조한다.

• 클릭 이벤트만 붙인 div 대신 목적에 맞는 button, a, form 요소를 사용하면 키보드 조작과 브라우저 기본 동작을 지원할 수 있다.
• 스크린리더 사용자를 위해 인터랙티브 요소의 역할과 이름을 명확히 하고, 이미지에는 적절한 대체 텍스트를 제공한다.
• 중첩 버튼처럼 의미와 구조가 충돌하는 마크업을 피하고, 요소의 역할과 실제 동작을 일치시킨다.
• Testing Library에서는 구조에 의존하는 선택자나 테스트 전용 ID보다 getByRole로 요소를 찾으면 사용자 관점의 테스트를 작성하기 쉽다.