Daum 웹표준을다루다 Web Standards Darum

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

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

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

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

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

어려워, 어려워 ...

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

• + 관련지침 : 1.3.3 텍스트 컨텐츠의 명도 대비
  

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

• + 관련지침 : 1.3.1 색에 무관한 컨텐츠 인식

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

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

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

속이 꽉찬 남자 99.9~ NO NO

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

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

by 접근성팀 Hale & Gio

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

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

개요

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

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 정보

테스트 기기

TEST 결과

by 접근성팀

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

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

개요

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

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

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

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

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

TEST 정보

TEST 결과

<time>10:00</time>

<time>13:30:25</time>

6:30

<time datetime="2015-02-14 20:00">발렌타인 데이</time>

Android

<time>10:00</time>

<time>13:30:25</time>

6:30

<time datetime="2015-02-14 20:00">발렌타인 데이</time>

by 접근성팀