[TIL] 웹 접근성을 위한 텍스트 숨김 처리

h1에 텍스트 마크업은 하지만 화면에는 보이지 않고, 스크린리더에서만 읽을 수 있게 스타일링하고,
화면에는 텍스트 대신 이미지를 배경으로 설정하여야 한다.

이렇게 구현해야 되는 이유를 정확히는 모르겠지만, 아마도 스크린리더로 웹 접근성을 준수하고 싶지만,
화면에는 이미 만들어진 svg를 넣어주는 것이 더 효율적이라는 생각 때문인 것 같다.

이미지를 넣고 스타일링으로 디테일을 잡아주는 부분들은 수월했지만, 막상 텍스트를 없애려니 어떻게 없애는 것이 좋은 방법일지 모르겠어서 찾아보니, 생각보다 많은 사람들이 "웹 접근성을 위한 텍스트 숨김 처리"를 고민하고 있었구나..!!

기존의 마크업, 스타일링과 스크린

---

시도해본 방법들

1. display: none 혹은 visibility: hidden

보통 제일 생각해보기 쉬운 게 display: none을 사용하는 것인데, 그렇게 하면 접근성에 안 좋을 뿐만 아니라, 나의 경우에는 배경 이미지가 사라진다.

2. font-size : 0 / line-height : 0 / width: 0px, height: 0px;

font-size의 경우에는 배경 이미지 + 텍스트 모두 사라짐
line-height와 width: 0, height: 0의 경우에는 배경 이미지는 사라지고, 텍스트만 남는다.

3. text-indent: 1000000px;

이 방법은 텍스트를 화면 밖으로 밀어서 안 보이게 하는 방법인데, 여러 개발자들이 사용하는 방법이라 한다.
하지만, form 또는 link 요소에 사용할 경우에는 포커싱 되었을 때 해당 태그가 스크린 밖에 위치해있기 때문에 정확한 표시를 할 수 없고, 오른쪽에서 왼쪽으로 언어를 읽는 국가일 경우에는 문제가 될 수 있다.
나는 지금 해당사항이 없기에 나의 경우에는 사용해볼 수도 있을 것 같다.

4. color: transparent;

이 방법도 제대로 잘 작동한다. 스크린리더도 제대로 작동할 것 같은데, 정보가 많이 없어서 확신을 할 수 없다.
해당 부분은 조금 더 찾아봐야 할 것 같다.

---

결과적으로 사용한 방법

 

많은 개발자들이 해당 방법으로 사용하는 것 같다.
또한 내가 받은 과제의 초기 파일에 왼쪽의 코드와 똑같은 코드가 있었다..!
처음에는 이게 뭔지 모르고 그냥 스킵했는데....
역시 아는 만큼 보인다는 게 딱 맞는 말이다.

스크린리더는 0을 읽지 못하므로, 최소한의 너비와 높이를 가질 수 있게 스타일링해야 하고, clip 속성은 position 값이 absolute나 fixed일 때만 사용 가능하다.

하지만 어찌 된 지 적용하려 하면, 텍스트와 배경 이미지 둘 다 사라진다ㅠ
텍스트가 사라지는 것은 좋은데, 배경 이미지까지 사라져서... 나는 이 방법을 사용 못 하는 줄 알고, 그냥 위의 3, 4번을 사용하려 했었다. 빠른 포기는 나빠요
하지만, 구조를 조금 바꿔보니 제대로 잘 작동했고 HTML 문법 검사에서도 오류 없이 제대로 작동하였으므로 굿굿!

기존의 마크업, 스타일링, 스크린

수정한 마크업, 스타일링, 스크린

 

---

부가적으로 수정한 부분

최신 버전인 clip-path를 추가하였고,
기존의 position부분의 absolute는 해당 콘텐츠를 block속성으로 바꿔버리는 특성이 있기에, 
inline 요소를 숨김 처리할 때에는 position 값을 걷어내고, display 속성을 조절해주어야 한다.

---

https://nm817.tistory.com/42

[css 활용] 텍스트/컨텐츠 숨김처리

https://velog.io/@ursr0706/%EC%9B%B9-%EC%A0%91%EA%B7%BC%EC%84%B1%EC%9D%84-%EA%B3%A0%EB%A0%A4%ED%95%98%EC%97%AC-%ED%85%8D%EC%8A%A4%ED%8A%B8-%EC%88%A8%EA%B8%B0%EA%B8%B0

웹 접근성을 고려하여 텍스트 숨기기