Blog 본문

접근성

HTML5 요소의 의미와 WAI-ARIA Landmark Role 의미가 겹칠 경우, 과연 어떻게 의미를 부여해야 할까요?




이슈

<nav role="navgitaion"> 상황을 보면 <nav> 라는 의미있는 요소와 WAI-ARIA 에서는 navigation이라는 Landmark Role이 선언되어 있습니다. 혹시 동일한 의미를 두 번 반복 사용하면 문제는 없을까요?


정의를 비교해 보면 다음과 같습니다.


<nav> Element

 

The nav element represents a section of a page that links to other pages or to parts within the page: a section with navigation links.


다른 페이지 또는 동일 페이지의 다른 부분으로 이어주는 섹션, 즉 내비게이션 링크로 구성된 섹션을 나타냅니다.

role="navigation" Landmark Role 

 

A collection of navigational elements (usually links) for navigating the document or related documents.


문서 또는 관련된 문서를 탐색 하기 위한 탐색 요소 (보통 링크)의 컬렉션입니다. 

 

보시다시피, 의미(특성)가 일치하여 겹친다는 것을  확인할 수 있습니다. 

이럴 경우를 대비하여, WAI-ARIA 명세에서는 Conflicts with Host Language Semantics 섹션을 마련하여 안내하고 있는데요? 

  • * WAI-ARIA의 상태와 속성이 WAI-ARIA 의미가 내포된 동일한 호스트 언어(여기서는 HTML특성과 일치할 경우, 특히 WAI-ARIA 기능을 이용하는 것이 문제가 될 수 있다.
  • * 강한 기본 의미(Strong Native Semantics)를 가지는 호스트 언어는 WAI-ARIA로 Override(무효화) 할 수 없는 문서 기능을 할 수 있다.


 "요소의 의미와 WAI-ARIA 의미가 일치하여 겹칠 시 WAI-ARIA를 사용하면 문제가 될 수 있다."는 것을 알 수 있습니다.


WAI-ARIA 정의를 제거한 <nav>요소 자체만으로 의미가 부여되므로 별도의 WAI-ARIA 정의를 하지 않아도 됩니다.



예제

Element + Landmark Role

Element
<header id= "daumHead" role= "banner" >
<article id= "mArticle" role= "main" >
<footer id= "daumFoot" role= "contentinfo" >
<nav role= "navigation" >
<article id= "daumContent" role= "main" >
<footer id= "daumFoot" role= "contentinfo" >
<header id= "daumHead" >
<article id= "mArticle" >
<footer id= "daumFoot" >

<nav>

<main id= "daumContent">
<footer id= "daumFoot"> 

 

참고 자료

자세한 W3C 명세 내용은 하기 사항을 참고바랍니다.

 

HTML5 + WAI-ARIA Conflicts with Host Language Semantics 내용 요약

 WAI-ARIA의 roles, 상태 및 속성은 이러한 의미를 이용할 수 없는 네이티브 호스트 언어 요소, 그리고 일반적으로 자체적으로 네이티브 의미가 없는 요소를 사용하는 경우 의미 정보를 추가하기 위한 것이다. 또한 유사하지만 동일하지 않은 의미를 가진 요소에 사용될 수 있다. 

접근성 API로 닿게 하는 방법을 정의 하는 WAI-ARIA 시멘틱를 항상 사용해야 한다. 

단, 아래 이슈로 인해 WAI-ARIA의 상태와 속성이 WAI-ARIA 의미가 내포된 동일한 호스트 언어 특성과 일치할 경우 제외 한다.
(WAI-ARIA 기능을 이용하는 것이 문제가 될 수 있다.) 

  • * WAI-ARIA 기능, 호스트 언어의 기능을 모두 제공시 그 값이 동기화(Sync)를 유지하지 않는 경우, 사용자 에이전트와 보조 기술은 사용할 값을 알 수 없다.

    • -- 의미 겹침을 위해 호스트 언어를 명시적으로 선언해야 한다.
      ※ User Agent는 WAI-ARIA 특성을 무시하고 대신 같은 암시적 의미를 가진 호스트 언어의 속성을 사용해야 한다.
  • * 강한 기본 의미를 가진 요소는 절대적인 WAI-ARIA의 의미 기능을 할 수 있다.

    • -- 호스트 언어 경우 WAI-ARIA로 덮어 쓸 수 없는 문서 기능을 할 수 있다.
  • * 적합성 검사기는 오류 또는 경고 신호 있을 수 있다.
  • * 이 경우 의미가 WAI-ARIA로 변경 한 경우의 처리는 불확실하다. 

 

※ 위 내용은 WAI-ARIA 및 HTML5 명세를 토대로 요약 정리된 문서입니다. 

참고



by. 접근성파트 bless

Posted by darum

전체 댓글

Blog 본문

접근성

TTS기술을 적용하여 색다르게 KBO리그를 즐길 수 있는 음성 캐스터중계가 있다는 걸 아시나요?




올해  대한민국 야구는 마리한화 열풍이 대단하죠. 야구 관중뿐만 아니라 중계를 즐기는 야구팬도 늘고 있는 추세입니다.

다음카카오에서 지난 5월 TTS기술을 이용하여 캐스터 중계를 음성으로 들을 수 있는 서비스를 시작하였습니다.

TTS(TTS ; Text-To-Speech )는 문자를 자동으로 사람이 들을 수 있는 음성으로 변환해 주는 기술을 말합니다.
 
이전부터 다음스포츠에서는 홈/원정 팀을 각각 응원하는 편파 캐스터중계를 제공하고 있었고, 이와 TTS기술을 결합하여 음성 캐스터중계 서비스를 제공하게 되었습니다.





다양한 스포츠 방송 활동으로 야구 팬들에게 낯익은 정우영, 정순주 아나운서의  목소리를 이용하여 홈/원정 팀 중계를 제공합니다.

현장감 있는 TTS 중계를 위해 볼카운트, 점수, 타율 읽기 등 야구 특화 언어처리를 적용하였으며 역전 홈런, 호수비 등 주요 경기 상황에는 아나운서의 음성에 편파적 감정이 반영되도록 했습니다.




그동안 캐스터 중계 서비스를 이용한 시각장애인 사용자는 실시간으로 갱신되는 정보를 바로 인식할 수 없어서 새로운 중계정보가 있는지 수시로 일일이 확인해야 했습니다.

하지만 TTS기술를 적용한 음성 캐스터중계를 이용하게 되면 실시간으로 음성을 출력해 주어 편리하게 야구 진행 상황을 파악할 수 있습니다.

딱딱한 TTS 음성이 아닌 스포츠 전문 아나운서의 음성으로 들려줌으로써 생생한 현장감을 느낄 수 있습니다.

시각장애인 사용자가 야구 중계를 시청하기 위해 그동안은 영상중계를 선택하여 듣다보니 불필요하게 데이터를 많이 사용하게 되었습니다.  음성 캐스터중계는 영상 중계에 비해 데이터 사용이 적다 보니 테이터 부담을 줄여줄 수 있습니다.





이용방법

청취를 원하는 사용자는 다음스포츠 모바일 홈페이지(http://m.sports.media.daum.net/m/sports/) 에서 'KBO리그' 또는 '야구 - 일정/결과'에서 당일 캐스터중계 경기를 선택한 후 게임센터 경기중계 탭으로 이동하면 됩니다.



by. 접근성팀 Gio & Hale





Posted by darum

전체 댓글

Blog 본문

접근성

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

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

 



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

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



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

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

 




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


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

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


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


  



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


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

 


 

 


앱 다운로드 : iOS / Android

 

 



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

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

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


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



by. 접근성팀 Ellen & Gio


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

전체 댓글