아카이브사이트맵
© 2026 Rayon. All rights reserved.
DevDay
아티클랭킹스페이스채용
토스 favicon토스

토스, A11y Fundamentals 공개! 웹 접근성, 이제 시작하세요!

by DD
2025-08-13
11개월 전
조회수 4

토스가 A11y Fundamentals 문서를 공개하며 접근성의 중요성을 강조함

스크린 리더 사용자를 위한 웹 접근성 가이드라인 제시 및 실무 적용 방법 설명

HTML 구조, 역할(role), 레이블(label) 등 접근성 핵심 개념 소개

웹 접근성, 왜 지켜야 할까?

웹 접근성은 장애인과 비장애인 모두에게 긍정적인 영향을 준다. 구체적으로 스크린 리더 사용자는 웹사이트 이용에 필요한 정보를 얻을 수 있다. 따라서 HTML 구조 개선을 통해 모든 사용자에게 향상된 웹 경험을 제공한다.

ByRole vs. querySelector: 테스트 코드의 차이

ByRole을 사용하면 실제 사용자와 유사하게 요소를 선택할 수 있다. 반면, querySelector는 마크업 구조 변경에 취약하다. 결과적으로 테스트 코드 유지보수성을 높이고, 접근성을 고려한 코드를 작성하도록 유도한다.

접근성 향상을 위한 실천 가이드

접근성을 높이기 위해 구조 명확화, 의미 전달, 예상 가능한 동작을 구현해야 한다. 구체적으로 버튼 안에 버튼을 넣지 않고, 이미지에 대체 텍스트(alt)를 제공해야 한다. 따라서 웹 접근성을 준수하여 모든 사용자에게 동등한 정보 접근성을 보장해야 한다.

토스의 접근성 문서 A11y Fundamentals 을 소개합니다 (오픈 기념 이벤트 ~9/10)
중급
트렌드
HTML
Accessibility
Frontend
원문 읽기
원문 읽기

댓글 0

첫 번째 댓글을 남겨보세요!

관련 추천 글

HTML, 더 쉽게 쓰는 방법: Pidgin HTML

레딧 로고

HTML 우선 웹사이트, 사용자 경험을 혁신하다!

해커뉴스 로고

HTML 우선 접근으로 사용자 2배 증가!

랍스타즈 로고

HTML 스트리밍 API, 웹 페이지 렌더링 성능을 혁신하다!

랍스타즈 로고

HTML 리스트, 기본부터 실전 팁까지!

해커뉴스 로고

HTML 페이지 기반 웹 개발, 다시 주목받는 이유?

레딧 로고
토스 favicon토스
중급
트렌드
HTML
Accessibility
Frontend

관련 추천 글

HTML, 더 쉽게 쓰는 방법: Pidgin HTML

레딧 로고

HTML 우선 웹사이트, 사용자 경험을 혁신하다!

해커뉴스 로고

HTML 우선 접근으로 사용자 2배 증가!

랍스타즈 로고