(웹 접근성) 텍스트를 스크린리더로 부터 숨기기

---

💬 들어가며

프로젝트가 끝난 후 슬비쌤이 해주신 피드백을 통해 접근성에 대해 되돌아보고 있다.

 

생각보다 접근성에 대해 놓친부분이 많아서... 수정을 하던 중 공유하고 싶은 부분을 적어보려 한다.

 

 

 

❓ 문제 상황

스크린 리더가 페이지를 읽을 때, 괄호, 꺽쇠등을 모두 읽어내며 스크린리더를 이용하는 사용자에게는 필요하지 않은정보를 제공하기 때문에 그 부분을 수정해야 했다. 

 

해당 페이지는 React프로젝트를 진행했던 우동집의 About Us 페이지 이다.

 

about us 페이지

 

💡 문제 해결

캐릭터 이미지를 "캐릭터 이미지" 그자체로 읽어내주는 정보가 필요하지 않다는 느낌이 들어 img 태그의 alt=""를 공백으로 뒀다. 

 

또한 const 나 let등 스크린리더로 읽어주는게 필수 요소가 아닌 부분은 읽어주지 않는게 낫고 또한,

 

< Link to ... 등 스크린리더가 읽으면 안되는 부분을 읽지 않게하고, 숨김처리로 스크린리더를 위한 설명을 적어줬다.

 

<h3 className="sr-only">{name}의 깃허브로 이동</h3>

 

< Link to... 등 태그들은 모두 aria-hidden 으로 숨김처리를 하고, 위의 코드를 이용하여 스크린리더를 위한 h3 제목을 붙여줬다.

 

 

 

📚 마치며

      <span className="text-white " aria-hidden="true">
        {"<"}
      </span>
      <span className="text-teal-300 " aria-hidden="true">
        Link{" "}
      </span>
      <span className="text-[#57F984] " aria-hidden="true">
        to
      </span>
      <span className="text-[#F97AA9] " aria-hidden="true">
        =
      </span>
      <span className="text-teal-300 " aria-hidden="true">
        {"{"}
      </span>
      <span className="text-white " aria-hidden="true">
        github
      </span>
      <span className="text-teal-300 " aria-hidden="true">
        {"}"}
      </span>
      <span className="text-white " aria-hidden="true">
        {"/>"}
      </span>

 

위의 코드들 처럼 스크린리더가 읽지 않아야하는 부분은 

 

aria-hidden="true"

 

을 이용하여 텍스트는 화면에 보이고, 스크린리더는 읽지 못하도록 설정하였다.

 

 

 

 

🔗 참고

https://yceffort.kr/2021/03/hiding-contents-with-html-and-css

Home