나는 지금 하고 있는 프로젝트에서 "접근성"을 잘 생각해서 하고 있나?
마크업을 할 당시 키보드 조작을 해가며 접근성에 신경을 쓰려 했지만 어느샌가 기능 구현에 온 힘을 쏟고 있는 나를 발견했다.
당장에 복잡한(내 기준) 구조를 풀어내기 바빠 계획했던 접근성에 대한 동작들이 제대로 이루어지지 않는 것 같다는 것을 알고 있었지만 그 죄책감은 잠시 뒤로 미뤄둔채 며칠 동안 새끼치듯 자라나는 버그들을 쳐내기 바빴다.
그러다 오늘 문득 "접근성" 그 단어가 박히듯 다가온 순간이 있는데, 스터디원 한 명이 공유한 면접 질문들 중에 유독 눈에 띄는 질문이 있었다.
Q. 시각적으로 보이지 않고 스크린 리더에서만 가능하게 하는 방법에 관해 설명 하시오
'엇.. hidden처리였나.. display:none 하면 안 됐던 것 같은데..' 라는 생각은 단 몇초도 지나지 않아 "아..??? 내 프로젝트에서 display:none 쓰는데???........." 로 이어졌다.
display:none을 쓰게 되면 아예 없는 정보가 되어 스크린리더기에 관련 정보가 전달되지 않는 문제가 발생한다.
이걸 놓치고 있었다니
이전에 스크린리더 사용자를 위해 내가 기억하고 있는 방법은 hidden처리인데 이 보다 최선의 방법이 있을까? 검색해 보았다.
visibility:hidden
visibility: hidden
- 숨김처리가 되어있지만 자리를 차지하고 있음. 이 또한 사용자에게 정보를 전달하지 않겠다는 것이기 때문에 스크린리더에 정보 전달 안 됨
- 결론: 적합하지 않음
접근 가능한 숨김 방법
// BFC(Block Formatting Context)일 때
.hidden{
overflow: hidden;
border: 0;
position: absolute;
z-index: -1;
width: 1px;
height: 1px;
clip: rect(1px, 1px, 1px, 1px);
clip-path: inset(50%);
}
// IFC(Inline Formatting Context)일 때
.hidden{
overflow: hidden;
display: inline-block;
position: relative;
z-index: -1;
border: 0;
width: 1px;
height: 1px;
clip: rect(1px, 1px, 1px, 1px);
clip-path: inset(50%);
}💡 배운 점
https://mulder21c.github.io/2019/03/22/screen-hide-text/ 이 블로그는 예전에 데레사 강사님께서 알려주신 블로그인데 '나중에 다시 읽어봐야지'라는 오만함으로 여태껏 미뤄오다 필요에 의한 검색으로 다시 만나게 되었다. 하나의 포스팅에 얼마나 많은 고민과 연구가 있었는지 그리고 그 글들이 탄생할 수 있었던 이유를 마지막 부분에서 알 수 있었다.
"명심하자. 내가 아무 생각없이 그냥 쓴 결과가 결국 누군가를 배제하는 결과를 만들 수도 있고, 사이트의 품질을 떨어뜨릴 수도 있다. 반대로 내가 고민하는 만큼 누군가가 배제되지 않고, 사이트의 품질 역시 올라갈 수 있다."
위 블로그의 필자와 같은 생각으로(발끝에도 못 미치지만) 개발을 하고싶어 시작했는데 나는 어떠한 노력을 하고 있나라는 의문을 갖게 해준 고마운 블로그
또한 관련 글을 읽고 정리한 후 다시 내 포스팅을 처음부터 봤을 때 "접근성 = 스크린 리더기 대응" 정도로만 생각한 나의 무지가 드러난다.
이 포스팅에는 내가 검색한 키워드에 대한 하나의 정보가 아닌 여러가지 관련 지식들이 녹아 있다. 다음 접근성 관련 포스팅에서는 초심으로 돌아가 접근성의 본질부터 공부해봐야 겠다는 생각을 했다.
참고
https://mulder21c.github.io/2019/03/22/screen-hide-text/
https://velog.io/@chumil7432/CSSIR%EA%B8%B0%EB%B2%95
