- 대체텍스트 입력하기
목차
- 일단 사진 올려보기
- 대체텍스트 작성하기 @iOS
- 대체텍스트 작성하기 @Web
연두군! 앱스토어의 이름하고 설치된 앱의 이름이 너무 달라서 못 찾을 때가 있다고~~
이 말을 듣고 아이폰의 앱 이름을 살펴보니 보다 심각한 문제가 있었다.
앱 이름만 봐서는 어느 앱인지 알 수가 없자나!
iOS용 뱅킹앱을 마구 설치해서 살펴보니 어느 은행의 앱인지 조차 알 수 없는 앱이 있다는 것을 발견했다.
은행명 | 아이콘 이름 |
---|---|
KB국민은행 | KB스타뱅킹 |
신한은행 | 신한S뱅크 |
하나은행 | 하나N Bank |
NH농협 | NH 뱅킹 |
우체국 | 스마트뱅킹 |
우리은행 | 원터치 개인 |
IBK기업은행 | ONE뱅킹개인 |
SC제일은행 | Breeze뱅킹 |
KEB외환은행 | 스마트뱅크 |
KDB산업은행 | 스마트KDB |
씨티은행 | 씨티모바일 |
수협 | 수협 Bank |
신협 | 신협S뱅킹 |
새마을금고 | MG새마을금고 |
광주은행 | 광주S뱅킹 |
대구은행 | 스마트뱅크 |
부산은행 | 스마트뱅크 |
제주은행 | 스마트뱅킹 |
경남은행 | 스마트뱅킹 |
전북은행 | 전북M뱅크 |
기본적으로 은행의 뱅킹앱이면 당연히 은행이름이나 이니셜이 들어갈 것으로 생각한다. 하지만 앱 이름을 유심히 살펴보면 몇몇 앱은 은행 이름이나 이니셜이 전혀 들어가지 않았다. 아이콘에는 떡하니 은행이름이 들어있지만 텍스트로는 표기되지 않은 것이다.
시각장애인 사용자는 보이스오버를 통해 앱 이름만 음성으로 듣기 때문에 도대체 어느 은행의 앱인지 도저히 알 수 없다.
아이콘의 정보가 시각장애인에게는 무용지물이까...
심지어 우리은행은 앱 이름이 “원터치 개인”이다. 은행 혹은 뱅킹이란 단어 조차 사용하지 않았다.
무슨 배짱일까…
단순히 은행 이름이 표기되지 않아 어느 은행의 앱인지 알 수 없는 것 뿐 아니라 매우 유사하거나 동일한 앱이름을 사용하고 있어 보이스오버의 음성만 들었을 때는 도저히 앱을 구분하는 것이 불가능한 경우도 있다.
앱이름에 은행을 구분할 수 있는 명칭이 포함되지 않은 이유를 어렴풋이 짐작할 수도 있을 것 같다. 시각적인 정보만을 기준으로 본다면 아이콘에 은행이름이 표시되고 있으니 앱 이름은 어쩌면 부가적인 의미로 활용될 수도 있을 것 같다.
하지만 시각장애인은 아이콘 “이미지”에 포함된 정보를 전혀 인지할 수 없기 때문에 문제가 발생한다. 우리가 웹접근성을 고려할 때 의미를 가지는 아이콘은 대체텍스트를 제공하는 것과 마찬가지로 앱에서도 아이콘이 담은 의미가 있다면 앱 이름에 동일한 정보를 제공해야하지 않을까?
앱 이름에 앱을 구분할 수 있는 고유의 정보로 매우 유니크한 문구를 사용한다면 음성정보로만 앱 목록에 접근할 수 있는 시각장애인 사용자도 앱의 명칭을 동등한 수준에서 인지하고 구분할 수 있을 것이라 기대한다.
신기한건~ 뱅킹 앱 이름에는 유독 “스마트”란 단어가 많이 사용되드라.
앱 이름은 썩 그렇게 스마트하지 않더만… 쩝…
카드사 | 아이콘 이름 |
---|---|
KB국민카드 | KB국민카드 |
신한카드 | Smart신한 |
하나SK카드 | 카드서비스 |
NH농협카드 | NH농협카드 |
BC카드 | 비씨카드 |
우리카드 | 우리카드 |
외환카드 | Smart외환카드 |
현대카드 | 현대카드 |
롯데카드 | 스마트롯데 |
삼성카드 | 삼성카드 |
씨티카드 | 씨티카드앱 |
하나SK카드의 앱 이름은 [카드서비스]였다.
센스리더는 웹페이지내의 이미지에 대해 기본적으로는 파일명을 음성출력합니다. 하지만 파일명만으로는 해당 이미지에 대한 정보를 정확히 알 수 없기 때문에 alt 태그의 정보를 활용하게 됩니다. 이미지에 대해 alt 태그로 정보를 넣어줄 경우 스크린리더는 해당 내용을 파일명 대신 음성출력하게 됩니다.
<img src=”sub_g01.gif”> <img src=”sub_go1.gif: alt=”전송”> |
sub_g01.gif 이미지 전송 이미지 |
alt 태그의 정보를 활용해 음성출력하면 모든 이미지에 대해 alt 정보를 제공해야 하는지에 대한 논란이 발생할 수 있습니다. 일반적으로 의미를 갖지 않는 경계선/배경/불릿 등에 대해서는 alt=””과 같이 공백문자 처리를 함으로서 스크린리더가 이미지 파일명 조차 읽지 않고, 아무것도 없는 듯이 지나가도록 처리하고 있습니다.
<img src=”sub_g01.gif”> <img src=”hor_line01.gif” alt=””> <img src=”sub_go1.gif: alt=”전송”> |
sub_g01.gif 이미지 (아무것도 없는 듯 지나감) 전송 이미지 |
위와 같이 이미지에 대해 alt=”” 태그를 사용하면 불필요한 이미지에 대한 음성출력을 막을 수 있습니다. 하지만 센스리더 프로 1.2.0.3 의 경우 이에 대한 처리에 버그가 있어서 이미지로 음성을 출력하게 됩니다. 이 버그는 1.2.0.4 BETA 이후 수정되었습니다.
<img src=”sub_g01.gif”> <img src=”hor_line01.gif” alt=””> <img src=”sub_go1.gif: alt=”전송”> |
sub_g01.gif 이미지 이미지 전송 이미지 |
이미지를 링크로 사용하는 경우가 많은데 이에 대한 음성출력은 다음과 같습니다.
<a href=”#”><img src=”sub_g01.gif” alt=”전송”></a> <a href=”#” title=”새창으로”><img src=”sub_g01.gif” alt=”전송”></a> <a href=”#” title=”새창으로”target=”_blank”><img src=”sub_g01.gif” alt=”전송”></a> <a href=”#” title=”새창으로”><img src=”sub_g01.gif”></a> |
전송 그래픽 링크 전송 그래픽 링크 전송 새창 그래픽 링크 새창으로 그래픽 링크 |
이미지에서는 alt 값이 title 보다 우선합니다. a 태그 안에 있는 title 값도 img 안에 alt값이 있기 때문에 alt 값을 음성출력하게 됩니다. 링크에서 target=”_blank”는 스크린리더에서 인지해서 새창으로 음성출력하기 때문에 굳이 사용하지 않으셔도 문제가 없습니다.
-------------------------------------------------------------------------------------------------------------------------
위 내용은 센스리더 프로페셔널 에디션 v1.2.0.4를 기준으로 Internet Explorer 8에서 확인된 내용이며
2010년 4월 12일 기준으로 작성되었습니다.
------------------------------------------------------------------------------------------------------------------------
당신의 의견을 작성해 주세요.