Blog 본문

접근성

소리 없는 사랑의 언어, 수화!

손으로 세상과 소통하는 법, 카카오톡과 함께~

 



매년 6월 3일은 농아인의 날입니다. 

농아인의 날은 우리나라 농아인복지의 효시인 「조선농아협회」라는 단체가 설립된 1946년 6월을 기념하는 "6”과 귀의 모양을 형상화 한 “3”이 결합되어 농아인의 날을 6월 3일로 제정했다고 합니다.



카카오톡에서는 농아인의 날을 맞아 움직이는 수화 이모티콘을 출시하였습니다.

이번 수화 이모티콘은 히로라는 캐릭터가 '사랑해' '안녕' '힘내' '대박' 등 일상에서 많이 쓰이는 24가지 표현을 텍스트와 함께 수화 동작으로 보여주는 형태로 제작되었습니다.

 




혹시 손으로 세상과 소통하면서 오는 청각장애인의 고충을 한번쯤은 생각해보신적 있으신가요?


귀가 안 들리는 농아인은 우리말을 읽고 쓸 줄 알지만 주로 수화를 통해 의사소통을 하다보니 글자나 말로 빠르게 소통하는데 어려움이 있습니다.

그렇다보니 농아인들은 소셜네트워크서비스(SNS)을 이용시 글로 대화하지만 문자를 통해 의미전달이나 감정표현이 불편합니다.


많은 농아인들이 이모티콘을 통해 감정표현을 하는 걸 원하고 있지만 그동안은 수화로 표현되는 이모티콘이 없어 표현의 한계가 있었습니다. 


  



이로써 농아인은 '수화 이모티콘'을 통해 하고 싶은 말을 수화와 함께 표현할 수 있게 되었습니다. 그리고 수화가 낯선 주변의 비장애인들도 '안녕', '좋아요' 등 간단한 수화를 이해하게 되었습니다.


비장애인들이 수화 이모티콘을 이용함으로써 대화 맥락 속에서 자연스럽게 수화를 배울 수 있어 이를 통해 농아인과 비장애인의 소통의 장벽이 줄어들길 기대합니다. 수화 이모티콘을 통해 수화를 좀더 알릴 수 있는 계기가 되었으면 합니다. 

 


 

 


앱 다운로드 : iOS / Android

 

 



히로와 나누는 사랑의 수화 이모티콘으로 사랑을 나눠주세요.
 

청각장애인이 직접 그린 캐릭터, 히로!

히로 수화 이모티콘을 구입하시면 이모티콘 수익금 1,000원이 기부되며, 글을 읽는데 어려움을 겪고 있는 농아인을 위한 수화영상 도서 제작을 위해 전액 사용 할 예정이다.


카카오톡의 아이템스토어에서 '히로와 나누는 사랑의 수화'를 검색해 보세요.



by. 접근성팀 Ellen & Gio


Posted by darum

전체 댓글

Blog 본문

접근성

그동안 시각장애인이 동영상 재생프로그램에서 영상에 표시되는 자막을 화면낭독프로그램으로 접근하는 것이 쉽지 않았습니다.

팟플레이어1.6.51480 (2014/12/16) 버전부터 화면에 표시되는 자막의 음성출력을 지원하게 되어 시각장애인의 팟플레이어 활용도가 매우 높아졌습니다.


자막을 음성으로 듣기 위해서 어떤 설정이 필요한 지 알아보겠습니다.

설정방법 

팟플레이어를 실행한 후 F5를 누르거나 상황에 맞는 메뉴를 연 후 환경설정 메뉴로 진입합니다.

환경설정 대화상자에서 "접근성(TTS/UIA)" 항목으로 이동하면 다음과 같은 설정 항목들을 확인할 수 있습니다.



음성출력 방법 (TTS / UIA) 간단  비교

자막을 음성으로 듣는 방법은 TTS와 UIA 를 활용하는 2가지 형태가 있습니다.

사용자 유형에 따라 어떤 방법을 선택하는 것이 좋을 지 알아보겠습니다.


 
텍스트음성출력(TTS)
UI Automation (UIA)
운영체제

윈도우 8 / 8.1

(음성엔진 설치시 XP / 7 이용가능)

윈도우 XP / 7 / 8 / 8.1
음성엔진(TTS)필요함불필요
주요 이용대상저시력 시각장애인전맹 시각장애인
화면낭독프로그램불필요필요함

STEP 1. 음성출력 방법(TTS/UIA) 선택하기

1. 센스리더를 사용자라면 "UI Automation (UIA)"를 설정하세요

센스리더가 설치된 경우, UIA를 이용해서 자막을 손쉽게 음성으로 들을 수 있습니다.

UIA 설정은 운영체제에 설치된 화면낭독프로그램을 활용해서 자막을 음성으로 출력하는 기능입니다.

전맹 시각장애인이 일반적으로 활용하는 화면낭독프로그램을 활용해서 자막을 음성으로 들을 수 있습니다.

기존에 사용하던 화면낭독프로그램을 이용하므로 자막의 음성을 조작하는 방식을 유지할 수 있기 때문에 전맹 시각장애인 사용자에게 조금 더 편리할 수 있습니다.

2. 센스리더를 사용하지 않는다면 "텍스트 음성출력(TTS)"을 설정하세요

텍스트 음성출력(TTS) 설정은 윈도우 운영체제에 설치된 음성엔진(TTS: text to speech)을 통해 자막을 음성으로 출력할 수 있는 기능입니다.

SAPI를 통해 자막 정보를 직접 음성엔진에 전달하므로 별도의 화면낭독프로그램은 필요하지 않습니다.

윈도우 8 이상에서는 한국어 음성엔진 혜미(Heami)가 포함되어 있으므로 "출력엔진" 옵션에서 한국어 음성엔진을 변경하면 한글 자막을 음성으로 들을 수 있습니다.

윈도우 7 이하에서는 운영체제에서 기본 한국어 음성엔진을 제공하고 있지 않기 때문에 별도의 구매하여야 합니다. 한국어 음성엔진을  설치 후 동일한 방법으로 설정하시면 한글 자막을 음성으로 들을 수 있습니다.

 

STEP 2. 음성출력 영역 설정하기

사용자 환경에 맞는 음성출력 설정이 완료되면 팟플레이어 영역 중 자막이나  메시지 등의 음성으로 듣고 싶은 정보를 선택하여  들을 수 있습니다.

1. 화면에 표시되는 자막을 음성출력

화면 하단에 표시되는 자막을 음성으로 출력할 때는 다음과 같은 설정을 적용하면 됩니다.

  • 텍스트 음성출력 (TTS) : "자막 출력시 사용" 선택
  • UI Automation (UIA) : "음성출력 프로그램을 위해 자막을 윈도우 제목으로 출력" 선택

 2. 재생정보와 같은 메시지 정보를 음성출력

재생,정지,뒤로/앞으로 등의 재생 정보나 간편정보 메시지 내용을 음성출력 할 때는 다음과 같은 설정을 적용하면 됩니다.

  • 텍스트 음성출력 (TTS) : "메시지 출력시 사용" 선택
  • UI Automation (UIA) : "음성출력 프로그램을 위해 메시지를 윈도우 제목으로 출력" 선택

 

Q&A

Q. 환경설정을 했는데 UIA/TTS  설정 모두 자막이 음성으로 들리지 않아요.

  • 자막파일의 이름을 확인하시고, 자막이 현재 제대로 연결되었는지 확인합니다.
  • 영상에 삽입해서 영상화된 자막은 음성출력할 수 없습니다.
  • DVD/Blu-ray 등의 이미지 자막은 음성출력 할 수 없습니다.


Q. UIA를 설정했는데 자막이 음성으로 들리지 않아요.

  • UIA를 통한 자막 음성출력은 개별 화면낭독프로그램의 지원이 필요합니다. 자막이 음성으로 들리지 않는다면 화면낭독프로그램 개발사에 문의해주세요.


Q. 텍스트음성출력(TTS)를 설정했는데 자막이 음성으로 들리지 않아요.

  • 음성엔진 옵션에 한국어 음성이 지원되는 TTS로 설정되었는지 확인합니다.
  • 윈도우7 이하의 운영체제에서는 기본 한국어 음성엔진을 제공하지 않아 별도의 음성엔진을 구매하여 설치해야 사용가능합니다.


Q. 텍스트음성출력(TTS)를 설정했는데 한글 자막이 이상하게 들립니다.

  • 영어 음성엔진이 선택되어 있어 한국어를 정상적으로 발음하지 못하는 경우입니다.
    환경설정 > 접근성(TTS/UIA) > 출력엔진 에서 한국어 음성엔진을 선택해주세요.
  • 만약 출력 엔진 목록에 한국어가 나타나지 않는다면 한국어 음성엔진을 설치해주세요.


Q. 화면에서는 자막이 정상적으로 나오는데 음성이 뒤늦게 나와요

  • 자막 내용의 음성출력이 끝나지 않았는데 다음 자막이 표시되면 이전의 내용을 모두 음성출력한 후 다음 내용이 음성으로 나오게 됩니다. 
    자막 내용이 계속 뒤늦게 밀려서 나온다면 우선 스페이스바를 눌러서 영상을 일시중지하고 자막 내용을 모두 들은 후 다시 재생하세요




팟플레이어 다운로드

팟플레이어 다운로드



접근성팀 Hale & Gio


Posted by darum

전체 댓글

Blog 본문

접근성

카카오프렌즈를 만날 수 있는 국민메신저 카카오톡

시각장애인 사용자가 카카오프렌즈를 만날 수 있는 방법은 어떤게 있을까요?



 

카카오톡 채팅을 하다보면 이모티콘 사용도 하나의 재미로 빠질 수 없는데요. 이모티콘을 사용하므로써 대화 분위기도 한층 부드러워지고 대화를 재미있게 이끌어 가는 효과를 줍니다.

그런데 이 카카오톡 이모티콘에도 대체텍스트가 제공되어 있다는 사실 알고 계시나요?



기존에는 이모티콘에 대체텍스트가 제공되지 않아 시각장애인들에게 수만 가지 표정의 이모티콘은 그저 "이모티콘"이라는 네글자 소리에 불과했습니다.

 


카카오톡메시지창


"뭐해?"

"지금 내 기분 이모티콘 이모티콘"

"무슨 일 있어?"

"이모티콘"




시각장애인은 모바일 화면을 음성으로 읽어주는 모바일 화면낭독프로그램(Screen reader) 기능을 활용해 모바일 애플리케이션을 이용하는데 이모티콘이나 그림에 따로 텍스트를 적용하지 않으면 시각장애인은 인식할 수 없게 됩니다.


Mobile App 접근성 지침 : 1.1 대체 텍스트

텍스트가 아닌 콘텐츠는 대체 가능한 텍스트와 함께 제공되어야 합니다.

이모티콘이나 그림과 같이 텍스트가 아닌 콘텐츠에 대체텍스트를 적용하면 시각장애인 사용자도 음성으로 정보를 얻을 수 있습니다.

스마트폰의 운영체제에 따라 iOS의 Voiceover와 Android의 Talkback 등과 같은 화면낭독프로그램이  설치되어 있고, 이를 통해 애플리케이션내 정보를 음성으로 듣게됩니다.

 

2014년 7월말, 시각장애인도 카카오톡 이모티콘을 사용할 수 있도록 약 200여개에 캐릭터의 표정과 이름을 설명해주는 기능을 적용했습니다.


캐릭터의 표정을 나타내는 이모티콘은 표정을 알 수 있는 대체텍스트를 제공하였고, 캐릭터의 동작이 표시되는 이모티콘은 캐릭터의 모습이나 동작을 '동작 - 캐릭터명 - 이모티콘' 형태로 대체텍스트를 제공하여 시각장애인 사용자가 이모티콘을 보다 정확히 인식하고 사용할 수 있도록 했습니다.


지금 내 기분 흑흑 부르르

'지금 내 기분 흑흑 부르르'


불같이 화난 튜브 이모티콘

'불같이 화난 튜브 이모티콘'


예를 들어 분노를 느끼면 입에서 불을 내뿜는 미친 공룡으로 변신하는 튜브 이모티콘을 예전에는 시각장애인이 인식하기 어려웠다면 이제는 '불같이 화난 튜브 이모티콘'이라고 음성이 나오니 상대방이 분노를 표현하고 있음을 알 수 있습니다.

 


이모티콘예제

기본이모티콘예제



반대로 이모티콘을 보낼 때에도 이모티콘을 표현해주는 음성 안내에 따라 원하는 표정을 선택할 수 있게되어 어떤 상황에서든 다양한 이모티콘의 표정이나 행동을 이용하여 재미있게 대화를 나눌 수 있게 된 것입니다.


 

이뿐만 아니라 시각장애인들이 카카오프렌즈를 만날 수 있는 방법이 하나 더 있는데요.





카카오프렌즈의 생김새를 느끼고 이모티콘을 이해할 수 있도록  캐릭터의 이름과 생김새 그리고 탄생스토리를 점자카드로 제작해 관련 단체에 배포하였습니다. 

시각장애인 사용자들이 단순한 텍스트가 아닌 카카오프렌즈 캐릭터를 생동감있게 이해할 수 있도록 도와, 이모티콘을 즐겁게 사용할 수 있게 되는 것이죠.

        




요즘은 얼굴을 맞대고 전하는 이야기보다 짤막한 카톡 한 줄이 더 편한 시대라지만

때로는 단순하게 말을 전달하는 것보다 어떻게 표현하는지가 더 중요할 때가 있습니다.


이렇게 감정표현 할 수 있는 수단이 시각장애인들에게도 늘어남에 따라 지인과의 대화가 훨씬 풍성해지고 즐겁게 대화를 이어나갈 수 있게 되었습니다. 





앱 다운로드 : iOS / Android

 



카카오프렌즈를 만날 수 있는 또 다른 방법!  카카오프렌즈 브랜드스토어

카카오프렌즈 브랜드스토어를 가다! (다음카카오 공식블로그)




카카오프렌즈 브랜드 스토어에서는 피규어, 인형 등 완구와 젤펜, 수첩, 노트 등 팬시용품을 비롯해 머그컵, 물통, 양말 등 60여 종 170여가지 상품을 만날 수 있습니다.

또한 카카오프렌즈 대형 피규어와 함께 사진을 찍을 수 있는 포토존, 카카오프렌즈 캐릭터 전시존 등의 공간이 마련되어 있어요.


아직 카카오프렌즈를 직접 만나보지 못 하신 분들도 스토어로 오셔서 즐거운 만남을 가져보시길 추천드립니다!!


  • 코엑스점 >> 서울 코엑스몰 라이브플라자 지하 2층
  • 신촌점 >> 신촌 현대백화점 유플렉스 지하 2층
  • 대구점 >> 대구 현대백화점 지하 2층 아트리움 광장



더 많은 새로운 소식을 듣고 싶다면.  카카오프렌즈 카카오스토리



by. 접근성팀 Emilia & Ellen

Posted by darum

전체 댓글

Blog 본문

접근성

목적지를 찾아가기 위해 지도앱을 켰지만 확대,축소가 어려워서 고생하신적은 없으신가요?

다음지도앱을 이용해보세요!

 


손가락의 움직임이 자유롭지 않은 상지 지체장애인과 신체의 운동동작에 제한이 있는 뇌병변장애인 들은 다중누르기, 슬라이드, 끌어다 놓기 등의 복잡한 누르기 동작으로 기능을 실행하도록 구현하면 해당 기능을 이용하는데 어려움을 느낍니다.


관련 지침

Mobile App 접근성 지침 : 3.1 누르기 동작 지원 

터치 기반 모바일 기기의 모든 컨트롤은 누르기 동작(touch or tab)으로 제어할 수 있어야 한다

 

기존의 대다수 지도앱에서는 두 손가락을 이용하여 줌인/줌아웃(Pinch open/close) 동작으로 확대나 축소하도록 제공하고 있지만,

탭과 같은 단순한 누르기 동작으로 확대 / 축소 할 수 있는 수단을 마련해 놓지 않고 있습니다.

 


두손가락을 이용하는 줌인/아웃(Pinch open/close) 동작은 비장애인에게는 단순한 동작이지만 절단장애, 관절장애, 지체기능장애, 변형 등의 장애로 인해 손가락 동작이 어려운 장애인이나 수전증이 있는 사용자등은 정확한 컨트롤이 어렵습니다.

 

이러한 문제점을 보완하기 위해 다음지도앱에서는 확대/축소 버튼을 사용자가 선택하여 노출할 수 있게 제공하였습니다.

 





초기화면을 보시면 지도 확대/축소 버튼을 보실 수 없는데요. 

설정에서 지도 확대/축소 버튼 표시를 선택하면 화면에 노출할 수 있어 사용자가 필요에 따라 설정할 수 있습니다. 

확대/축소 옵션 설정 방법을 알아보도록 하겠습니다. 

확대/축소 옵션 설정 방법

1. 메뉴 버튼을 선택한다.
2. 설정 버튼을 선택한다.
3. 지도화면 설정 > "지도 확대/축소 버튼 표시" 옵션을 체크한다.
4. 화면에 확대/축소(+/-) 버튼이 활성화된다.


1. 메뉴 버튼 선택


2. 설정 버튼 선택


3.지도화면 설정 > 지도 확대/축소 버튼 표시


4. 화면에 확대/축소 버튼이 노출됨



지도 확대/축소 버튼 표시 옵션을 활성화하면 두 손가락을 이용하여 줌인/줌아웃 동작을 할 수 없는 사용자도 확대/축소 버튼을 이용하여 손쉽게 기능을 이용 할 수 있게 됩니다.

 



항상 노출하지 않더라도 단순누르기 동작을 통해 옵션을 선택하고, 이용할 수 있게 하는 방법도 접근성을 준수하는 방법 중 하나입니다.

 

이러한 기능 보완 방법은 상지 장애인에만 국한된 것이 아니라 비장애인도 손을 다쳤다거나, 손에 무언가 묻어 손가락을 이용하지 못하는 경우처럼 엄지 손가락과 검지 손가락을 이용하기 어려운 경우에도 유용하게 사용할 수 있는 방법입니다.  




다음지도앱


앱 다운로드 : iOS / Android


by. 접근성팀 Ellen


Posted by darum

전체 댓글

Blog 본문

접근성

요즘 디자인을 보면 투명도도 높고, 배경과 글자간 명도대비가 낮아 눈에 잘 안보이는 경우가 많아지고 있습니다.

저시력 시각장애인 사용자나 색각장애 사용자 그리고 나이가 많으신 노년층 사용자 등 여러 사용자들이 화면내 내용의 인식에 어려움을 겪고 있습니다.


글씨가 있는 것 같은데 뭐라 적혀 있는건지...?


글자나 배경에 투명도를 주거나, 배경과 글자간 명도대비를 낮게 제공하면 눈에 잘 띄지 않아 콘텐츠가 있다는 것을 알지 못합니다.

그중 화면에 표시되는 전경색과 배경색 간의 구분이 잘되지 않는 문제 때문에 내용을 인식하지 못하는 어려움을 겪는 경우가 가장 많이 발생하고 있습니다.

특히 전경색과 배경색이 흰색과 회색, 노란색과 주황색의 경우 처럼 유사한색으로 되어 있는 경우 더욱 인지하기 어렵습니다.

 

관련지침


디자인 작업시 고려해야 할 사항

  1. 1. 전경색과 배경색의 명도대비를 높여 텍스트와 아이콘의 구분이 쉽도록 합니다.
  2. 2. 명도대비를 높이는 것과 동시에 중요 텍스트에 Bold를 추가로 사용하면 콘텐츠의 인식에 도움이 됩니다.
  3. 3. 직관적인 아이콘과 텍스트를 제공해야 오해가 발생하지 않습니다.
  4. 4. 아이콘만 제공하기 보단 아이콘과 텍스트가 같이 제공되는것이 인식에 도움이 됩니다.
  5. 5. 버튼의 크기는 너무 작지 않아야 합니다. 버튼의 크기가 작다면 인지하기 어렵습니다.
  6. 6. 대다수의 시각장애인의 경우 눈부심으로 인해 흰색 배경보다 검정색 배경을 더 선호합니다.
  7. 7. 특히 모바일은 화면의 크기가 작아 사용자가 접하는 실제 폰트크기가 데스크탑에 비해 더 작기 때문에 사용성을 고려한다면 명도대비를 좀 더 높게 제공하는 것이 바람직합니다.


기획단계부터 이러한 요구 사항을 고려한 사례를 소개드립니다.



요즘 휴대폰을 보면 예쁜 테마도 많은 데 글자가 잘 안보여서 답답하시죠?

그렇다고 테마를 직접 만들기는 더 힘들다구요?


그럼 버즈런처 고대비 홈팩을 추천 드립니다.



나온지는 조금 되었지만, 모르는 분들이 많네요...


버즈런처 고대비 홈팩 모습

홈팩 다운로드 : http://m.homepackbuzz.com/homepack/773464


큼직하고 눈에 잘 보이는 스타일의 아이콘으로 만든 홈팩(테마)입니다. 고대비로 제작되어 시력이 좋지 않으신 분들도 편리하게 쓰실 수 있어요.

부모님의 핸드폰에 버즈런처 고대비 홈팩을 설치해드리면 어떨까요?  간편하게 따뜻한 마음을 전해보세요.


"여보, 아버님폰에 버즈홈팩 놔드려야겠어요~"



버즈런처앱


by 접근성팀 Hale & Gio


Posted by darum

전체 댓글

Blog 본문

접근성

최근 라디오 버튼에 디자인을 입히는 경우가 많아지고 있는데, 어떠한 디자인이 좋을까?



라디오 버튼의 속을 꽉 채운 디자인을 종종 보게 됩니다.

보통 선택되지 않은 라디오버튼의 내부에는 색상을 흐리게 채워 놓고, 선택된 라디오 버튼만 진하게 표시하는데요.



하지만 사용자에 따라 라디오 버튼을 클릭해서 선택하더라도 선택/해제 상태를 명확히 구분하기 어려운 경우가 많습니다.

특히 저시력 시각장애인의 특성상 비슷한 유형의 디자인 차이를 인식하지 못하고 오인하는 경우가 자주 발생하게 됩니다.





어려워, 어려워 ...



만약 활성화된 버튼과 비활성화된 버튼의 명도대비 차이가 적다면 더 구분하기 어려워집니다.

명도대비 차이가 큼명도대비 차이가 적음



종종 색상의 차이로만 버튼을 구분하는 경우도 있는데 색각장애 사용자의 경우 활성화 여부를 구분하기 어려울 수 있습니다.

NormalGrayscale



그럼 누구나 이용가능하도록 접근성을 높이려면 어떻게해야 할까요?


디자인을 적용한 라디오 버튼을 제공하더라도 기본적인 라디오버튼의 모습처럼 제공하는 것입니다.

기본적인 라디오 버튼처럼 선택되지 않은 라디오버튼은 내부에 채워진 색상을 제거하여 선택/해제 상태를 명확히 인지할 수 있게 합니다.





속이 꽉찬 남자 99.9~ NO NO

속이 꽉찬 디자인보다는 가끔은 속이 빈 디자인 좋습니다.








실제 적용된 검은사막 서비스 화면 http://black.game.daum.net/




by 접근성팀 Hale & Gio




Posted by darum

전체 댓글

Blog 본문

접근성

모바일 디바이스별 날짜 표기 방법에 따라

스크린리더에서 읽어 주는 형식이 어떤 차이가 있을까?

개요

모바일 디바이스별 날짜 표기 방법에 따라 스크린리더에서 읽어 주는 형식의 차이가 있습니다.


iOS

  • 1. iOS는 구두점 설정을 한경우 형태에 상관없이 특수기호 의미를 그대로 읽어주어 날짜 형태로 인지하기 어렵습니다.


Android

  • 1. mm/dd나 mm.dd와 같이 4자리 형태의 날짜 표기 형식은 삼성TTS 이외 기기에서 날짜로 인식하지 못하였습니다.
  • 2. "/ (슬러시)"를 이용하여 yy/mm/dd 이상 형태로 표기하면 삼성 TTS, LG TTS, Google TTS 모두에서 읽어 주었습니다.
  • 3. ". (마침표)"를 이용하여,  yy.mm.dd 이하 형태로 표기하면 삼성 TTS와 LG TTS에서 읽어주었습니다.
  • 4. LG TTS의 경우, yy/m/d나 yy.m.d 형태는 날짜로 인식하지 않고, mm/dd 형태로 빈칸도 0으로 채워 2자리 형태로 제공해야 날짜로 인식하였습니다.
  • 5. Google TTS에서는 m/d 형태를 분수로 인식하는 독특한 차이가 있었습니다.


TEST 정보

테스트 기기

TTS 유형
디바이스
OS 버전
삼성 TTS 엔진

갤럭시 S5

4.4.2

LG TTS+ 엔진

옵티머스 G3

4.4.2
Google TTS 엔진

옵티머스 G3

5.0
Voiceover

아이폰

8.2

TEST 결과



삼성 TTS (4.4.2)
LG TTS+
(4.4.2)
Golgle TTS (5.0)
Voiceover
(8.2)
비고
2014/09/27이천십사년 구월 이십칠일이천십사년 구월 이십칠일이천십사년 구월 이십칠일이천십사 슬래시 구 슬래시 이십칠 
2014/9/27이천십사년 구월 이십칠일이천십사 구 이십칠이천십사년 구월 이십칠일이천십사 슬래시 구 슬래시 이십칠 
14/09/27십사년 구월 이십칠일십사년 구월 이십칠일십사년 구월 이십칠일십사 슬래시 구 슬래시 이십칠 
14/9/27십사년 구월 이십칠일십사 구 이십칠십사년 구월 이십칠일십사 슬래시 구 슬래시 이십칠 
09/27구월 이십칠일공구 이십칠공구 이십칠구 슬래시 이십칠 
9/27구월 이십칠일구 이십칠이십칠 분의 구구 슬래시 이십칠 
2014.09.27이천십사년 구월 이십칠일이천십사년 구월 이십칠일이천십사년 구월 이십칠일이천십사 마침표 구 마침표 이십칠 
2014.9.27이천십사년 구월 이십칠일이천십사 점 구 점 이십칠이천십사년 구월 이십칠일이천십사 마침표 구 마침표 이십칠 
14.09.27십사년 구월 이십칠일십사년 구월 이십칠일십사 점 영구 이십칠십사 마침표 구 마침표 이십칠 
14.9.27십사년 구월 이십칠일십사 점 구점 이칠십사 구 점 이칠십사 마침표 구 마침표 이십칠 
09.27구 점 이칠구 점 이칠아홉시 이십칠분구 마침표 이십칠 
9.27구 점 이칠구 점 이칠구 점 이칠구 마침표 이십칠 


by 접근성팀

Posted by darum

전체 댓글

Blog 본문

접근성

HTML5에 추가된 <time> 요소를 이용하였을 시, 

모바일 디바이스에 따라 스크린리더에서 읽어 주는 형식에 차이가 있을까?

개요

iOS, Android 기기 모두 <time> 요소를 사용하였다하여 달리 읽어주지 않네요.

iOS는 날짜 형태의 숫자를 일반적인 문자처럼 읽어 주었고, Android는 벤더사마다 읽어주는 방식은 차이가 있었지만 일부 기기에서 날짜 형태를 인식하여 읽어주었습니다.

삼성TTS의 경우, 초단위까지 인식하여 읽어주어 시간을 이해하기 가장 좋은 것으로 나타났습니다.

iOS (8.2) Voiceover

삼성TTS (4.4.2)

LG TTS+ (4.4.2)

Google TTS 

(5.0)

(미흡) 문자로 인식

(성공) 시/분/초 단위를 인식

(미흡) 숫자로 인식

(양호) 시/분 단위를 인식


여기서 질문. 콜론이 포함된 숫자 정보를 시간으로 읽어주는게 과연 좋은 걸까요?

여러분의 의견을 댓글로 작성해주세요~

TEST 정보

Code

<p>출근시간은 매일 아침 <time>10:00</time>입니다.</p>
<p>점심시간은 <time>13:30:25</time> 부터 입니다..</p>
<p>퇴근시간은 매일 오후 6:30입니다.</p>
<p>나는 내년 <time datetime="2015-02-14 20:00">발렌타인 데이</time>가 오기를 기다리고 있다.</p>

테스트 기기

TTS 유형
디바이스
OS 버전
삼성 TTS 엔진

갤럭시 S5

4.4.2

LG TTS+ 엔진

옵티머스 G3

4.4.2
Google TTS 엔진

옵티머스 G3

5.0
Voiceover

아이폰

8.2


TEST 결과

iOS

 
모든구두점
구두점 몇개
구두점 없음
비고
<time>10:00</time>
십 콜론 영십 영 
<time>13:30:25</time>
십삼 콜론 삼십 콜론 이십오십삼 삼십 이십오일삼 삼공 이오 
6:30
육 콜론 삼십육 삼십육 삽십 
<time datetime="2015-02-14 20:00">발렌타인 데이</time>
발렌타인 데이발렌타인 데이발렌타인 데이 

Android

 
삼성 TTS (4.4.2)
LG TTS+ (4.4.2)
Google TTS (5.0)
비고
<time>10:00</time>
(성공) 열시십 공공(성공) 열시 정각 
<time>13:30:25</time>
(성공) 십삼시 삼십분 이십오초십삼 삼십 이십오 일삼 콜론 삼영 콜론 이오 
6:30
(성공) 여섯시 삼십분육 삼십(성공) 여섯시 삼십분 
<time datetime="2015-02-14 20:00">발렌타인 데이</time>
발렌타인 데이 발렌타인 데이 발렌타인 데이  


by 접근성팀

Posted by darum

전체 댓글

Blog 본문

접근성



시간과 장소, 기술과 환경, 장애의 제약을 받지 않고
누구나 동등하게 정보를 이용 할 수 있는, 모두 다 함께 즐거운 인터넷 세상.
Daum이 걸어온 8년 동안의 이야기를 들려드립니다. 





인터넷의 가치는 정보의 공개와 공유에 있습니다. 더 많은 사람들이 정보를 공유할수록 더 나은 세상을 만들 수 있을 것이라는 믿음에서 인터넷은 시작되었습니다. 정보를 나누는 환경과 방법 역시 비약적으로 발전해 왔습니다. 사람들은 이제 PC와 스마트폰, 스마트TV, 디지털 사이니지, 웹과 애플리케이션(앱) 등 다양한 플랫폼과 서비스를 통해 인터넷에 접속하고, 정보를 이용하고 있습니다.


"'더 많은 사람'을 넘어, '모든 사람'이 시간과 장소, 기술과 환경, 장애의 제약을 받지 않고, 정보에 접근할 수 있어야 한다." 는 인식의 변화 또한 확산되고 있습니다. 동등한 기회 제공이라는 사회적 가치는 법률로도 제정되어, 올해 4월 11일부터 모든 정보통신서비스 제공자는 접근성을 보장해야 합니다. 



장애인차별금지법과 웹접근성


웹 접근성 보장은 장애인차별금지 및 권리구제 등에 관한 법률(이하 장애인차별금지법)에 명시된 의무사항으로 정보통신 서비스 제공자는 2013년 4월 11일까지 장애인의 웹접근성 차별 금지와 의사소통의 편의 제공을 위해 표준 텍스트 파일, 동영상 자막 등 편의제공 기술 방안을 마련하도록 하고 있습니다.





국내 포털 최초로  웹표준 준수(2005)



접근성을 준수하기 위한 Daum의 노력은 8년 전으로 거슬러 올라갑니다. 2005년 Daum첫 화면은 국내 포털 최초로, 월드와이드웹 컨소시엄(W3C)에 서 권장하는 웹표준을 준수하여 개편하였습니다. 이 때의 경험은 2006년 UI 직군 워크숍에서 '공평한 인터넷 환경을 위한 창의적 UI 발상 프로젝트'라는 세션 발표로 이어졌습니다. 각 서비스 담당자들이 안대로 두 눈을 가리고, 드림보이스라는 스크린리더로 자신이 담당하고 있는 서비스를 사용해 보면서, '시각장애인들이 어떻게 컴퓨터와 인터넷을 이용하는지’ 체험하며 사내 최초로 접근성이라는 개념을 알리게 되었습니다.

이후, 2007년도에는 UI개발 직군 중심으로, IWA(Improve Web Accessibility)라는 접근성 향상을 위한 그룹을 결성하여 다양한 대외 활동과 사내·외 교육에 나섰습니다. 2008년 2월에 Daum은 (사)한국장애인인권포럼이 주최한 '2007 접근성 사용자 평가 민간부문'에서 모범사이트로 선정되었습니다. 



W3C(World Wide Web Consortium, 월드와이드웹 컨소시엄)


웹 표준을 제정하는 등 웹의 장기적인 발전을 위해 1994년에 창립된 인터넷 관련 국제 컨소시엄입니다.




Daum 웹표준ㆍ웹접근성 레퍼런스,  Darum 공개(2013)



이러한 노력이 지금까지 이어져, 올해 1월에는 전사의 다양한 직군들을 대표하는 인력들로 '웹접근성TFT'를 조직하였고, 4월에는 다음서비스 웹표준개발팀 내에 접근성파트를 신설하였습니다. 이 두 조직은 Daum 전체 서비스에 대한 상시적인 접근성 QA와 컨설팅, 개선 작업을 맡고 있습니다.
또, PCS에 접근성 QA 테스트 항목을 신설하여, 7월 22일 부터 모든 주요 서비스는 이 테스트 를 통과해야지만 배포할 수 있도록 했습니다. 이와 함께, 3월 11일에는 Daum 웹표준 레퍼런스인 Darum(darum.daum.net)을 오픈 하여, Daum의 접근성과 모바일 접근성의 모든 가이드를 외부에 공개하였습니다. 



PCS(Production Process)


"Daum의 사용자를 대상으로 하는 모든 서비스"의 신규 오픈, 전면 개편, 변경 배포 과정에서 수행해야 하는 프로세스입니다. 



Daum 웹표준 및 웹접근성 준수 히스토리

  • 2005W3C 권고안 준수. Daum 첫 화면, W3C 유효성 검사 통과
  • 2006UI직군 워크숍. '공평한 인터넷 환경을 위한 창의적 UI발상 프로젝트' 발표
  • 2006웹접근성 향상을 위한 간담회 및 시각장애인 이용자 테스트(UT) 3회(4월, 6월, 9월) 개최
  • 2007. 03웹접근성 향상을 위한 그룹, IWA(Improve Web Accessibility) 조직
  • 2008. 022007 웹접근성 모범사이트 선정((사)한국장애인인권포럼 주최, 접근성 사용자 평가 민간부문)
  • 2008. 04장애인차별금지 및 권리구제 등에 관한 법률 시행 (2008.4.11)
  • 2013. 01웹접근성TFT 발족 (2013.1.1)
  • 2013. 03Daum 웹표준 레퍼런스 사이트, Darum(darum.daum.net) 공개 (2013.3.11)
  • 2013. 04다음서비스 웹표준개발팀 접근성파트 신설
  • 2013. 07사내 PCS 내 웹접근성 QA 테스트 항목 신설


Posted by darum

전체 댓글

Blog 본문

접근성



우리에게는 너무나도 당연한 음악이
누군가에게는 세상을 향한 가장 큰 문일 수도 있습니다.
그리고, 우리는 그 문을 열 수 있는 열쇠 하나를 가지고 있습니다.






Daum은, 최근 휴대전화와 태블릿 등 다양한 모바일 기기의 변화에 따라, 2011년도 뮤직앱을 시작으로 애플리케이션에까지 접근성 개선 범위를 확장하였습니다. 또, 2013년도 3월에는 Daum 웹표준 및 접근성 레퍼런스인 Darum을 통해 모바일웹 부문의 가이드까지 정리하여 공개하였습니다.

2012년도 당시 저시력자로 다음서비스 웹표준개발팀에서 QA를 담당하셨던 이민재 님은 “접근성이 어렵다는 것 때문에 비장애인과 장애인의 정보 격차가 심화되는 상황이 아쉽다.”며, “스마트폰으로 정보를 접하고, 애플리케이션을 사용해야 하는 경우도 많은 요즘, 풍부한 콘텐츠를 장애인들도 제대로 사용할 수 있어야 한다.”고 말했습니다.

기술은 발전하고 정보는 증가할 것이며 정보를 이용할 방법과 기회 또한 다양해질 것입니다. 때문에 누구나 공평하고 동등하게 정보에 접근할 수 있도록 하지 않으면 향후 정보의 격차는 더욱 벌어질 것이고, 이를 바로잡기 위한 사회적 비용도 늘어날 것입니다. 즐거운 사회와 공평한 세상, 그리고 행복한 우리 모두를 위한 Daum의 이야기를 들려드립니다. 




Daum 애플리케이션
접근성 개선 첫 사례, 뮤직앱



시각장애인 이용자들에게 ‘소리’는 세상과 소통하고 정보를 이용하는 가장 중요한 방법이고, ‘음악’은 삶과 문화를 즐기는 가장 매력적인 매개체입니다. 그런 점에서, 웹 또는 앱을 통해 음원을 제공하는 서비스는 우선적으로 그분들을 고려해야 합니다. 하지만, Daum이 뮤직앱의 접근성을 개선하기 전까지 시각장애인들이 음악을 들을 수 있는 애플리케이션 서비스는 거의 없었습니다.

Daum은 2011년 5월, 뮤직앱 접근성 개선 프로젝트를 시작했습니다. 먼저, iOS 내의 가이드를 파악하고 시각장애인들이 사용할 수 있도록 대체 텍스트를 제공 하는 일부터 진행하였습니다. iOS 운영 체제에서는 보이스오버(VoiceOver)라 는 화면 낭독 프로그램을 제공하는데, 이것이 서비스 내의 콘텐츠 정보를 음성으로 변환시켜 주는 역할을 합니다. 앱 상의 텍스트 정보 또는, 시각적으로는 보이지 않더라도, 서비스 이용에 관한 정보나 콘텐츠 정보를 ‘텍스트’ 형식으로 마크업 언어에 담아 제공 하면 이 장치가 이용자들에게 음성으로 읽어주는 것입니다.

대체 텍스트 및 초점 이동에 대한 개선만으로도, 시각장애인들은 뮤직앱 서비스에 접속하여, 실시간 차트나 최신 앨범 리스트를 이용하고, 최신 유행곡들을 들을 수 있게 되었습니다. 또, 음성 검색이나 음악 검색 같은 서비스도, 검색어 입력 시의 불편함을 개선하여, 검색한 노래 목록을 즐겨찾기에 추가하거나, 음악을 공유하는 등 비장애인과 마찬가지로 서비스를 이용할 수 있게 되었습니다. 



보이스오버(VoiceOver)


iOS 운영 체제에서 텍스트를 음성으로 변환하여 읽어주는 모바일 화면 낭독 프로그램.




2011ㆍ2012년,
두 차례 접근성 개선 프로젝트 진행



이어, 2012년 5월에는 뮤직앱 접근성 개선 2차 프로젝트를 진행하였습니다. 1차 때 ‘대체 텍스트 제공’과 함께 개선했던 ‘초점 이동’ 기능을 더욱 고도화하였습니다. 뮤직앱을 포함한 애플리케이션에는 레이어들이 중첩되어 있어 프로그래밍적으로 이를 순서대로 읽어주도록 되어 있는데, 애니메이션 등이 많거나 복잡한 형태로 구성되어 있을 때에는 그렇지 못한 경우가 발생했습니다. 또, 재생목록을 추가할 때 레이어에 포커싱이 되지 않거나, 즐겨 듣는 음악 리스트에 곡을 추가할 때, 사용자들에게 필요하지 않은 이미지 파일까지 읽는 등의 문제가 있었습니다. 이와 같은 중첩 레이어 상의 문제를 개선하여, 시각장애인들이 불편 없이 곡을 추가하 고 음악을 감상할 수 있도록 했습니다.  



대체 텍스트 제공과 중첩레이어의 포커싱이 개선된 Daum 뮤직앱




이용자 의견 수렴 및 C/S 해결을 통한 지속적인 개선 예정



두 차례의 뮤직앱 접근성 개선 작업 이후 다섯 분의 시각장애인 이용자를 모시고 사용자 테스트(User Test)를 수행한 결과, ‘개선 작업 이전에는 아예 접근할 수 없었던 뮤직앱을 이용할 수 있게 되었고, 불편함 없이 사용할 수 있게 되어 기쁘다.’ 는 평가를 받았습니다. Daum은 사용자 테스트 이후에도, 지속적인 C/S 접수를 통해 이용자 요구사항을 경청하여 ‘플레이어 화면에서 필수 요소인 가수와 곡명을 읽지 않고 넘어가는 문제’ 등을 개선해 나가고 있습니다.

현 재 국내의 웹이나 모바일의 접근성 정도는 아직 그 수준이 높은 편은 아닙니다. 하지만 Daum은 뮤직앱 개선 사례를 바탕으로 모바일앱 접근성 가이드를 갖추게 되었고, 이를 다른 Daum 앱에도 적용하여 더 많은 사람들이 다양한 환경에서 Daum 서비스를 이용할 수 있도록 노력하겠습니다.



  • “소프트웨어 적으로 개선할 수 있는 이외의 일들, 가령, 한쪽 귀가 들리지 않는 분들을 위해 모노 옵션을 제공한다거나, 저시력자를 위한 ‘반전’ 기능을 제공하는 등 디바이스 자체의 개선도 함께 발전했으면 좋겠습니다.”

    - 김도균, 뮤직앱 담당 -



Posted by darum

전체 댓글