[CSS] 웹 접근성을 고려한 .blind .hidden 처리

스크린리더와 브라우저별, 그리고 매해 업데이트 되는 내용들 때문에 여간 웹 접근성을 지키며 블라인드 처리하기가 쉽지 않다. 그래서 '이 방법 으로 해결될 수 있습니다~' 라는 방법은 아직 없다고 봐야 한다. 이 글에서 잘못 쓰이고 있는 blind 처리 방법들과, 해외의 훌륭하신 분들이 다수의 리딩 테스트를 거쳐 공개한 코드들을 소개한다.  대체 텍스트(숨긴 텍스트)는 언제 사용할까?화면상에는 나타나지 않지만 구조성 숨겨진 제목을 넣어줘야 하는 경우디자인상 아이콘을 사용하면서 적절한 대체 텍스트(숨긴 텍스트)를 제공해줘야 하는 경우 잘못된 방법1. 화면상 영역을 지니지 않게 하는 방법.hidden{display:none;}// 또는.hidden{visibility:hidden;}우선, 기본적으로 displ..

2023.02.24