zoom & swipe image Viewer: 과도한 음성 텍스트 정리하기

문제 배경

웹 접근성을 충족시키기 위한 프로젝트 중

직접 스크린리더를 사용해보았습니다.

처음에는 크롬에서 제공하는 것을 사용하려고 했는데 지원이 중단된 상태이고 그래서 엣지 브라우저에서 시도해 봤는데 예상처럼 동작하지 않았습니다.

조사해보니 스크린리더를 따로 사용하는 것을 알게되어 무료 스크린 리더인 nvda를 사용했습니다.

 

<해결하기 전 스크린 리더 음성>

대본: 확장됨 썸네일 갤러리 대화상자 썸네일 보기 닫기 버튼 썸네일 갤러리 버튼 썸네일 보기 닫기 1 슬레쉬 60 이미지 썸네일 목록 목록 버튼 이미지 1 

 

테스트하던 도중 썸네일 버튼을 열어봤는데  출력되는 소리가 중복되는 구간이 있어 너무 길어 듣기가 좋지 않았습니다.

비장애인인 나도 듣기가 굉장히 불편한데 이소리에 의지해야하는 장애인 분들은 얼마나 불편할까 생각이 들었습니다.

 

문제 원인

<section role="dialog" >

문제 원인은 role= dialog였습니다. 

해당 속성을 사용하니 dialog에 해당하는 영역 전체에 있는 버튼들을 읽어내는 것이었습니다.

사용자에게 더 나은 접근성을 주기 위한 선택이 오히려 사용자에게 불편한 경험을 만들어내는 것이었습니다.

 

해결

<해결한 이후 스크린 리더 음성>

대본: 확장된 썸네일 갤러리 영역 닫기 버튼

 

문제의 원인을 제거하고 명확한 메시지를 전달하게 만들었습니다.

 

느낀점

직접 테스트해보지 않았으면 느끼지 못할 점을 느껴서 좋았고

아무리 좋은 의도를 가진 코드라도 과하게 적용되면 오히려 불편을 줄 수 있다는 것을 배웠습니다.

 

추가적인 공부

• tab-index={0}를 모든 button에다가 적었는데 버튼이면 dafault로 포커스가 되기 때문에 특별히 우선순위를 높인다거나(이 방법보단 로직의 순서를 바꿔 적용하는게 더 나은 판단) tab-index={-1}을 해서 포커스 되는걸 막는 상황이 아니면 안쓰는게 좋다고 합니다.

 

 

 

링크

nvda 다운로드: https://www.nvaccess.org/download/