Update 2024-08-07-웹접근성.md

_posts/2024-08-07-웹접근성.md

@@ -0,0 +1,46 @@
+---
+layout: single
+title:  "[웹접근성] 웹접근성 - 대체텍스트
+categories: 웹접근성
+tag: [웹접근성]
+toc: true
+author_profile: false
+sidebar:
+    nav: "docs"
+search: true   # 검색설정
+---
+
+웹접근성 갱신심사에서 부적격이 나왔다. 다른 부분은 모두 간단한 수정사항이지만
+대체텍스트 관련해서 난해한 부분이 있었다.
+보험금 청구서 양식 팩스/이메일 서비스인데 해당 팩스 내용에 대해서 제공하는 미리보기 이미지에 대해서 대체텍스트가 없다는 심사결과다.
+
+현재 해당 미리보기 이미지는 총 4페이지로 구성되어 있으며 버튼을 통해 페이지 변환을 실행하고 있다.
+
+해당 이미지들에 각각 alt 속성으로 '보험금 청구서 ~~번째 이미지'라고 작성되어 있다.
+
+물론 대체텍스트라는것 자체가 이미지에 대해서 상세한 설명이 필요한 부분이지만
+
+이 이미지는 미리보기 이미지인데도 불구하고 웹접근성 심사 담당자와 통화했을 때 이미지에 들어간 모든 텍스트가 대체텍스트로 필요하다고 한다.
+
+총 4페이지 분량의 청구서 양식 이미지에 대해서 대체텍스트를 제공하려면 alt속성이 아닌 마크업 언어를 통해 제공해야 할 필요성을 느꼈다.
+
+물론 이 방법을 사용했을 때 본문 내용의 소스코드보다 대체텍스트의 소스코드가 훨씬 많아지게 되는 문제가 있다.
+
+마크업 언어로 대체텍스트 사용 시 기억해야 할 사항
+
+- sr-only class
+
+화면엔 보이지 않아야 하는데 hidden으로 숨기거나 visible로 컨트롤하려하면 스크린리더기에 인식이 안됨.
+
+```html
+class = 'sr-only'
+```
+
+position: absolute; → 위치를 지정함. 위로 붕 뜬 상태가 되어 뒤에 오는 요소들의 자리를 차지하지 않게 됨
+width: 1px; → 가로크기
+height: 1px; → 세로크기
+overflow: hidden; → 현재 크기 이상의 영역은 모두 감춤
+padding: 0; → 부풀리는 영역을 없앰
+margin: -1px; → 벌리는 영역을 오히려 더 좁힘
+border: 0; → 테두리를 없앰
+clip: rect(0,0,0,0); → 보여지게 하는 부분을 설정하는 것인데, 모든 값이 0 이므로 결국 보여지는 부분이 없음