아이콘의 크기, 색상, 정렬과 접근 가능한 이름을 다룹니다.
아이콘은 이미지, SVG, 아이콘 폰트로 제공할 수 있으며 color와 currentColor를 쓰면 주변 텍스트 색을 따릅니다. 의미 있는 단독 아이콘 버튼에는 aria-label이 필요합니다.
이번 예제의 출발점은 svg { width: 1em; fill: currentColor; }입니다. 선택자가 고른 요소와 실제로 계산된 값을 개발자 도구에서 나란히 보면 선언이 적용되지 않은 이유를 빠르게 찾을 수 있습니다.
처음에는 예제를 그대로 확인한 다음 아이콘 크기와 버튼의 aria-label을 바꿔보세요. 한 번에 한 값만 바꾸고 좁은 화면, 키보드 포커스와 200% 확대에서도 내용이 사라지지 않는지 확인하세요.
아이콘 모양만 있고 이름이 없으면 화면 읽기 사용자가 버튼 기능을 알 수 없습니다.
직접 바꿔보세요아이콘 크기와 버튼의 aria-label을 바꿔보세요.