버튼 설명 또는 alt text가 주어져야 합니다.

[xnuk]

본 repo에서는 Font Awesome이 기본적으로 aria-hidden="true"로 설정되어 있으며 이를 버튼에 사용하고 있으나, 화면 좌측의 사이드바의 버튼과 화면 상단의 실행 제어 버튼에는 버튼이 무슨 동작을 하는지에 대한 정보가 없습니다. 이 정보가 없는 경우,

• 설명 또는 툴팁이 없어 클릭하기 전 버튼이 무슨 일을 하는지 알 수 없고,
• 시각장애인은 이 버튼을 찾을 수 없게 됩니다.

Font Awesome에서도 아이콘이 단순 꾸미기 용도가 아니라 의미를 가지고 있거나 사용자와 상호작용하는 경우 아이콘이 나타내는 뜻을 적는 것을 권장하고 있습니다. 제가 제안드리는 해결책은 다음과 같습니다:

• 버튼의 div에 aria-label 또는 아이콘에 title 속성을 달아 버튼 설명을 추가합니다. 버튼 div 안쪽에 텍스트 노드를 달아 버튼 설명을 달고 CSS로 치우는 것도 좋습니다. 툴팁이 필요하면 별도로 처리합니다.
• 버튼을 div 대신 button 태그를 이용하고, button 태그에 title를 답니다.
• 기본적으로 아이콘 옆에 버튼 설명을 노출하여 보여주되, 화면 폭이 작은 디바이스에서는 이를 숨깁니다.