From 3cfe3649e49484561dba17a3085ef7f16325d87b Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=EA=B9=80=EC=8A=B9=ED=98=84?= Date: Sun, 18 Aug 2024 17:12:22 +0900 Subject: [PATCH] =?UTF-8?q?Update=202024-08-07-=EC=9B=B9=EC=A0=91=EA=B7=BC?= =?UTF-8?q?=EC=84=B1.md?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- ...71\354\240\221\352\267\274\354\204\261.md" | 46 +++++++++++++++++++ 1 file changed, 46 insertions(+) diff --git "a/_posts/2024-08-07-\354\233\271\354\240\221\352\267\274\354\204\261.md" "b/_posts/2024-08-07-\354\233\271\354\240\221\352\267\274\354\204\261.md" index e69de29bb2d1..68df0e55025b 100644 --- "a/_posts/2024-08-07-\354\233\271\354\240\221\352\267\274\354\204\261.md" +++ "b/_posts/2024-08-07-\354\233\271\354\240\221\352\267\274\354\204\261.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 이므로 결국 보여지는 부분이 없음