혼자 개인 프로젝트 페이지를 만들어 가면서 간과 하고 있었던것이 있다
바로 '스크린 리더' 와 키보드 조작
분명 나와 대부분은 아주 행복하게도 별 다른 장애없이 잘 태어났지만
그렇지 않은 사람들도 있고, 후천적 혹은 사고로 인해서 장애를 가지게 되는 사람이 있다
물론 내가 만들고 있는 첫 개인 프로젝트인 브루잉 가이드 라는 홈페이지는 장애인을 위한 홈페이지는 아니다
왜냐하면 장애인은 핸드드립 커피를 추출하기가 정말 어렵기 때문이다
하지만 내가 가고자 하는 회사는 분명 장애인을 위한 시스템을 구축하길 원할것이다(카페에 장애인 바리스타분들을 쓰시는걸 보면)
그래서 숨김 컨텐츠에 대해서 써보겠다
컨텐츠를 숨기는 방법 10가지
1. .sr-only
<h2 class="sr-only">Hello World</h2>.sr-only {}자세한 속성들은 노션에 따로 정리할것이다
이 속성은 페이지에서 안보이는것이 가능하지만, 스크린 리더에선 읽는것이 가능하다
따라오는 속성중에 clip-path라는 속성이 있는데 이것도 따로 정리할것
2. aria-hidden="true"
이 속성은 스크린 리더에선 안읽히지만 시각적으로는 보이게 하는 스타일이다
이게 무슨말이냐면
예를들어서 내가 footer의 디자인을 |홈|참조|관련
이런식으로 만들었다고 가정하자
그때 스크린리더는 홈 참조 관련은 읽어주지만 | 이런 특수기호는 읽지 않는다
하지만 탭을 눌러서 움직인다고 했을때 하나하나 선택이 되는 참사가 일어날수있으니 주의하자
3. display: none;, hidden;
아예 안보이게 없애버리는 방법. 접근성의 측면에선 안쓰는게 좋을듯하다
4. visibility :hidden
접근성 방면에선 display:none과 같다 차이점은 visibility는 공간이 남게 되는것
5. opacity:0, clip-path: circle(0)
이 두 기술은 따로 정리해서 업로드를 하겠다
6. transform: scale(0)
시각적으로만 엘리먼트를 감추는 방법 중 하나
하루에 하나씩 연구해서 어떤걸 쓰는게 좋은 지 알아보려고 한다
