아이콘의 크기, 색상, 정렬과 접근 가능한 이름을 다룹니다.
아이콘은 이미지, SVG, 아이콘 폰트로 제공할 수 있으며 color와 currentColor를 쓰면 주변 텍스트 색을 따릅니다. 의미 있는 단독 아이콘 버튼에는 aria-label이 필요합니다.
버튼은 display: inline-grid와 place-items: center로 별 문자를 44px 정사각형 한가운데에 놓습니다. padding: 0은 실습 기본 스타일이 버튼에 준 10px 14px 여백을 지워 44px 칸 전체가 별을 담는 공간이 되게 합니다. 별을 감싼 span은 aria-hidden 값이 true라서, 화면 읽기 프로그램은 기호 이름 대신 aria-label의 즐겨찾기만 버튼 이름으로 읽습니다.
즐겨찾기처럼 켜고 끄는 버튼이라면 aria-pressed에 true나 false를 넣어 현재 상태도 함께 알려야 합니다. 이때 aria-label은 즐겨찾기로 그대로 두고 상태에 따라 이름을 바꾸지 않아야, 화면 읽기 프로그램이 이름과 눌림 상태를 따로 정확히 읽어 줍니다.
아이콘 모양만 있고 이름이 없으면 화면 읽기 사용자가 버튼 기능을 알 수 없습니다.
직접 바꿔보세요아이콘 크기와 버튼의 aria-label을 바꿔보세요.