이미지 압축 도구는 시각적인 미리보기가 중심이지만, 파일 선택과 다운로드는 키보드로도 끝까지 가능해야 합니다. 이 글은 img-compressor 같은 브라우저 파일 도구를 접근성 관점에서 점검하는 기준을 정리합니다.
파일 선택 영역은 버튼처럼 보여도 입력이어야 한다
드래그 앤 드롭 영역을 크게 만들면 사용자는 파일을 끌어다 놓을 수 있습니다. 하지만 키보드 사용자에게는 실제 input type="file"에 접근할 수 있어야 합니다. 시각적으로 커스텀 버튼을 만들더라도 라벨과 입력이 연결되어 있어야 하고, 포커스 상태가 보여야 합니다.
<label htmlFor="image-files">이미지 선택</label>
<input id="image-files" type="file" accept="image/*" multiple />입력을 완전히 숨기고 클릭 이벤트만 남기는 방식은 조심해야 합니다. 스크린리더가 어떤 파일을 선택해야 하는지 알 수 없거나, 키보드로 조작하기 어려울 수 있습니다.
처리 중 메시지는 상태 변화로 전달한다
이미지를 압축하는 동안 화면에는 진행 상태가 보입니다. 이 정보가 시각적으로만 보이면 보조기술 사용자는 작업이 시작됐는지 알기 어렵습니다. 진행 메시지 영역에 적절한 라이브 영역을 두거나, 버튼 상태와 텍스트를 함께 바꾸는 방식이 필요합니다.
예를 들어 “3개 중 2번째 파일 압축 중” 같은 문구는 단순한 장식이 아니라 상태 정보입니다. 이 문구가 버튼 근처에 있고, 중복 실행을 막는 비활성 상태가 함께 있으면 사용자가 현재 작업을 더 쉽게 이해할 수 있습니다.
아이콘만 있는 버튼은 이름이 필요하다
결과 카드에는 다운로드, 삭제, WebP 변환 같은 버튼이 들어갈 수 있습니다. 아이콘만 표시하는 버튼이라면 aria-label 또는 보이는 텍스트로 목적을 제공해야 합니다. 특히 여러 카드가 반복될 때는 “다운로드”만으로 부족할 수 있고, 파일명을 함께 포함하면 더 명확합니다.
<button aria-label="profile.png 압축 결과 다운로드">
다운로드
</button>접근성 점검 체크리스트
- 키보드만으로 파일 선택, 압축 실행, 다운로드, 삭제가 가능한지 확인합니다.
- 파일 입력의 라벨이 실제 입력과 연결되어 있는지 확인합니다.
- 처리 중 상태가 시각적 문구와 버튼 상태로 함께 드러나는지 확인합니다.
- 반복 카드의 버튼 이름이 서로 구분되는지 확인합니다.
- 오류 메시지가 색상만으로 전달되지 않는지 확인합니다.
이미지 미리보기의 대체 텍스트
압축 결과 미리보기는 장식에 가까울 수도 있고, 사용자가 결과를 확인하는 핵심 정보일 수도 있습니다. 파일명을 기반으로 대체 텍스트를 제공하면 어떤 파일의 미리보기인지 구분할 수 있습니다. 다만 압축 품질을 대체 텍스트로 설명할 수는 없으므로, 크기와 감소율 같은 수치는 별도 텍스트로 제공해야 합니다.
