현재 페이지 위치

Home> 광장> 널리 블로그> 상세보기

목록이전 글 보기262/370다음 글 보기

추천하기
추천 횟수 :1
조회수
8,949
공유하기
페이스북으로 공유하기페이스북 공유 횟수 :0트위터로 공유하기트위터 공유 횟수 :0

스크린리더 사용자를 위한 IR(Image Replacement)기법과 추가 설명 제공하기

접근성

안녕하세요. 엔비전스입니다.

웹 접근성을 준수하기 위한 필수 사항 중 하나는 이미지에 대체 텍스트를 제공하는 것입니다. 보통 HTML의 요소를 사용할 경우 alt 속성으로 대체 텍스트를 제공합니다. 특히 링크나 버튼 등의 컨트롤 요소에 이미지가 있고, 대체 텍스트를 제공해야 한다면 alt 속성이 가장 적합하다고 할 수 있습니다.

그러나 어떤 웹페이지에서 안내문을 디자인상의 이유로 일반 텍스트가 아닌 이미지로 게시해야 하는 등의 상황이 있을 수 있습니다. 또는 웹 페이지를 개발할 때 스크린리더 사용자에게 특정 이미지에 대한 추가 설명을 제공해야 할 때도 있습니다. 이렇게 이미지를 볼 수 없는 사용자에게 대체된 텍스트를 제공하는 것을 IR(Image Replacement)라고 하는데요, 이번 글에서 잘못 사용되고 있는 IR 기법의 예와 올바른 IR기법의 예를 함께 살펴보도록 하겠습니다. 아울러 스크린리더 사용자에게 이미지가 아니더라도 추가 설명을 제공해야 할 때 사용할 수 있는 방법들도 살펴보도록 하겠습니다.

Visibility: hidden과 display: none은 올바른 IR기법이 아니다

IR 기법으로 잘못 사용되고 있는 대표적인 예가 CSS 스타일의 visibility: hidden과 display: none입니다. 이 두 요소는 화면에서 적용된 요소들을 보이지 않도록 하는 공통점을 가지고 있습니다. 때문에 스크린리더 사용자를 위한 텍스트를 제공할 때 사용되는 경우를 자주 발견합니다. 그러나 이 두 스타일 속성이 적용된 요소는 스크린리더에서도 읽지 않는 것을 원칙으로 합니다.

이유는 이렇습니다. 사용자의 조작에 따라 특정 HTML 콘텐츠를 화면에 보이게 하거나, 숨기는 기능을 프론트엔드에서 스크립트로 구현하는 상황을 가정합니다. 이 상황에서 많은 경우 화면에서 특정 콘텐츠를 숨길 때 범위에 따라 ‘display: none’과 ‘visibility: hidden’을 사용하게 됩니다. 그런데 만약 스크린리더가 이 두 스타일 속성이 적용된 요소를 무시하고 모두 출력한다면 어떻게 될까요? 당연하게도 사용자는 무엇이 현재 화면에 표시되는 콘텐츠인지 구별할 수 없을 것입니다. 다음 샘플 페이지에서 구체적으로 확인해 볼 수 있습니다.

visibility: hidden의 예

display: none의 예

Note

만약 센스리더를 사용해 테스트해 보신 분이라면 설정에 따라 visibility: hidden과 display: none이 적용된 요소를 읽을 수 있습니다. 센스리더는 기본적으로 ‘숨긴 내용 읽기’가 선택되어 있기 때문에 이 항목을 해제해 주어야 합니다. 웹브라우저를 실행한 상태에서 CTRL+Shift+F9 키로 가상 커서 설정을 엽니다. ‘설정’을 선택하고, 나타나는 항목에서 숨긴 내용 읽기를 해제합니다. 확인을 눌러 창을 종료합니다. CTRL+/(Slash)’ 키를 통해 해당 설정값을 토글 할 수도 있습니다. 다만 CTRL+/ 키를 눌러 숨긴 내용 읽기를 토글 할 경우 현재의 웹 브라우저를 종료하게 되면 저장된 원래 설정값으로 환원되므로 가상 커서 설정에서 해당 항목을 설정하고 저장하시기 바랍니다.



올바른 IR기법은 무엇이 있을까?

IR 기법에는 여러 가지 방법이 있습니다. 예를 들어 text-indent와 z-index를 활용한 방법이 있습니다. 그럼 대표적인 IR 기법과 특징을 아래에서 살펴보도록 하겠습니다.

Text-indent를 활용한 IR기법

Text-indent를 활용한 IR 기법은 가장 손쉽게 사용할 수 있는 방법입니다. 간단한 사용 방법은 text-indent 속성 값에 현재 사용되고 있는 디스플레이의 해상도보다 작은 음의 정수 값을 주는 것입니다. 이를테면 ‘span{text-indent: -9999’}와 같이 사용할 수 있습니다.

Text-indent 속성은 사용하기 간편하지만 단점이 있습니다. 만약 사용자의 단말기에 따라 이미지가 제대로 로드되지 않을 때 스크린리더 사용자가 아니라 하더라도 이미지를 설명하는 텍스트를 보고 콘텐츠의 내용을 확인해야 하지만 할 수 없다는 것입니다. 또한, 웹페이지에 text-indent 스타일 속성이 적용된 요소가 많을 때 컴퓨터가 웹페이지 로드 시 위치값을 그만큼 많이 계산해 하므로 성능에 저하를 불러올 수 있습니다.

CSS의 위치 속성과 overflow: hidden을 사용하는 방법

CSS의 위치를 지정하는 left/right와 position, 그리고 overflow: hidden을 사용하는 IR 기법은 원리상 text-indent와 유사합니다. 사용 방법은 텍스트가 있는 <span> 또는 <div> 등의 요소에 디스플레이 해상도 보다 훨씬 작은 음의 정수 값으로 위치를 부여한 다음, 높이와 너비를 1px 정도로 작게 설정합니다. 그다음 overflow: hidden과 position: absolute로 대체 텍스트를 화면에서 완전히 숨깁니다. 자세한 방법은 아래의 샘플을 참조하세요.

위치값을 이용한 IR기법 샘플

높이와 넓이를 0으로 설정하는 IR기법

이 방법은 대체 텍스트 글자가 들어가는 등의 요소의 높이와 너비를 0으로 지정하는 방법입니다. 먼저, 대체할 텍스트 요소에 BackGround 이미지를 설정한 다음 대체 텍스트가 포함되는 요소의 높이와 너비를 0으로 지정합니다.

z-index를 활용한 IR기법

z-index를 이용한 IR 기법 역시 크게 어렵지 않습니다. 이미지의 대체 텍스트에 z-index 속성 값을 음의 정수로 부여하는 방식입니다. 먼저 아래의 샘플을 확인해 보세요.

z-index 샘플

z-index로 IR 기법을 사용했을 때의 특징은 만약 브라우저에서 CSS를 끄거나, 어떠한 이유로 웹 페이지에 적용된 CSS가 정상적으로 로드되지 않을 때 숨겨진 텍스트가 화면에 출력됩니다. 또한, position 속성을 사용하기 때문에 디바이스의 사양에 따라 성능에 영향을 줄 수 있습니다.

참고

Bootstrap 프레임워크를 사용하여 웹페이지를 개발할 경우 Bootstrap에는 sr-only라는 클래스가 정의되어 있습니다. 해당 프레임워크에서 IR 기법을 사용할 때 이 클래스를 유용하게 사용할 수 있습니다.



웹 페이지에서 스크린리더 사용자를 위한 추가 정보 제공하기

웹 페이지의 컨트롤 특성에 따라 스크린리더 사용자에게 추가 설명이 필요한 경우가 있습니다. 가장 간단한 예를 찾아보자면 국내에서 널리 접근성 기준으로 사용되고 있는 KWCAG의 지침 중 새창이 열릴 때 이것을 사용자에게 알려야 한다는 것이 좋은 예입니다. 보통 스크린리더 사용자가 특정 링크를 눌렀을 때 해당 링크에 연결된 페이지가 새창으로 열린다는 정보를 주기 위해 title 속성을 사용합니다. 그밖에 사용자에게 특정 행동을 지시하는 용도로도 title 속성을 사용하는데요 title 속성이 과연 스크린리더 사용자에게 보편적으로 적당한지 생각해 볼 필요가 있습니다.

Title 무엇이 문제인가?

Title 속성으로 스크린리더 사용자에게 추가 설명을 제공하는 것의 문제는 스크린리더 대부분이 폼 요소를 제외한 링크 등의 컨트롤에 적용된 title 속성을 무시한다는 것입니다. 아울러 title 속성은 국내 웹 접근성 지침과는 달리 WEBAIM은 폼 요소 등으로 제한하여 사용할 것을 권고하고 있습니다.

현재 요소와 관계없이 기본적으로 적용된 title 속성을 출력하는 스크린리더는 국내의 센스리더가 거의 유일하다고 할 수 있습니다. 물론 JAWS는 사용자의 설정에 따라 title을 출력하도록 설정할 수 있습니다. 그러나 JAWS 역시 기본적으로 title을 출력하지 않는 것은 NVDA 등의 스크린리더와 같습니다.

Title의 대안, ARIA-label

만약 title 속성을 대체하려면 현재 가장 적합한 방식은 ARIA-label 이라 할 수 있습니다. 다만 ARIA-label을 사용할 때는 title 처럼 추가 설명만을 속성 값에 넣으면 안 됩니다. 링크 또는 버튼 등의 컨트롤 텍스트와 함께 기입해야 합니다. 이를테면 ‘ARIA-label=”네이버 – 새 창이 열립니다”’와 같이 해야 합니다. 아래 샘플에서 title 속성과 ARIA-label의 예를 살펴볼 수 있습니다.

Title과 ARIA-label의 샘플

샘플에서 확인하셨듯이 링크에 적용된 title 속성값은 센스리더를 제외한 다른 스크린리더들은 읽지 못 합니다. 따라서 스크린리더 사용자에게 별도의 추가 설명이 제공되는 컨트롤을 사용할 때는 ARIA-label을 사용해야만 모든 스크린리더에서 컨트롤명과 추가 정보를 읽을 수 있습니다.

이상으로 저희가 준비한 스크린리더 사용자를 위한 IR(Image Replacement)기법과 추가 설명 제공하기 아티클을 마치도록 하겠습니다. 이 글이 접근성에 관심 있는 분들께 조금이나마 도움이 되었으면 좋겠습니다. 감사합니다.

댓글보기

전체 댓글
5
로그인
Iris Buist
오타가 좀 있네요~~

1. 치값을 그만큼 많이 계산해ㅑ 하므로 성능에 저하를 불러올 수 있습니다.
치값을 그만큼 많이 계산해야 하므로 성능에 저하를 불러올 수 있습니다.

2. 높이와 넙이를 0으로 설정하는 IR기법
높이와 넓이를 0으로 설정하는 IR기법
Webacc NV
@Iris Buist안녕하세요. 
오타 확인하여 수정했습니다. 감사합니다.
또군
ARIA-label 것은 xhtml에서도 쓸 수 있는건가요 ?
아이엠
@또군aria-label은 xhtml에서도 지원이 됩니다. 그런데 dtd를 선언해야하는 부분이 있는거 같아요. 
아래 내용을 확인해보면 될 거 같습니다. 
https://www.w3.org/TR/wai-aria/appendices
https://www.w3.org/TR/wai-aria-primer/#ariahtml
워니
요즘 모바일 접근성 하고있어서 모르는게 많은데 좋은 글 잘읽고 가네요.^^

목록이전 글 보기262/370다음 글 보기

공유하기
페이스북으로 공유하기페이스북 공유 횟수 :0트위터로 공유하기트위터 공유 횟수 :0