토스의 접근성 문서 A11y Fundamentals 을 소개합니다 (오픈 기념 이벤트 ~9/10)
강민우 토스 · 토스 기술 블로그
AI 핵심 요약
토스는 접근성을 어디서부터 적용할지 막막한 개발자를 위해 실무에서 자주 발생하는 오류와 핵심 원칙을 담은 A11y Fundamentals 문서를 공개했다. 문서는 시맨틱 HTML과 역할·레이블·대체 텍스트를 활용해 스크린리더와 키보드 사용자를 지원하고, 버튼 중첩이나 클릭 이벤트만 있는 div 같은 패턴을 피하도록 안내한다. 올바른 마크업은 링크와 폼의 기본 동작을 보장할 뿐 아니라 Testing Library의 getByRole을 활용한 견고한 테스트에도 도움이 된다. 접근성은 특정 사용자만을 위한 별도 기능이 아니라 모두의 웹 경험과 코드 유지보수성을 높이는 기본 원칙이라는 점을 강조한다.
- 클릭 이벤트만 붙인 div 대신 목적에 맞는 button, a, form 요소를 사용하면 키보드 조작과 브라우저 기본 동작을 지원할 수 있다.
- 스크린리더 사용자를 위해 인터랙티브 요소의 역할과 이름을 명확히 하고, 이미지에는 적절한 대체 텍스트를 제공한다.
- 중첩 버튼처럼 의미와 구조가 충돌하는 마크업을 피하고, 요소의 역할과 실제 동작을 일치시킨다.
- Testing Library에서는 구조에 의존하는 선택자나 테스트 전용 ID보다 getByRole로 요소를 찾으면 사용자 관점의 테스트를 작성하기 쉽다.
소개
'접근성은 어려운 것' 이라고 느끼는 분들을 위해 실무에서 바로 적용할 수 있는 접근성의 핵심 개념과 실수하기 쉬운 패턴을 알려주는 문서, A11y Fundamentals 을 소개합니다.
비슷한 학습 자료
컨퍼런스 SLASH
토스ㅣSLASH 23 - 누구나 쓸 수 있는 접근성 높은 토스 만들기
컨퍼런스 SLASH
디지털화로 더 편리해진 금융, 과연 모두에게 편리해졌을까요? 모두가 평등하게, 쉽고 편리한 금융 경험을 할 수 있도록 ‘접근성’을 높인 토스의 노력을 소개합니다. 최동근 / 토스 Andriod Developer 발표 자료 👉🏻 https://bit.ly/42xGdvd 토스 개발자 컨퍼런스 SLASH에 대한 자세한 정보는 👉🏻 https://bit.ly/43kW3tO 컨퍼런스 및 세션에 대한 문의는 👉🏻 slash@toss.im 토스에 합류하고 싶다면 👉🏻 https://toss.im/career/jobs #디자인시스템 #접근성 #androiddeveloper #토스 #개발자컨퍼런스 #SLASH *본 발표자료의 저작권은 연사에 있으며, 저작권자의 사전 서면 동의 없이 자료의 일부 또는 전부를 이용하거나 배포할 수 없습니다. *또한 해당 자료를 복제하여 SLASH 행사 홈페이지를 제외한 온라인상에 게재하는 행위는 연사가 동의한 저작권 및 배포전송권에 위배됩...
모바일 앱 개발 UI/UX
문서 황수재
드래그 앤 드롭은 사실 편한 UX가 아니다?
문서 김자유
토스의 8가지 라이팅 원칙들
문서 김자유
가이드라인을 시스템으로 만드는 법
컨퍼런스 FEConf 2025 B트랙
FEConf 2025 [B3] 중요하지만 긴급하지 않은 일, 그럼에도 계획해야 하는 웹 접근성
컨퍼런스 FEConf 2025 B트랙
FEConf 2025 2025.8.23 11:00 ~ 17:40 세종대학교 광개토관 컨벤션센터 TRACK B-3 중요하지만 긴급하지 않은 일, 그럼에도 계획해야 하는 웹 접근성 김무훈 | A11YKR 커뮤니티 모든 사람을 위한 웹 접근성 지원과 설계, 제대로 알아봅시다. 웹 프런트엔드 서비스에서 접근성 지원은 여전히 제도적으로 의무화된 항공사 웹 서비스와 정부/공공기관 외에 모범 사례가 흔치 않고, 확실한 정답이 정해져 있지 않은 분야입니다. - 혹시 웹 접근성이 장애 사용자만을 위한 특수한 경험이라고 오해하고 계신가요? 웹의 본연의 힘은 보편성에 있습니다. 장애와 관계없이 모든 사람의 콘텐츠 접근은 필수적이라고 생각합니다. - 웹 접근성을 지원하기 위한 UI 컴포넌트 설계에 막연함을 느끼시나요? 웹 접근성 표준을 준수하면서, 일관된 UI 제어 경험을 어떻게 설계할 수 있는지 제가 고려했던 사항을 소개합니다. 따라서 아래 명제에 대한 발표자의 생각이 궁금하시면 꼭 보러 와주세...
프론트엔드 UI/UX