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 본문

접근성

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

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



 

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

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



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

 


카카오톡메시지창


"뭐해?"

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

"무슨 일 있어?"

"이모티콘"




시각장애인은 모바일 화면을 음성으로 읽어주는 모바일 화면낭독프로그램(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 본문

공지사항

안녕하세요 이원주 입니다.


다음커뮤니케이션 웹표준기술팀 & 다음서비스 웹표준개발팀은 다룸(Darum)을 통해 웹표준 기술에 대한 내용을 국내 웹 생태계에서 함께 하시는 모든 분들과 정보를 나누고자 합니다.


. Darum(다룸) : Daum + 레퍼런스(R) 의 합성어 ("다루다"의 사전적 의미)


현재 웹은 PC를 넘어 스마트폰, 스마트TV, 태블릿 등 다양한 디바이스에 대응하는 N스크린 시대로 넘어오며 User Interface 혁신이 일어나고 있는 지금.. 웹표준 기술의 중요성은 지속적으로 대두되어왔고 그 가이드 또한 환경에 맞게 변화 하였습니다.


이에 Daum 또한 사내 개발가이드로 구축되어 있는 웹표준가이드 및 웹접근성 가이드를 다룸(Darum)을 통해 세상 밖으로 나오게 하여, 여러분과 함께 소통하려 합니다.


다룸(Darum)의 주요 기능


1. 다룸(Darum)은 총 4개의 메뉴로 구성


1.1. HTML&CSS

웹표준기술의 출발점인 HTML & CSS에 대한 사용 가이드 입니다. 

다음의 제작 방식 뿐만 아니라, 기존에 조금은 놓치고 있었던 기본적인 스펙들에 대해서 자세히 확인 하실 수 있습니다.


1.2. Accessibility

웹 접근성 가이드 입니다. 

웹 접근성이란 무엇인가 부터 다양한 접근성 검사 도구, PC와 Mobile의 접근성 지침 및 다음의 평가방법을 각종 사례를 통해 소개하고 있습니다.

특히 Mobile Web , Mobile App 의 접근성 가이드는 국내 모바일 접근성은 평가방법에 대한 가이드가 부족한 가운데 내부 평가 프로세스 및 방법을 공유함을써 보다 나은 생태계를 함께 만들어 가고자 합니다.


1.3. Snippet

다음에서 사용하는 각종 마크업 데이터를 공유 합니다.

이와함께 CSS 기반 UI Framework 인 Dough 를 오픈소스화 하여 제공 합니다.


1.4. Blog

Daum 웹표준 기술팀과 웹표준 개발팀의 소식 및 팀내에서 공유되고 있는 지식들을 많은 분들과 나누기 위해 제작되었습니다. 



2. 접근성과 사용성에 도움을 주는 여러기능 제공


다룸을 제작하면서 가장 염두하고 작업한 부분이 바로 접근성입니다. 

저시력자, 색각이상자, 고령자 뿐만 아니라, 다룸을 방문하는 모든 분들이 정보를 접하는데 불편함이 없었으면 하는 마음으로 페이지 곳곳에 접근성에 도움이 되는 기능들을 구현하려고 노력했습니다. 




모든 페이지에 접근성을 위한 폰트 사이즈 조절 기능 및 고대비 스킨 작업을 적용하였습니다. 또한 바로가기 링크와 접근성 도구를 페이지 상단에 위치시켜 원하는 컨텐츠, 접근성 도구로 쉽게 이동할 수 있도록 했습니다.


* 고대비 적용 화면




접근성 뿐만 아니라, 사용성을 위해 간편 목차 보기, 프린트 모드, 왼쪽 메뉴 없이 컨텐츠만 보기, 상단으로 이동 버튼 등을 제공하고 있습니다.




3. 반응형 웹 구현


반응형 웹으로 구현되어 모든 플랫폼에서 접근가능하며 웹표준 & 웹접근성 가이드의 정보를 누구나 어떠한 환경에서든 접근 가능하게 제작 되어 있습니다.





Daum 웹표준 기술팀 & 웹표준개발팀은 앞으로 어떻게 세상을 즐겁게 바꿀까란 기분좋은 상상을 하며 더 많이 소통해 나가도록 하겠습니다~~


감사합니다.


- 웹표준 기술팀 & 웹표준 개발팀 일동 -

Posted by darum

전체 댓글

Blog 본문

공지사항

뮤직앱 Lab 

웹 접근성을 생각하다 - 웹표준개발팀 이민재님 Mobile Lab Project 중요도 정보성은 별5개,중요도 실용성은 별5개, 중요도 오락성은 별4개, Active Date는 2013년2월18일, 개발연구원은 다음모바일 생활연구소 개발자 이민재

안녕하세요, 다음 웹표준개발팀에서 일하고 있는 이민재라고 합니다. 저는 저시력자입니다. 작년 5월 다음에 입사했고, 다음에서 제공하는 모든 서비스를 대상으로 접근성 업무를 진행하고 있습니다. 오늘은 여러분들께 시각장애인을 위한 웹접근성에 관한 이야기를 해볼까 합니다.

 

 

 

 

웹접근성, 장애인에게 꼭 필요한 이유

2011년도에 장애인 직업학교에 가게 됐는데, 거기서 처음으로 웹접근성에 대해 알게 됐어요. 장애인들이 웹 정보를 인식하는데 많은 어려움을 겪고 있다는 걸 깨달았죠. 웹접근성이 어렵다는 것 때문에 비장애인과 장애인의 정보 격차가 심화되는 것이 아쉬웠어요. 요즘은 대부분 스마트폰으로 많은 정보도 볼 수 있고 앱 사용을 해야 할 경우도 많은데, 그런 풍부한 컨텐츠를 장애인들이 제대로 사용하지 못하는 게 늘 아쉬웠죠.

현재 국내 앱의 접근성은 아직 발전이 많이 필요합니다. 10개 정도의 앱이 있다면 2~3개는 편하게 사용 가능하지만 나머지는 아직 편하게 접근하기가 쉽지 않죠. 최근에는 모바일 접근성 개념이 좀 대중화되어가고 있어서 그래도 어느 정도의 접근은 가능해졌지만, 앱의 모든 기능을 편하게 사용할 수 있는 측면에서는 아직 조금 부족해요.

 

 웹표준개발팀 이민재님웹이나 모바일의 접근성은 장애인들에게 특히 더욱 중요하답니다.

 

 

함께 개발하는 앱, 더욱 친근하죠

저는 현재 다음 웹표준개발팀에서 웹접근성 업무를 담당하고 있어요. 기본적으로 비장애인 개발자들은 다음에서 제공하는 모든 서비스에 대한 웹표준 개발, 디자인 가이드에 대한 업무를 진행하고 있고, 저는 저시력이기 때문에 공학기기를 통한 다음 서비스 접근성 테스트와 활용 업무를 맡고 있죠. 그리고 현재 다음의 여러 앱 중에서도 시각장애인들이 사용하기에 가장 편리하게 구현된 앱인 iOS 뮤직앱의 보이스오버 대응과 테스트 과정을 거치기도 했습니다. 개발자 입장이면서 동시에 실제 사용자 입장에서 개발에 참여하니 좀 더 색다른 기분이었지요. 

 

다음 뮤직앱 사용 모습제가 직접 테스트해 개발된 뮤직앱, 편리하게 사용할 수 있답니다.

 

 

모두에게 편한 뮤직앱, 전 이렇게 사용해요

저는 평소에 뮤직앱을 출퇴근하면서 자주 이용하는데, 특히 음악감상 컨텐츠를 좋아합니다. 그 중에서도 실시간 차트나 최신 앨범 리스트을 자주 이용하면서 요즘 유행하는 따끈따끈한 음악을 많이 들어요. 이렇게 이용하다 보면, 뮤직앱에서 주로 사용하는 기능인 음성 검색이나 음악 검색 같은 컨텐츠는 정말 이용하기 편하게 기술적으로 구현이 되어 있어요. 그 외에도 이미 검색한 노래 목록을 즐겨찾기에 추가해서 언제든 들을 수 있게 하는 기능도 사용하시기에 더욱 편하실 거고요. 음악 공유 기능도 빼놓을 수 없죠. 이런 기능들을 잘 활용하시면 뮤직앱은 모든 분들이 음악을 편하게 들으실 수 있을 거예요 

 

뮤직앱을 사용하고 계신 이민재님언제 어디서든 편하게 이용할 수 있는 뮤직앱!

 

 

다음의 모든 앱을 편리하게 이용하도록 노력하겠습니다!

다음 뮤직앱의 경우에는 장애인이 사용하기에 아주 편리하게 개발된, 참 모범적인 앱이라고 생각해요. 장애인이 실제로 사용하면서 어려움을 느끼지 않고 곳곳에 편리한 기능이 잘 적용되어 있으니까요. 뮤직앱의 이런 점을 많이 참고하고 모범 사례로 삼아서. 다음의 다른 앱들도 더욱 개발이 됐으면 좋겠어요. 저도 개발자의 입장에서 더욱 노력할 거고요. 모든 사람이 다음의 모든 앱을 편리하게 사용하는 그 날, 머지 않았습니다!

 

 저와 함께 더욱 발전할 다음 뮤직앱, 기대해 주세요!

 

 

뮤직앱 다운로드 언제어디서나 Music on Daum!

아이폰버전 바로가기 go!

안드로이드버전버전 바로가기 go!

QR코드 더욱빠르게 뮤직앱 만나요!

 

 

 

Posted by darum

전체 댓글