널리 알리는 기술 소식 다양한 접근성과 사용성, UI 개발에 대한 소식을 널리 알리고 참여하세요!
Spread your knowledge!

포럼 우리 모두의 소중한 의견이 모이는 곳입니다.

검색하기
  • tip
    [HTML Native & Screen Reader] 제목 태그에 다른 태그를 넣으면 생기는 일
    Webacc NV 2020-08-05 15:30:31

    웹 페이지 중에는 제목에 많은 정보를 담고자 span이나 em 등의 태그를 넣는 사례를 자주 볼 수 있습니다.
    제목 태그에 자식 태그를 넣는 것이 금지된 것은 아니나, 자식 태그가 있는 헤딩 요소와 없는 요소를 스크린리더로 탐색할 때는 매우 다르게 인식하게 됩니다.

    <h3>OO 검색 결과 <em>59</em></h3>

    다음의 코드는 시각적으로 아무 문제 없이 한 줄로 표시될 것입니다. 하지만 스크린리더 사용자가 가상커서를 켠 상태로
    위/또는 아래 화살표 키로 웹을 볼 때, "검색결과, 헤딩 레벨3"과 "59, 헤딩 레벨3"이 따로 읽힐 것입니다.

    이는 스크린리더의 특성중 하나로, span과 같이 네이티브 HTML 태그를 넣었을 때, 마치 헤딩이 두 개인 것처럼 읽히는 현상을 보입니다.
    웹을 스크린리더로 오랫동안 사용해왔던 사람은 이에 대해 금방 인지할 것이나, 웹을 사용한지 얼마 안된 초심자의 경우에는
    한 개의 헤딩 태그임에도 마치 두 개의 헤딩이 제공된 것처럼 인지할 수 밖에 없습니다.

    이를 해결하기 위해서는 자식 요소로 사용될 태그에 role="none" 속성을 삽힙해야 합니다.
    우선 em이나 strong은 시멘틱 태그로, role="none"으로 숨기는 것 자체가 그리 바람직하지 아닙니다.
    하지만 role="none"으로 숨기지 않은 경우에는 스크린리더와 브라우저 환경에 따라 버그가 발생할 수도 있습니다.
    따라서, 두 줄로 읽히는 문제 이전에 버그를 방지하기 위해서는 이와같이 role="none"을 반드시 적용해 주어야 합니다.

    댓글을 작성하려면 해주세요.
  • tip
    [Android native] SeekBar 구현 시 stopTrackingTouch 메소드와 TalkBck 관련
    Webacc NV 2020-08-05 11:15:00

    스크린 리더 사용자가 SeekBar 컨트롤에서 볼륨키를 사용하여 값을 조절해도 실제 반영이 안 되는 경우를 보곤 합니다.

    이것은 어떤 이유 때문일까요?

    SeekBar 구현시에는 일반적으로 3개의 메소드를 오버라이드 합니다.

    1. onProgressChanged

    2. onStartTrackingTouch

    3. onStopTrackingTouch

    위의 3개의 메소드를 활용해서 사용자가 값 조절을 시도하면 이에 대한 액션 이벤트를 구현하게 됩니다.

    보조기술을 사용하지 않는 사용자는 SeekBar를 터치한 상태로 값을 조절합니다.

    그러나 보조기술을 사용하는 경우에는 보조기술에서 지원해주는 방법을 통해서도 값을 조절합니다.

    그런데 문제는 사용자가 값을 터치한 상태로 조절할 경우에만, 즉 onStart 혹은 onStop 메소드(터치 시작 혹은 끝 동작)이 실행되는 경우에 이벤트가 발생하도록 구현하는 경우가 많다는 것입니다.

    이렇게 구현하면 보조기술을 사용하여 값을 조절하는 것은 터치 동작이 아니므로 값 반영이 안 됩니다.

    따라서 특별한 경우가 아니라면 터치 동작이 실행되거나 종료될 때가 아닌, 값이 변경될 때 이벤트가 발생할 수 있도록 구현이 필요합니다.

    그럼에도 불구하고 반드시 터치 동작이 실행, 혹은 종료될 때 이벤트를 발생시켜야 한다면 이 때도 performAccessibilityAction 메소드 안에서 이를 해결할 수는 있습니다.

    댓글을 작성하려면 해주세요.
  • tip
    [웹브라우저] 최근 변경된 크롬의 초점 표시 변경 관련
    Webacc NV 2020-08-04 10:43:55

    웹페이지를 탐색할 때 사용자의 상황에 따라 마우스 뿐만 아니라 키보드 탭 혹은 스위치 디바이스를 사용하여 페이지를 탐색하는 경우도 많습니다.

    따라서 링크, 버튼과 같이 상호작용이 가능한 요소에는 반드시 키보드로 접근하더라도 초점이 시각적으로 표시되어야 하는 것은 접근성의 기본 중의 기본입니다.

    예전 크롬 버전까지는 기본 초점을 연한 파란색으로 표시를 했는데 이때 비슷한 계열의 배경색을 사용하는 경우에는 사용자가 초점을 찾기 어렵다는 문제가 있었습니다.

    이를 해결하기 위해 최신 크롬 버전부터는 기본 초점이 두 겹의 윤곽선으로 변경되었습니다. 안쪽 윤곽선은 검정색이며, 바깥 윤곽선은 흰색으로, 가장 많이 사용하는 검정색 배경을 사용하는 웹페이지와 흰색 웹페이지에서 문제 없이 초점을 확인할 수 있게 되었습니다.

    댓글을 작성하려면 해주세요.
  • tip
    웹 접근성 향상을 위한 기획의도 분명히 하기
    에어류 2020-08-03 18:31:08

    안녕하세요! 에어류입니다. 

    오늘은 웹 접근성을 적용할 대상에 대해 정확하게 기획자가 의도에 맞추어 콘텐츠를 제공해주는 지침 외의 이야기를 소개할까합니다. 

     

    우선 아래 그림을 한번 보시겠습니다.

    제8회 삼성전기 인사이트 엣지 논문대상 공모 포스터

    위에 이미지에 대한 대체텍스트를 제공하려고 할 때 갑자기 헷갈리실 수 있습니다.

    '어? 안에 내용을 다 써야 하나?"

     

    대체텍스트를 제공할 때 생략하다가 각종 평가에서 쓴맛을 보신분들은 되도록 보여지는 텍스트에 대해서 다 기록하려고 하실 것 같습니다.

    결론부터 말씀드리면 해당 이미지의 대체텍스트는 "제8회 삼성전기 inside Edge 논문대상 공모 포스터"로 제공하시면 됩니다. 

    물론 추가적인 부연설명이 있으시다면 title로 제공하실 수 있습니다. 

     

    그런데 이 때 몇가지 글씨가 눈에 보이니 해당 텍스트가 정보를 주고 있다면 대체텍스트를 제공해야하지 않느냐 하는 논란이 있을 수 있습니다. 

    사실 포스터의 이미지 크기가 애매하게 자리를 차지하고 있고, 보이는 텍스트도 있고, 보이지 않는 텍스트도 있습니다. 

    그래서 기획자의 입장에서 웹 접근성 향상과 함께 여러가지 혼란을 막기 위해서는 이미지 크기를 정말 썸네일처럼 활용하셔서 아예 작게 하시거나 모든 포스터 내용의 정보를 보여주고자 한다면 더 크게 보실 수 있게 하시고 해당 대체텍스트를 제공해주시는 것이 좋습니다. 

    기획자는 콘텐츠를 제공할 때 그 콘텐츠가 단순하게 포스터의 장식적인 이미지로 제공할 것인지 구체적인 내용을 보여주기 위해 제공할 것인지를 먼저 판단하고 그 크기에 맞게 제공하실 때 접근성을 적용하고자 하는 그 취지를 쉽게 이해할 수 있어 웹 접근성 향상으로 이어질 수 있습니다. 

     

    색상으로 콘텐츠간의 의미를 주는 것처럼 보이나 의도가 분명치 않은 녹색경영추진 연혁 콘텐츠(연도별로 옅은 회색, 회색, 짖은회색, 녹색으로 그려진 것 같으나 콘텐츠 세부 내용에 색상이 통일되지 않아 결국 아무 색상적인 의미가 없는 연역 연대기)

     

     이 녹색경영 추진 연혁은 자세히 살펴보지 않으면 마치 연도별로 옅은 회색에서 회색, 짙은 회색에서 녹색으로 녹색경영이 강화되고 있는 것처럼 보입니다. 만약 그런 의도로 이미지가 제작되었다면 색상으로만 녹색경영이 강화되는 정보를 추가로 주고 있어 웹 접근성 준수 기준에 부합하는지 고민을 해야할 이미지가 될 수 있습니다. 그러나 자세히 보면 녹색의 표시가 연혁 전반에 있고, 해당 정보를 제공하는 텍스트가 모두 녹색으로 표시되어 색상이 주는 정보는 없습니다. 그럼에도 불구하고 평가오류를 일으킬만한 색상 사용이 있습니다. 

    기획자 또는 디자이너가 부분 강조를 위해 녹색을 사용하고 있지만 의미 부여가 혼란스럽네요. 

    콘텐츠의 의도를 분명히 하기 위해서 색상의 사용에도 조심스럽게 접근하면 더욱 좋겠습니다. 

     

     

    댓글을 작성하려면 해주세요.
  • tip
    [Android native] SeekBar 클래스에 AccessibilityManager.interrupt() 메소드 적용 시 주의사항
    Webacc NV 2020-08-03 16:35:27

    며칠 전에 SeekBar를 스크린 리더 사용자가 조금 더 효율적으로 사용할 수 있는 접근성 팁을 공유했습니다.

    오늘은 interrupt 메소드 적용 시 주의해야 할 사항에 대해 공유하려고 합니다.

    지난 글에서 언급했듯이 progressBar가 증가 혹은 감소하는 이벤트가 발생할 때 interrupt 메소드를 사용하면 스크린 리더 사용자가 빠르게 퍼센트를 조절할 때 좀 더 자연스러운 조작이 가능합니다.

    그런데 조금 더 곰곰이 생각해 보면 한 가지 의문이 생깁니다.

    SeekBar는 퍼센트를 사용자가 직접 조절하는 경우도 있지만 음악 재생과 같이 자동으로 퍼센트가 증가하는 이벤트가 발생하는 SeekBar도 있습니다.

    이런 요소에 interrupt를 적용하면 어떻게 될까요?

    스크린 리더 사용자가 SeekBar가 아닌 다른 요소를 탐색하다가도 퍼센트가 변경되면 읽던 것을 interrupt 시켜 오히려 곤란한 상황이 발생합니다.

    그럼 이것에 대한 해결 방법은 무엇일까요?

    바로 performAccessibilityAction 메소드를 활용하는 것입니다.

    정리하면 재생과 같이 자동으로 SeekBar 퍼센트가 변경되는 요소에는 사용자가 퍼센트를 조절하는 경우에만 interrupt 이벤트가 실행되게끔 해야 합니다.

    기회가 될 때 performAccessibilityAction에 대해 다루어 보겠습니다.

    댓글을 작성하려면 해주세요.
  • tip
    [HTML] 버튼 텍스트 레이블 변경과 aria-live에 관하여
    Webacc NV 2020-07-31 13:38:16

    얼마전에 안드로이드 접근성 이벤트에 대해 기술하면서 사용자의 액션에 의한 텍스트 변경에 대해 살펴본 적이 있습니다.

    웹페이지에서도 스크린 리더 사용자가 키보드를 이용하여 버튼을 누르면 버튼의 텍스트가 변경되는 경우들을 종종 보곤 합니다.

    예를 들어 뮤직 플레이어에서 반복 컨트롤 버튼이 있다고 가정해 봅니다.

    '반복 해제됨'이라는 버튼 텍스트가 있다면 그 버튼을 누를 때마다 '한 곡 반복 설정됨', '전체 반복 설정됨' 등으로 레이블이 변경될 것입니다.

    기본적으로 스크린 리더에서는 버튼 요소의 속성 값(aria-label, value, aria-expanded 등)이 변경되면 특별히 접근성 구현을 하지 않더라도 변경되는 값이나 텍스트 정보를 읽어주게 됩니다.

    그러나 버튼 요소 자체의 텍스트가 변경되는 경우에는 변경되는 텍스트를 사용자에게 바로바로 읽어주지 못합니다.

    <button id="test">반복 해제됨</button>

    따라서 키보드 조작 등에 의해 버튼의 텍스트 정보가 변경되는 경우에는 aria-live 속성을 추가하여 변경되는 텍스트 정보를 바로바로 들을 수 있도록 접근성에 대한 고려가 필요합니다.

    그렇지 않으면 버튼을 눌러도 스크린 리더 피드백이 없으므로 버튼의 텍스트가 변경되었는지조차 알기 어렵습니다.

    물론 해당 구현을 하는 경우 스크린 리더와 브라우저의 특성에 따라 약간의 버그들이 있습니다.

    예를 들면 NVDA에서 크롬 브라우저로 테스트 했을 때 변경되는 aria-live 텍스트 값을 두 번식 읽는 경우가 발생하였으며

    페이지 로드 후 변경되는 텍스트 버튼에서 엔터를 눌러 aria-live 속성이 처음 추가되는 시점에는 변경된 텍스트 정보를 읽지 못하는 버그도 있습니다.

    그럼에도 불구하고 변경되는 텍스트를 읽어주도록 구현하는 것은 매우 중요하므로 해당 부분을 고려해 보시면 좋겠습니다.

    단 aria-live 속성을 사용하지 않으려면 위에서 언급한 aria-label을 사용할 수 있으며 aria-label="전체 반복 설정됨" 등과 같이 마크업 할 수 있겠습니다.

    댓글을 작성하려면 해주세요.
  • tip
    [Android native] SeekBar와 AccessibilityManager class의 interrupt 메소드
    Webacc NV 2020-07-30 12:55:42

    앞으로 두 번에 걸쳐 SeekBar에 대한 팁을 공유하려고 합니다.

    SeekBar는 접근성에 문제가 없는 이상 TalkBack 사용자는 볼륨키를 사용해서 밸류 값을 조절하는 경우가 많습니다.

    그런데 볼륨키로 값을 아주 빠르게 조절하게 되면 볼륨 키를 누를 때마다 기존에 읽던 내용을 멈추고 새로 갱신된 값을 읽어주어야 하는데 기존에 읽던 밸류 및 레이블 정보를 다 읽고 갱신된 정보를 읽습니다.

    따라서 갱신된 정보를 듣기 위해 스크린 리더 사용자는 어느 정도 기다려야 하는 불편함이 발생합니다.

    게다가 SeekBar에 적용된 대체 텍스트 혹은 labelFor 정보가 긴 경우에는 이러한 불편함은 더 크게 느껴질 것입니다.

    이를 해결하기 위해 우리가 사용할 수 있는 메소드가 interrupt 입니다.

    interrupt 메소드를 적용하면 이벤트가 연속적으로 발생할 때 접근성 서비스가 기존에 읽던 내용을 말 그대로 가로채고 새로 갱신된 내용을 읽도록 하는 것입니다.

    따라서 이것을 다음과 같이 적용할 수 있겠습니다.

    public void onProgressChanged(SeekBar seekBar, int progresValue, boolean fromUser) {
    
    final AccessibilityManager accessibilityManager = (AccessibilityManager) getSystemService(Context.ACCESSIBILITY_SERVICE);
        accessibilityManager.interrupt();
        progress = progresValue;
    }
    댓글을 작성하려면 해주세요.
  • tip
    HTML] aria-live, display:none, 그리고 display:block 관련
    Webacc NV 2020-07-29 16:15:41

    웹페이지 환경에 따라 사용자의 키보드 엔터와 같은 액션이 있을 경우 페이지가 새로고침되지 않고 display:none으로 숨겨진 '전송 완료'와 같은 텍스트가 display:block 되면서 화면에 표시되는 경우가 있습니다. 

    이때 접근성을 구현하기 위해서 aria-live 속성을 적용하게 됩니다.

    물론 role="alert" 속성을 사용해도 되지만 센스리더 사용자의 환경까지 고려한다면 aria-live 속성이 더 범용적입니다.

    그렇지 않으면 스크린 리더 사용자가 화면에 나타난 텍스트가 있는지 알지 못하기 때문입니다.

    그런데 이때 유의해야 할 것은 반드시 aria-live는 display:none에서 block이 되는 요소 상위에 있어야 한다는 것입니다. 

    만약 display:block으로 변경되는 요소 자체에 aria-live 속성이 있으면 이를 스크린 리더가 읽어주지 못합니다.

    다음은 접근성이 잘 적용된 예시라 할 수 있습니다.

    <div aria-live="polite">

        <p id="paragraph" style="display: none;">This is a new paragraph.</p>

       </div>

    댓글을 작성하려면 해주세요.
  • tip
    [Android native] 확장/축소 접근성 구현 관련
    Webacc NV 2020-07-28 18:39:46

    앱을 구현하다보면 특정 요소를 탭했을 때 이에 해당하는 하위 콘텐츠가 확장되거나 축소되는 객체들을 만드는 경우들이 있습니다.

    예를 들어 과일 리스트 버튼을 탭하면 그 아래로 사과, 오렌지, 배 등의 과일들이 표시되고 다시 한번 더 과일 리스트 버튼을 누르면 하위 요소들이 숨겨지는 UI 입니다.

    그런데 이때 확장/축소가 되는 버튼에 추가 접근성 구현을 하지 않으면 스크린 리더 사용자는 이중탭했을 때 해당 요소가 확장이 되는 것인지 축소가 되는 것인지를 알 수 없습니다.

    안드로이드에서는 이를 지원하기 위한 메소들 제공하고 있는데 

    (AccessibilityNodeInfo.AccessibilityAction.ACTION_COLLAPSE) 혹은 EXPAND 입니다.

    이것을 AccessibilityNodeInfo 정보에 추가해 주면 축소된 경우에는 접음, 확장된 경우에는 펼침 이라고 음성을 출력해 주게 됩니다.

    마치 HTML에서 aria-expanded 속성을 추가한 것과 비슷합니다.

    다만 이 AccessibilityAction을 제대로 적용하려면 performAccessibilityAction 메소드를 오버라이드 하여 expand, collapse 속성에 따른 확장/축소 구현을 한 다음 이를 onClick과 같은 요소에 적용해 주어야 합니다. 

    조만간 이에 대한 아티클을 발행해 보도록 하겠습니다.

    댓글을 작성하려면 해주세요.
  • tip
    [메일] Windows 오피스 365 아웃룩에서 제공하는 대체 텍스트 삽입
    Webacc NV 2020-07-27 14:53:26

    스크린 리더 사용자 입장에서 여러 회사에서 발송되는 메일을 받았을 때 느끼는 접근성 이슈 중 하나는 대부분 메일의 이미지에 대한 대체 텍스트가 삽입되어 있지 않다는 것입니다.

    메일도 하나의 웹페이지에 해당하므로 이미지에 대한 대체 텍스트 삽입은 웹피이지 뿐만 아니라 메일에서도 중요합니다.

    그런데 메일 작성 시 오피스 365 아웃룩을 사용하게 되면 메일 프로그램 내에서 이미지에 대한 대체 텍스트 삽입이 가능합니다.

    첨부한 이미지를 선택하고 마우스 오른쪽 버튼 혹은 팝업키를 누르면 대체 텍스트 편집 혹은 삽입이 있습니다.

    오피스 아웃룩을 사용하신다면 해당 기능을 이용해 보시기 바랍니다.

    댓글을 작성하려면 해주세요.
  • tip
    [HTML Native & Screen Reader] 가상커서와 title 속성
    Webacc NV 2020-07-23 11:52:11

    input, button과 같은 form의 컨트롤 요소, 링크 등과 같이 키보드의 tab 키를 눌러 이동할 수 있는 요소에는 title 속성을 작성할 수 있습니다.

    title 속성이 제공된 컨트롤에 마우스 포인터가 올라가면 말풍선을 제공하며, title 속성에 작성된 텍스트가 표시됩니다. 이처럼 스크린리더를 사용할 때, Tab 키로 title이 있는 컨트롤로 초점을 이동하면 스크린리더가 타이틀 텍스트를 읽게됩니다.

    이 title 속성은 국내에서는 링크의 새 창 안내와 같은 이슈로 인해 앵커 태그에 "새 창" 이라는 텍스트로 많이 사용중인 것을 볼 수 있습니다. 하지만, title 속성에는 맹점이 있습니다. 

    HTML에서 컨트롤 요소가 아닌 기본 요소는 초점이 없습니다. 따라서 커서 브라우징과 같은 별도의 키보드 접근성 기능을 사용하지 않고서는 키보드로 텍스트에 접근할 수 없습니다. 이와 마찬가지로 스크린리더 사용자들은 가상커서를 통해 텍스트에 접근하는데, 당연히 이 가상 커서로 버튼과 같은 컨트롤에 접근할 수 있습니다.

    하지만, 시스템 커서와 스크린리더의 가상 커서는 별도의 프로그램이기 때문에 방향키나 스크린리더의 탐색 단축키로 이동하면 스크린리더 특성으로 인해 Tab 키로 컨트롤에 접근한 것과 다르게 읽습니다.

    그 특성때문에 생기는 대표적인 문제 중 하나가 화살표 키나 스크린리더의 빠른 탐색 단축키를 사용하여 컨트롤에 접근하면 title 속성을 읽지 않는다는 것입니다. 추가로 aria-describedby도 이와 동일한 문제를 갖고 있습니다.

    따라서 중요한 내용을 스크린리더 사용자에게 전달하고자 할 때에는 title 속성이나 aria의 describedby보다는 요소의 특성에 따라 숨김 텍스트나 live region 같은 대체 수단을 사용하는 것이 바람직힙니다.

    댓글을 작성하려면 해주세요.
  • tip
    [Android native] setSelected 메소드와 스크린리더 관련
    Webacc NV 2020-07-22 17:08:10

    일반적으로 setSelected 메소드는 여러 요소 중 하나가 선택되었을 때 사용합니다. 

    예를 들어 과일 리스트, 채소 리스트, 육류 리스트 중 하나가 선택되어 있다면 선택된 요소에 setSelected="true" 속성을 사용하게 됩니다.

    setSelected true가 적용되면 TalkBack에서 해당 요소에 포커스 했을 때 '선택됨'이라고 읽어줍니다.

    그런데 setSelected 속성이 선택됨, 즉 상태정보를 표시하는 요소가 아닌 경우에도 사용되는 경우를 가끔 보곤 합니다.

    그렇게 되면 스크린 리더 사용자는 해당 요소에 포커스 했을 때 선택됨 이라는 상태정보를 듣게 되어 레이아웃 파악이 혼란스럽습니다.

    따라서 setSelected 속성은 상태정보를 나타내는 영역에만 사용하는 것이 좋습니다.

    만약 부득이 상태정보를 나타내는 요소가 아님에도 사용해야 한다면 접근성 API가 해당 속성을 무시할 수 있도록 AccessibilityNodeInfo 정보 수정이 필요합니다.

    AccessibilityNodeInfo 정보를 수정하려면 수정하고자 하는 객체에 setAccessibilityDelegate 객체를 만들어 onInitializeAccessibilityNodeInfo 메소드를 선언한 다음 info.setSelected="false"와 같이 수정할 수 있습니다.

    댓글을 작성하려면 해주세요.
  • tip
    [iOS native] 화면 상단의 메인 제목을 머리말로 읽어주지 않는다면
    Webacc NV 2020-07-21 18:52:59

    안드로이드 플랫폼과 달리 iOS에서는 각 화면에 제목이 표시되는 경우 제목 요소는 VoiceOver가 '머리말'이라고 읽어주는 것이 스크린 리더 사용자에게 자연스럽습니다.

    접근성을 테스트 하다보면 화면 메인 제목을 '머리말'이라고 읽어주지 않는 경우를 종종 보곤 합니다.

    NavigationController를 사용하여 각 화면에 제목을 지정하는 경우에는 특별한 작업을 하지 않아도 VoiceOver가 제목 요소로 인식하여 '머리말'이라고 읽어줍니다.

    그러나 UILabel을 사용하여 커스텀 제목을 삽입하면 당연하게도 UILabel은 일반 텍스트 요소이므로 화면의 제목임을 VoiceOver가 인식하지 못합니다.

    따라서 화면 메인 제목이 UILabel이라면 UIAccessibilityTrait header를 사용함으로써 좀 더 의미에 맞는 요소 유형을 제공할 수 있습니다.

    댓글을 작성하려면 해주세요.
  • news
    톡백 베타 버전에 추가된 multi finger gesture 도입 및 기타 기능 추가에 관하여
    Webacc NV 2020-07-20 18:53:28

    현재 안드로이드 11 베타 버전이 공개되어 픽셀 단말기를 가지고 있다면 베타 버전을 사용해볼 수 있습니다.

    현재 베타 버전에는 TalkBack 9점때 버전이 탑재되어 있는데 TalkBack 개발자 설정에서 multi finger 제스처 기능을 활성화 할 수 있습니다.

    이렇게 되면 기존 아이폰에서 사용하던 두 손가락 두 번탭/세 번탭/두 번탭하고 길게 누르기, 세 손가락, 네 손가락 관련 여러 손가락 제스처를 활용할 수 있습니다.

    갤럭시폰에 탑재된 VoiceAssistant에서 사용 가능했던 제스처들을 TalkBack에서도 사용 가능하다고 보시면 됩니다.

    또한 할당할 수 있는 제스처에도 예전에는 없던 음성 피드백 중지, 미디어 일시정지 및 재생 기능이 추가되었습니다.

    현재 안드로이드 베타 버전이 업데이트 될때마다 기능이 추가되고 있으므로 실제 버전이 출시되었을 때를 기대해 보아도 좋을 것으로 보입니다.

    댓글을 작성하려면 해주세요.
  • tip
    [HTML 공통] WAI-ARIA로 탭컨트롤 구현 시 탭패널 시작 콘텐츠가 텍스트인 경우
    Webacc NV 2020-07-17 14:29:52

    탭키를 눌러 WAI-ARIA로 구현된 탭컨트롤에 포커스 하면 스크린 리더의 가상커서가 자동으로 꺼집니다.

    이는 과일 리스트, 채소 리스트, 육류 리스트와 같은 각 탭 요소 이동은 탭키가 아닌 화살표 키를 이용하도록 하고 있기 때문입니다.

    그리고 다시 탭키를 누르면 탭 본문 콘텐츠로 이동하고 스크린 리더 가상커서는 자동으로 켜집니다.

    탭 본문 시작이 '사과 링크, 포도 링크'와 같이 포커스가 가능한 요소이면 탭을 눌렀을 때 링크가 탭 본문의 첫 번째 내용이므로 문제가 없습니다. 

    그러나 탭 본문 시작이 '과일은 우리의 건강에 많은 도움을 줍니다'와 같이 텍스트라면 탭 컨트롤에서 탭키를 누르는 순간 탭 본문 콘텐츠의 첫 텍스트가 아닌 다른 영역의 링크 요소로 포커스 되기 때문에 본문 시작지점으로 이동하기 위해 여러번 키조작을 해야 한다는 문제가 있습니다.

    기본적으로 텍스트 콘텐츠에는 탭키로 포커스 할 수 없는 것이 일반적이지만 탭 콘텐츠가 텍스트로 시작한다면 예외적으로 텍스트 시작 지점에 tabindex="0" 속성을 주어 포커스가 가능하도록 구현해 주는 것이 스크린 리더 사용자의 효율적인 웹 탐색을 도울 수 있습니다.

    단 tabindex는 본문 콘텐츠가 시작되는 div 영역에 주기보다는 첫 번째 텍스트가 들어가는 p 요소에 주는 것이 좋습니다.

    이는 현재 안드로이드 TalkBack의 경우 탭패널, 즉 탭 본문 콘텐츠에 aria-labelledby 속성이 포함되고 본문 전체를 감싸는 div에 tabindex를 주는 경우 탭콘텐츠 내의 텍스트 영역을 읽지 못하는 문제가 발생하기 때문입니다.

    댓글을 작성하려면 해주세요.
  • tip
    [Android native] 사용자의 이중탭에 의해 버튼의 텍스트가 변경되는 경우
    Webacc NV 2020-07-16 18:42:20

    사용자가 특정 객체를 이중탭했을 때 이중탭한 요소의 텍스트가 변경된다면 스크린 리더가 변경된 내용을 바로 읽을 수 있도록 접근성을 구현해 주어야 합니다.

    대부분 추가 작업을 해 주지 않아도 TalkBack에서 알아서 변경된 내용이나 상태정보를 읽어주는 것들이 많지만 그렇지 못한 상황도 있습니다.

    재생/일시정지, 랜덤재생/순차 재생과 같이 사용자가 탭할 때마다 버튼의 텍스트가 변경되는 객체가 있다고 가정해 보겠습니다.

    객체의 텍스트가 대체 텍스트, 즉 contentDescription을 사용하여 구현한 경우라면 스크린 리더 사용자가 이중탭할 때마다 바뀐 텍스트 내용을 자동으로 읽습니다.

    그러나 화면에 보여지는 텍스트, 즉 android:text로 구현한 경우에는 이중탭을 해도 바뀐 텍스트 내용을 읽어주지 못합니다.

    이를 해결하려면 화면의 텍스트가 변경되었을 때 sendAccessibilityEvent 메소드의 컨스턴트 중에서 TYPE_VIEW_SELECTED를 사용하면 됩니다.

    지난 번에 소개해 드린 TYPE_VIEW_FOCUSED 컨스턴트와 다른 점은 SELECTED를 사용하면 변경된 텍스트만 읽게 된다는 것입니다.

    즉 랜덤 재생 버튼에 포커스한 상태에서 이중탭했을 때 순차 재생으로 변경되었다면 스크린 리더 사용자에게 필요한 정보는 '순차 재생 버튼'이 아니라 '순차 재생'이므로 TYPE_VIEW_SELECTED 컨스턴트를 사용하는 것입니다.

    댓글을 작성하려면 해주세요.
  • tip
    [iOS native] iOS 14에서 TabBar 구현시 VoiceOver가 읽어주는 방식 변경 관련
    Webacc NV 2020-07-15 18:18:45

    iOS 14에서는 TabBar를 구현할 경우 VoiceOver 포커스가 탭 영역에 진입하면 탭막대라고 음성을 출력하여 영역에 대한 정보를 조금 더 자세하게 알려줍니다.

    예를 들어 하단 탭바에 과일 리스트, 채소 리스트, 육류 리스트가 있고 VoiceOver 포커스가 일반 콘텐츠에서 탭 컨트롤 영역에 진입하면 영역 정보가 변경되었으므로 '탭막대, 과일리스트'라고 음성을 출력합니다.

    물론 아직은 개발자 버전이라 버그도 있습니다. 

    일반 콘텐츠에서 탭바로 진입할 경우에는 현재 선택된 탭 정보의 선택됨 상태정보를 읽지 못합니다.

    이 문제는 정식 업데이트 때에는 해결되길 바라봅니다.

    댓글을 작성하려면 해주세요.
  • tip
    [iOS native] VoiceOver 포커스가 시간, 배터리 등이 표시되는 상태바 영역으로 날아가는 접근성 이슈 해결하기
    Webacc NV 2020-07-14 12:13:34

    iOS 앱 접근성을 테스트하다보면 가끔 VoiceOver 포커스가 의도치 않게 배터리, 시간 등을 표시하는 상태 막대 영역으로 튀어버리는 경우를 발견하곤 합니다.

    해당 이슈에 대한 원인은 기존에 포커스하고 있던 A 요소가 숨겨져서 VoiceOver에서 더 이상 A 요소에 포커스를 할 수 없게 되었을 때 VoiceOver 포커스가 이동할 곳에 대한 포커스 이벤트 처리를 하지 않았기 때문에 발생하는 것입니다.

    기본적으로 특정 요소가 화면에서 사라지면 VoiceOver는 포커스를 잃어버리게 되는데 이때 바로 위의 포커스 할 곳을 찾아 이동합니다.

    이때 다행히 사라진 요소 위에 ㄷ른 포커스할 요소가 있다면 다행이지만 그렇지 않으면 있을 곳이 없어 산태바 영역으로 포커스가 이동하는 것입니다.

    따라서 사용자의 인터랙션이나 혹은 자동으로 특정 요소가 화면에서 사라지는 경우에는 layoutChangedNotification 메소드를 활용하여 VoiceOver가 새롭게 포커스할 대상을 지정해 주는 것이 좋습니다.

    댓글을 작성하려면 해주세요.
  • tip
    [HTML] 여러 <ul> 및 <li> 요소를 사용한 내비게이션 형 링크 제공 시
    Webacc NV 2020-07-13 17:09:24

    웹문서에서 일반적으로 탭키를 누르면 링크나 버튼, 편집창, 라디오버튼과 같은 상호작용이 가능한 컨트롤에만 포커스 됩니다. 

    따라서 스크린 리더 사용자는 내비게이션 위주로 페이지 탐색시 탭키를 주로 사용하며 텍스트를 읽을 때는 스크린 리더에서 제공하는 가상커서를 사용하게 됩니다.

    그런데 특정 페이지에 과일, 채소, 육류 리스트와 같은 여러 <ul> 그룹이 있고 각 ul의 li 요소는 링크를 포함하고 있다고 가정할 때 본 영역은 내비게이션 영역이므로 주로 탭키를 사용하는 경우가 많습니다.

     

    예:

    <p>과일리스트</p>

    <ul>

     <li><a href="http://www.example1.com">사과</a></li>

     <li><a href="http://www.example2com">오렌지</a></li>

    </ul>

    <p>육류 리스트</p>

    <ul>

     <li><a href="http://www.example3.com">삼겹살</a></li>

     <li><a href="http://www.example4.com">등심</a></li>

    </ul>

     

    그런데 위의 마크업 예제로 된 목록을 탭키를 눌러 탐색할때 스크린 리더가 읽어주는 내용은 

    1. 각 링크의 레이블과 링크라는 컨트롤 요소.

    2. 목록 안에 있다는 정보. 

    3. 그 목록에서 몇 번째 요소인지에 대한 정보

    입니다.

    문제는 어떤 목록인지, 즉 과일 리스트인지, 육류 리스트인지 등에 대한 목록 제목을 알 수 없다는 것입니다.

    어떤 목록인지 알기 위해서는 탭키로 탐색하다가 다시 위쪽 화살표키를 이용하여 목록의 제목 레이블을 확인해야 합니다.

    이를 해결하는 것은 간단합니다.

    목록의 제목에 해당하는 요소에 id를 부여한 다음 각 ul 요소에 aria-labelledby="부여한 아이디"와 같이 연결만 해 주면 됩니다.

    이렇게 하면 탭키를 누르는 것만으로 목록의 첫 링크를 읽을 때 어떤 목록인지에 대한 제목을 함께 읽어주어 스크린 리더 사용자에게 편리합니다.

    샘플 페이지에서 테스트해보기

    댓글을 작성하려면 해주세요.
  • tip
    [Android native] ImageView의 접근성 처리에 관하여
    Webacc NV 2020-07-10 18:23:33

    HTML에서 <img> 요소를 활용한 화면의 레이아웃 장식을 위해 사용된 이미지에는 대체 텍스트를 삽입할 필요가 없으며 이를 보조기술에서 숨기기 위해 일반적으로 alt="" 속성을 사용합니다.

    레이아웃을 위해 표시되어 콘텐츠 맥락과는 아무런 관계가 없는 이미지를 일일이 스크린 리더가 읽는 것도 탐색의 효율성이 떨어지기 때문입니다.

    이것은 모바일앱에도 그대로 적용되며 각 플랫폼에 따라 구현 방법이 다릅니다.

    그런데 안드로이드의 경우 클릭 이벤트가 없고 ImageView 요소에 contentDescription 텍스트를 삽입하지 않으면 TalkBack에서 해당 ImageView에는 포커스 자체가 되지 않습니다.

    따라서 장식용 이미지를 표시하기 위해 ImageView가 사용되었다면 contentDescription 자체를 삽입하지 않는 것만으로 보조기술에서 숨기는 것이 가능합니다. 

    댓글을 작성하려면 해주세요.
  • tip
    [iOS native] 하나의 버튼에 이미지와 텍스트가 분리된 경우 접근성 이슈 및 해결방법
    Webacc NV 2020-07-09 11:12:51

    스크린 리더 사용자가 한 손가락 오른쪽 혹은 왼쪽 쓸기 제스처를 통해 앱을 탐색하다보면 버튼과 텍스트의 초점이 두 개로 분리되어 탐색되는 경우를 종종 보곤 합니다.

    연필 모양의 버튼과 편집 텍스트의 스크린 리더 포커스가 분리되는 캡처화면

    예를 들어 편집 버튼이 있다고 가정한다면 첫 번째 요소는 버튼, 두 번째 요소는 편집에 포커스가 되는 것입니다.

    이런 경우 '버튼'이라고 읽어주는 요소와 '편집'이라고 읽어주는 요소가 하나가 아닌 두 개의 다른 요소로 인식할 수 있으며 버튼 자체에도 대체 텍스트가 없으므로 문제가 됩니다.

    이를 해결하는 방법에는 두 가지가 있습니다.

    스토리 보드 사용 시:

    1. 텍스트 객체, 즉 UILabel은 identity inspector의 accessibility 섹션에서 AccessibilityElement 속성을 체크 해제합니다. 이렇게 하면 VoiceOver에서 더 이상 해당 레이블은 포커스 하지 않게 됩니다.

    2. 이미지 버튼 요소의 identity inspector > accessibility 섹션에서 accessibilityLabel 입력란에 초점이 가지 않게 된 UILabel의 텍스트를 입력합니다.

    위와 같이 구현하면 '편집 버튼'과 같이 하나의 초점으로만 포커스 되므로 접근성 이슈가 해결됩니다.

    Swift 코드를 사용하는 경우:

    1. 스토리보드와 마찬가지로 UILabel 객체를 스크린 리더가 포커스 하지 못하도록 하기 위해 isAccessibilityElement = false 속성을 삽입합니다.

    2. 이미지 버튼 객체에 accessibilityLabel을 추가합니다.

    댓글을 작성하려면 해주세요.
  • tip
    CSS3의 filter속성으로 간편하게 사용불가(disabled) 스타일을 만들어보세요.
    Webacc NV 2020-07-07 18:03:10

    disabled나 aria-disabled 속성은 이름만 봐도 알 수 있듯 무언가 동작이 불가능하다는 의미를 가지고 있는 상태 정보입니다.

    한국판 NVDA나 센스리더에서는 "사용 불가", 영문판에서는 "Unavailable"이라고 스크린리더 사용자에게 친절하게 안내해줍니다.

    게시판 하단의 "이전 페이징" 또는 "다음 페이징" 버튼을 예로 들 수 있는데, 더 이상 이전 또는 다음 페이징 링크 목록이 없으면 사용자에게 "더 이상 뒤로 갈 수 없어요!"라고 알려줘야할 때 사용합니다. 만약, 기능을 사용할 수 없는 상태의 요소에 이 속성이 없다면, 스크린 리더 사용자는 사용가능한 컨트롤으로 인식하고 누르게됩니다.

    반대로, disabled나 aria-disabed를 사용하여 스크린리더 사용자를 고려하였으나, 한 눈에 두드러지는 스타일을 사용하지 않아서 구분할 수 없는 페이지가 종종 보입니다. 이러한 페이지는 시각적으로 페이지를 사용하는 모든 사용자에게 적절하지 않습니다.

    그래서 활성화된 버튼과 비활성화된 버튼은 두드러진 차이가 있어야 합니다. 일일히 디자인을 새로 줄 수도 있지만, CSS3의 filter 속성과 함수를 사용하면 손쉽게 disabled 상태를 시각적으로 구현할 수 있습니다.

    메인: filter 속성으로 disabled를 손쉽게 표현하기

    filter 속성에는 여러 함수가 있습니다. 이 함수중에서 disabled 상태의 요소를 만들 때 유용하게 사용할 수 있는 요소는 다음과 같습니다.

    • contrast() : 값은 int값으로 0부터 소수점단위로 설정가능합니다. 높을 수록 색상의 대비가 높아집니다. 기본값은 1입니다.
    • brightness() : 역시 위와 같이 int값을 사용하며, 기본값은 1입니다. 높을수록 밝아집니다.
    • opacity() : 알파(투명도) 필터입니다. int를 사용하며, opacity로 대체 가능합니다. 최대값은 1이며 기본값이기도 합니다.
    • grayscale() : 그레이스케일(색조) 필터입니다. int를 사용하며, 위의 함수들과 반대로 높을수록 회색에 가까워집니다.

    이 중 한 가지만을 사용하여도 충분히 disabled 상태와 걸맞는 디자인을 줄 수가 있으며, 다음과 같이 동시에 여러 개의 함수를 쓸 수 있습니다.

    .filter:disabled,.filter[aria-disabled=true]{
        filter: grayscale(0.3) opacity(0.4) brightness(1.2) contrast(0.7);
    }

    이를 적절히 사용하여 버튼이나 라디오 버튼과 같은 컨트롤 요소에 disabled 상태를 색상을 손대지 않고 만들 수 있습니다.

    filter 속성은 대부분의 브라우저에서 지원하기 때문에 웹 디자이너는 간편한 방법으로 만들 수 있다는 점에서 만족할 수 있으며, 사용자는 더 양질의 서비스로 도움을 받을 수 있을것입니다.

    번외: 비활성화된 요소는 반드시 커서 속성을 수정해주세요!

    CSS의 cursor 속성은 매우 중요합니다. 분명 위 방법으로 disabled 속성을 멋지게 만들어주었음에도 커서 속성을 변경해주지 않으면, 사용자에게 혼란을 줄 수 있습니다. 기본값으로 마우스를 올렸을 때, cursor값이 pointer로 제공된 링크나, 임위로 cursor를 pointer로 준 요소는  마우스 포인터의 모양이 손 모양으로 변경됩니다. 사용자로 하여금 누를 수 있는 요소로 오인할 수 있는 여지를 주며, 머릿속에 자연스럽게 물음표가 떠오릅니다.

    따라서, disabled 상태인 요소에 마우스 포인터가 올라갔을 때는 cursor값을 아래와 같이 default로 만드는 것이 좋습니다.

    .filter:disabled:hover,.filter[aria-disabled=true]:hover{
        cursor:default;
    }

    disabled 요소 만들기 체험: [링크]

    댓글을 작성하려면 해주세요.
  • tip
    [Android native] TalkBack에서의 activity_label, setTitle 텍스트 처리 방식
    Webacc NV 2020-07-07 10:44:36

    TalkBack을 활성화하고 접근성을 테스트 하다보면 화면이 전환될 때 대부분 화면 제목을 자동으로 읽는 것을 경험하셨을 것입니다.

    그것은 TalkBack에서 activity_label 텍스트 혹은 setTitle 텍스트를 가지고 와서 제목으로 읽어주는 것인데 화면 제목을 자동으로 읽어주면 일일이 제목을 터치해서 확인하지 않아도 화면의 내용을 대략 유추할 수 있어 큰 도움이 됩니다.

    문제는 UI에 따라서는 화면 제목을 사용하지 않거나 커스텀으로 제목을 사용하는 경우에는 화면 상의 제목 표시줄은 숨기기 때문에 activity_label 텍스트를 삽입하지 않는 경우가 많습니다.

    어차피 화면에서 사용하지 않기 때문입니다.

    그런데 그렇게 되면 스크린 리더 사용자에게는 문제가 있습니다.

    activity_label 텍스트가 없으므로 TalkBack이 화면 제목을 읽을 수 없어 애플리케이션의 제목을 읽게 되고 직관적인 피드백을 받을 수 없게 됩니다.

    따라서 화면에서 제목을 숨기더라도 스크린 리더 사용자를 위해 activity_label 텍스트를 각 activity마다 삽입하거나 혹은 setTitle 메소드를 추가해 주는 것이 큰 도움이 됩니다.

    댓글을 작성하려면 해주세요.
  • tip
    웹페이지 다크 모드 만들기 with CSS 변수
    Webacc NV 2020-07-06 12:28:44

     2019년부터 UI에는 한가지 큰 열풍이 불었습니다. 바로 다크모드라고 하는 멋진 친구입니다. 다른이름으로는 야간 모드라고도 부르지요. iOS 13, Android 10, Windows 10 1903 버전 등에서 이 다므코드를 지원하기 시작했습니다.

    웹에서도 이러한 사용자 환경에 따라 웹페이지의 색상을 다르게 표시할 수 있는데요. 오늘은 다크 모드를 지원하는 방법에 대해 짧게 설명하고자 합니다.

     

    어떻게 다크 모드를 브라우저가 인식하게 할까요?

    다크 모드는 아래의 미디어 쿼리 속성으로 지원할 수 있습니다.

    @media(prefers-color-scheme:dark){
        .selector {
           properties
        }
    }

    지난 아티클에서도 소개드린 적 있는 친구, prefers-color-scheme 입니다.  이 친구를 부르면 Android 10, iOS13, 1903 이상의 Windows 10, 그리고 모하비 이상의 Mac OS 환경에서의 최신 브라우저에서 어두운 테마를 별도로 제공할 수 있습니다.

     

    더 효율적인 미디어쿼리 관리를 위한 CSS 변수를 함께 사용하기

    조금 더 와닿을 수 있도록 짧게 한번 레이아웃 페이지를 만들어보도록 할텐데요. 그 전에 소개시켜드릴 친구가 더 있습니다. 어두운 테마를 작성할 때 조금 더 편리하게 처리해주는 친구인 CSS 변수로, Chrome이나 Firefox 등 다크모드를 지원하는 최신 브라우저에서 대부분 사용이 가능합니다.

    CSS 변수는 아래와 같이 선언할 수 있고, 사용할 수 있습니다.

    #wrapper {
       --landmark-BgColor:ivory;
       --landmark-FtColor:black;
    }
    
    #wrapper header{
       background-color:var(--landmark-BgColor);
       color:var(--landmark-FtColor);
    }

    동일한 색상 코드를 반복적으로 사용하는 것이 편하게 보일 수도 있으나, 조금더 의미를 부여하여 CSS 코드를 작성하는 대에 도움을 주고, 변수는 재활용이 가능하기 때문에 내가 원하는 곳에 적절하게 사용할 수 있으며, 선택한 색상이 영 마음에 들지 않을 경우, 위에 선언한 변수만 바꾸면 되는 장점이 생깁니다. 이는 CSS 코드가 길어질수록 더 빛납니다.

    CSS 변수는 이렇게 특정 요소부터 종속시킬 수도 있지만, 아래와 같이 전역 변수로 만들 수도 있습니다. 전역변수로 만들려면 :root이라는 가상 클래스 선택자(pseudo class)를 사용하면 됩니다.

    :root{
      --Global-CSS-Variable:linear-gradient(#00f, #a0f, #f0a);
    }

    전역이라는 이름에서 알 수 있듯, 이렇게 등록된 변수는 어떠한 곳에서든 사용이 가능합니다. 이번 다크테마 만들기에서는 이 전역변수를 활용할 것입니다.

    그럼 본격적으로 페이지를 어둠으로 물들여봅시다.

    :root{
     /*Body*/
      --body-bgColor:#fafafa;
      --body-ftColor:#2c2c2c;
     /*Landmark*/
      --landmark-bgColor:#5cba8f;
    }
    *{padding:0;margin:0; box-sizing:border-box;}
    html{width:100vw; height:100vh;  max-width:100%;}
    body{
      width:100%; height:100%;
    }
    
    /*중요하지 않은 부분입니다. 레이아웃 관련*/
    .wrapper{display:grid; width:100%; height:100%;grid-template-columns: 2fr 6fr 2fr;grid-template-rows: 1fr 8fr 1fr; gap:1rem;padding:0.5rem;}
    .wrapper>*{padding:0.5rem;}
    header{grid-column: span 3;} nav{grid-column:1/2;}
    main{grid-column: span 2;} footer{grid-column: span 3;}
    header,footer{
      display:flex; flex-flow:column wrap;
      align-items: center; justify-content: center;
    }
    .CopyLeft{
      display:inline-block;
      transform:rotate(180deg);
      vertical-align: middle;
      user-select:none;
    }
    .Light .sun, .Dark .moon{
      display: inline-block; width:2rem; height:2rem;
    } .Light, .Dark{ font-size:200%; }
    
    
    /*** 주요 코드! ***/
    body{ /*바디에 색상을 줍시다*/
      color:var(--body-ftColor); background-color:var(--body-bgColor);
    }
    
    .Dark{ /*밝은 화면(기본화면)에서 다크모드의 인사가 나오지 않도록 합니다*/
      display:none;
    }
    
    header,nav,footer{ /*배너 랜드마크나 내비게이션같은 부수적인 랜드마크에 색상을 다르게 줍시다*/
    background-color:var(--landmark-bgColor);
    color:var(--landmark-ftColor);
    border-radius:0.5rem;}
    
    .Light .sun{ /*라이트 모드에서 보여질 햇님 아이콘을 추가하고, 글자와 똑같은 색을 입혀줄게요~*/
      mask:url(https://image.flaticon.com/icons/svg/869/869818.svg) 100%;
      -webkit-mask:url(https://image.flaticon.com/icons/svg/869/869818.svg) 100%;
      background-color:var(--body-ftColor);
    }
    
    @media (prefers-color-scheme:dark){ /*이제 어두운 화면에서 보여질 색상들을 입혀줍시다*/
        :root{
        --body-bgColor:#2c2c2c;
        --body-ftColor:#fafafa;
        --landmark-bgColor:#191919;
    /*각각의 색상을 변수로 다시 지정해줍니다. 어두운 화면인 동안에만 이 색상으로 모두 교체되므로 아래에 중복된 코드를 입력할 필요가 없습니다.*/
      }
    
      .Dark{display:block;} /*라이트 모드에서 숨겼던 다크모드의 인사말을 표시해요!*/
      .Light{display:none;} /*반대로 라이트 모드에서 인사했던 햇님 친구를 숨겨줍시다.*/
    
      .Dark .moon{ /*라이트 모드에서 보여질 달님 아이콘을 추가하고, 글자와 똑같은 색을 입혀줄게요*/
        mask:url(https://image.flaticon.com/icons/svg/899/899555.svg) 100%;
        -webkit-mask:url(https://image.flaticon.com/icons/svg/899/899555.svg) 100%;
        background-color:var(--body-ftColor);
      }
    }

    한 코드에 모든걸 담아놓아 조금 복잡하지만, 핵심만을 말씀드리자면, prefers-color-scheme에서 변수의 값만 다시 대입해준다면, 중복된 코드 없이 손쉽게 다크모드 페이지를 지원할 수 있다는 점입니다. 이 둘을 함께쓴다면 조금도 효율적으로 색상 팔레트를 관리할 수 있겠지요?

     

    단순히 색상반전을 사용하면 안 되는 건가요?

    이 방법은 반전 기법과 비교했을 때 조금 복잡하고 불편해 보일 수도 있지만, CSS의 Filter를 이용한 반전 기법에도 단점이 있습니다.

    간편한 만큼 사용자와 디자이너의 욕구를 만족시키지 못한다는 점인데요. filter 프로퍼티의 Invert라는 반전 CSS함수를 사용하면, 손쉽게 밝은화면과 어두운 화면을 구현할 수 있지만, 하위에 위치한 모든 요소의 색상이 반전되므로 원하지 않는 색상이 표시되기도 합니다. 웃자고 쓰는 표현으로, 사람 얼굴이 나온 사진이 있다면, 스머프 처럼 보이게 됩니다.

    물론, 이에 대한 대처법도 존재하지만, 페이지에 따라서 오늘 소개해드린 prefers-color-scheme 만큼 또는 그 이상의 작업이 필요할 수도 있습니다. 따라서 어두운 화면을 구현할 때는 Invert보다 색상 팔레트를 따로 구성하여 만드는 것이 더 아름답고 깔끔할 수 있습니다.

     

    팁 치고는 긴 글 읽어주셔서 감사드리며, 아래는 위의 코드를 적용한 참고용 레이아웃 페이지입니다. 필요한 분께 좋은 자료가 되길 희망합니다.

    [적용 페이지]

    댓글을 작성하려면 해주세요.
  • tip
    [iOS native] UILabel을 VoiceOver가 처리하는 방식
    Webacc NV 2020-07-03 16:40:12

    UILabel은 일반적으로 클릭 이벤트가 없는 텍스트를 화면에 표시할 때 사용하는 요소입니다.

    그래서 VoiceOver에서도 UILabel 요소로 된 텍스트는 요소 유형이 따로 지정되어 있지 않습니다.

    그런데 텍스트 자체를 클릭하여 다른 화면으로 이동하도록 구현하거나 기타 상황에 따라 UILabel에 클릭 이벤트를 삽입하는 경우도 있습니다.

    일반적으로 UILabel에 클릭 이벤트를 추가할 때는 다음과 같은 두 속성을 사용하게 됩니다.

    1. UITapGestureRecognizer(target: self, action: #selector((customClick_:)))

    2. object.UserInteractionEnabled = true

    그런데 클릭 이벤트를 추가하는 순간 VoiceOver는 해당 UILabel에 자동으로 버튼이라는 컨트롤 속성을 추가합니다.

    즉 정리하면 tapGestureRecognizer 이벤트를 통해서 UILabel에 클릭 이벤트를 주게 되면 UIAccessibilityTrait를 button 등으로 변경하지 않더라도 기본적으로 VoiceOver가 버튼이라는 컨트롤 유형을 삽입한다는 것입니다.

    UILabel에 클릭 이벤트 구현 시 참고가 되었으면 좋겠습니다.

     

    댓글을 작성하려면 해주세요.
  • tip
    [HTML 공통] 링크나 버튼 요소에 스크린 리더용 숨김 텍스트 제공시 주의사항
    Webacc NV 2020-07-02 11:27:07

    링크나 버튼 요소에 의미를 가진 아이콘과 텍스트가 함께 삽입된 경우 스크린 리더 사용자를 위한 아이콘에 대한 설명을 숨김 텍스트로 링크나 버튼 요소 내에 제공해 주는 경우를 종종 보곤 합니다.

    또한 새창으로 열리는 링크에도 '새창' 문구를 링크 내에 숨김 텍스트로 삽입하기도 합니다.

    그런데 스크린 리더 사용자가 이러한 요소를 탐색할 때 불편한 부분은 대부분 이러한 숨김 텍스트 앞 혹은 뒤에는 문맥에 맞는 띄어쓰기 혹은 문장부호가 없다는 것입니다.

    예를 들어 화면에 보여지는 링크 텍스트는 구매하기 이고 숨김 텍스트가 새창 이라면 문장부호나 띄어쓰기에 대한 고려를 하지 않을 경우 '구매하기새창 링크'라고 읽어주게 됩니다.

    문맥에 따라서 띄어쓰기 혹은 문장부호가 삽입되지 않은 숨김 텍스트는 듣기에 상당히 어색할 수 있으며 특히 음성과 점자로 함께 정보를 읽는 스크린 리더 사용자는 더 어색함을 느낄 것입니다.

    따라서 화면에 보여지는 레이블과 추가 설명 텍스트가 자연스럽게 읽어줄 수 있도록 띄어쓰기 및 문장부호 적용이 필요하겠습니다.

    좋은 예시:

    <a href="http://nuli.navercorp.com">널리로 가기<span class="blind">, 새창</span></a>

    <a href="http://nuli.navercorp.com" class="pdf"><span class="blind">pdf&nbsp;</span>다운로드</a>

    댓글을 작성하려면 해주세요.
  • tip
    [Android native] EditText 요소에 contentDescription 사용은 금물
    Webacc NV 2020-07-01 12:26:24

    안드로이드에서는 EditText를 사용하여 여러 형태의 편집창을 구현합니다.

    EditText에는 android:hint 속성을 통해 무엇을 입력해야 하는지에 대한 레이블을 지정할 수 있는데 레이아웃에 따라 android:hint 속성을 사용하지 않는 경우도 종종 있습니다.

    문제는 이때 스크린 리더 사용자를 고려하기 위해 EditText에 contentDescription을 통한 보이지 않는 레이블을 삽입하는 경우를 종종 보곤 합니다.

    그러나 위와 같이 구현할 경우 접근성 API에서 해당 객체를 편집창으로 인식하지 못하게 되어 TalkBack에서 제공하는 여러 편집 옵션을 사용할 수 없게 됩니다.

    따라서 EditText에 android:hint 속성을 사용할 수 없는 경우에는 labelFor를 통해 인접한 객체의 텍스트를 가지고 오거나 이 또한 불가능한 경우에는 AccessibilityNodeInfo class에서 setHintText 메소드를 사용하여 스크린 리더 사용자를 위한 레이블을 삽입하는 것이 바람직합니다.

    댓글을 작성하려면 해주세요.
  • tip
    보조기술 이해하기
    에어류 2020-06-30 15:28:44

    안녕하세요! 에어류입니다.

    국내의 웹 접근성 관련 표준 및 지침은 국가에서 표준으로 정한 한국형 웹콘텐츠 접근성 지침 2.1이 공식표준입니다.

    물론 표준대로 웹 접근성을 구현해준다면 보다 많은 정보소외계층이 웹에 접근하기 수월해지겠죠?

     

    그래서 준비한 이번 팁은 국내 지침에서 주로 스크린리더에 관련된 검사항목이 많이 포진해 있기 때문에 콘텐츠를 제공하실 때 고려하실 부분에 대하여 예시와 함께 준비해봤습니다.

     

    단순히 규격만 준수하기 이전에 보조기술을 이해하고, 이러한 이해를 바탕으로 웹 접근성을 구현한다면 더욱 좋은 웹 사이트가 되시리라 믿습니다.

     

    띄어쓰기를 하지 않은 텍스트에 대한 대체텍스트 낭독 KDBWealth의 경우 크드브웰스로 낭독

    만약 이런 영어메뉴가 있는데 띄어쓰기를 하지 않은 경우라면 스크린리더에서 어떻게 낭독할까요?

     

    띄어쓰기를 하지 않은 텍스트에 대한 대체텍스트 낭독 KDBWealth의 경우 크드브웰스로 낭독

    보시는 것처럼 원래 의도한 발음대로 낭독되지 않는 것을 보실 수 있습니다. 

    그렇다면 정상적으로 띄어쓰기가 되었을 때의 낭독내용도 함께 확인해보겠습니다.

    띄어쓰기를 한 경우 텍스트에 대한 대체텍스트 낭독 KDB Wealth의 경우 케이디비 웰스와 같이 메뉴를 제대로 낭독

    보시는 것처럼 띄어쓰기 하나만으로 스크린리더 이용자들에게 더욱 편리하게 이해할 수 있는 텍스트를 낭독하여 접근성을 높힐 수 있습니다. 

     

    그래서 우리가 습관처럼 사용하는 -> 와 같은 화살표 조합도 스크린리더로는 "대쉬 그래이터 댄"과 같이 낭독하게 되므로 실제 오른쪽 화살표인 → 특수문자를 그대로 사용하시는 것이 좋습니다. 그러면 "오른쪽 화살표"로 낭독하게 됩니다. 

    센스리더에서는 캐럿, -는 대쉬, =은 이퀄, \은 백슬래쉬, |는 버티클바, <는 레스댄, >는 그레이터댄으로 낭독하고, NVDA에서는 캐럿, -는 다시, =은 등호, \은 백슬래쉬, |는 바, <는 레스, >는 그레이터로 낭독하고, 한글죠스11에서는 캐럿, -는 마이너스, =은 이퀄, \은 백슬래쉬, |는 버티클바, <는 레스댄, >는 그레이터댄으로 낭독하고, 실로암 보이스에서는 캐럿, -는 대쉬, =은 이퀄, \은 백슬래쉬, |는 버티클바, <는 레스댄, >는 그레이터댄으로 낭독함을 안내하는 표

     

    댓글을 작성하려면 해주세요.
  • tip
    [HTML 공통] 스크린 리더 사용 시 각 폼 컨트롤의 추가 설명을 바로 들을 수 있도록 구현하기
    Webacc NV 2020-06-30 14:38:53

    회원가입, 신청서 작성과 같은 폼 컨트롤을 사용할 때는 편집창, 라디오버튼, 체크박스와 같은 각각의 필드를 탭키로 이동하는 경우가 많습니다. 

    그런데 각 필드에 상황에 따라 추가 설명 텍스트가 삽입되는 경우가 있습니다.

    비밀번호 입력창에는 '8-16자 내외로 대문자를 반드시 섞어 사용하세요'와 같은 안내 문구가 들어가는 것이 한 예입니다.

    그런데 탭 키로만 폼 컨트롤들을 이동하면 각 필드에 해당하는 레이블 및 사용자가 입력한 값만 읽어주므로 부가 설명에 대한 텍스트를 놓치는 경우가 많습니다.

    이를 해결하기 위해 각 필드에 aria-describedby="sampleid" 속성을 추가하여 추가 설명이 들어 있는 요소와 연결시켜주면 스크린 리더는 탭키로 각 필드에 포커스 하는 경우 레이블과 함께 추가 설명 문구도 함께 읽어주게 됩니다.

    댓글을 작성하려면 해주세요.
  • tip
    [Android native] 한 화면에 여러 <ListView> 혹은 <GridView>가 있다면 contentDescription을 통해 영역 제목 지정을 고려해 보세요.
    Webacc NV 2020-06-29 10:03:05

    며칠전 iOS UITableView에서의 accessibilityLabel 지정시 VoiceOver가 어떻게 동작하는지를 공유하였습니다.

    그런데 안드로이드에서도 ListView, GridView 속성에 contentDescription을 추가하면 스크린 리더로 목록뷰, 그리드뷰 영역에 접근 시에 어떤 목록 혹은 그리드 영역인지를 읽어주므로 한 화면에 여러 영역이 나뉘어져 있을 경우 레이아웃 파악이 훨씬 쉬워집니다.

    대체 텍스트이므로 화면에는 보이지 않으며 android:contentDescription="연락처 리스트" 등과 같이 삽입할 수 있습니다.

     

    댓글을 작성하려면 해주세요.
  • tip
    [iOS Native] 커스텀 보안 키패드 사용시 VoiceOver 사용자를 위해 keyboardKey UIAccessibilityTrait 사용을 고려해 보세요.
    Webacc NV 2020-06-26 18:21:43

    아이폰에서 제공하는 네이티브 키보드는 사용자의 선호도에 따라 각 키보드 키에서 손을 떼면 바로 입력이 되게 하거나 혹은 두 번 탭하여 입력하게 하는 등의 키보드 타이핑 옵션 설정을 할 수 있습니다.

    그런데 간편 결제 비밀번호, 공인 인증서 비밀번호와 같은 키패드는 네이티브 키보드를 사용하지 않는 경우가 많습니다.

    그래서 사용자가 키를 입력하려면 무조건 이중탭을 해야만 입력이 됩니다.

    그러나 이러한 보안 키패드에 keyboardKey UIAccessibilityTrait 속성을 적용하면 사용자의 선호도에 따라 이중탭 혹은 한 번 탭 방식으로 각 키 입력이 가능하게 됩니다.

    댓글을 작성하려면 해주세요.
  • tip
    [WEB 공통] 라디오 버튼 구현시 fieldset을 사용할 수 없을 경우에는 role="radiogroup" 사용을 고려해 보세요.
    Webacc NV 2020-06-25 11:06:34

    라디오 그룹의 캡션을 나타내는 fieldset, legend 태그를 사용하지 않을 경우 스크린 리더 사용자가 탭 키를 눌러 라디오 버튼에 포커스 했을 때 겪는 어려움 중 하나는 어떤 그룹의 라디오 버튼인지를 바로 알 수 없다는 것입니다.

    fieldset, legend 태그를 삽입하는 경우 탭키로만 라디오 버튼에 접근해도 '과일 라디오그룹, 사과 라디오버튼 체크됨'과 같이 읽어주기 때문에 어떤 종류의 라디오버튼인지 바로 알 수 있습니다.

    그런데 화면 상의 공간이 너무 좁은 경우나 기타 이유로 인해 fieldset 태그를 사용할 수 없는 경우가 있습니다.

    이런 경우에는 role="radiogroup", aria-label="과일 리스트"와 같이 마크업하여 본 문제를 해결할 수 있습니다.

    이렇게 하면 fieldset, legend 태그를 사용할 수 업는 경우라도 라디오 버튼에 탭키를 눌러 접근 시에 어떤 종류의 라디오버튼인지 바로 알 수 있어 웹 탐색이 더욱 편리해 집니다.

    댓글을 작성하려면 해주세요.
  • news
    iOS 14에서 제공될 back tap 기능에 관하여
    Webacc NV 2020-06-24 11:24:50

    현재 코로나로 인해 애플 개발자 회의의 여러 세션들이 온라인으로 진행중입니다.

    올 해에 배포될 iOS 14 버전에도 많은 접근성 기능들이 업데이트 될 것으로 예상하는 가운데 한 가지 주목할 기능 중 하나가 'back tap' 입니다.

    손쉬운 사용 섹션에서 해당 기능을 활성화 하면 아이폰 뒷면을 두 번 혹은 세 번 두드리는 동작을 특정 기능에 연결하여 사용할 수 있도록 하는 것으로 앱 전환기, 접근성 기능 실행, 제어센터 열기 등 다양한 기능을 연결하여 사용이 가능하다고 합니다.

    자세한 내용은 10월달 정도에 발행될 널리 아티클을 통해 공유하도록 하겠습니다.

    댓글을 작성하려면 해주세요.
  • tip
    [Android native] 시간 제한이 있는 팝업 구현 시 getRecommendedTimeoutMillis 메소드 적용을 고려해 보세요.
    Webacc NV 2020-06-23 11:07:17

    안드로이드 버전 10 이상부터는 접근성 서비스에 팝업이나 토스트 메시지 등의 시간 제한이 있는 콘텐츠가 출력되었을 때 접근성 서비스에서 강제로 이를 제어할 수 있는 기능이 추가되었습니다. 

    쉽게 말해 기본적으로 팝업이나 알림 메시지가 3초 후에 사라진다고 가정하면 접근성 서비스에서 강제로 표시되는 시간을 2분까지 늘려서 사용할 수 있도록 한 기능입니다.

    문제는 안드로이드의 토스트와 같은 시스템 자체의 알림을 활용하지 않고 대화상자를 통한 팝업을 띄우거나 커스텀으로 잠깐동안 알림을 띄우는 경우는 개발 시에 접근성 서비스에서 강제로 시간을 늘릴 수 있도록 구현을 해 주어야 합니다.

    이 때 사용하는 메소드가 바로 getRecommendedTimeoutMillis 입니다.

    자세한 활용방법은 추후 널리 아티클을 통해 다루도록 하겠습니다.

    댓글을 작성하려면 해주세요.
  • tip
    [iOS native] UITableView에는 상황에 따라 accessibilityLabel 속성을 추가해 주세요.
    Webacc NV 2020-06-22 14:00:41

    iOS에서 UITableView를 활용하여 화면에 테이블 형태로 콘텐츠를 표시하는 경우가 많습니다.

    그런데 스크린 리더 사용자는 한 화면에 여러 영역의 레이아웃이 표시되고 있을 경우 테이블에 접근 시 현재 읽고 있는 영역 정보가 없어 레이아웃 파악이 어려운 경우가 발생하곤 합니다.

    HTML에서는 데이터 테이블 구현 시 caption 태그를 통해 테이블 제목을 제공해 줄 수 있는데 iOS에서도 UITableView 자체에 accessibilityLabel 속성을 통해 스크린 리더용 테이블 제목에 해당하는 정보를 삽입할 수 있습니다.

    예: tableView.accessibilityLabel = "recipe list"

    이렇게 하면 VoiceOver 포커스가 테이블 콘텐츠에 들어갈 때 테이블 제목을 먼저 읽게 되어 현재 어떤 영역에 포커스 하고 있는지 쉽게 파악이 가능합니다.

    따라서 화면의 제목만으로 표 영역에 대한 유추가 가능하다면 문제가 없으나 한 화면에 표를 두 개 이상 제공하거나 화면 제목과 관련이 없는 표를 제공할 때는 accessibilityLabel 속성 추가를 고려해 보시기 바랍니다.

    댓글을 작성하려면 해주세요.
  • tip
    [WEB 공통] aria-label은 기존에 있던 레이블을 덮어씁니다.
    Webacc NV 2020-06-19 11:09:48

    스크린 리더 사용자를 위해 x(닫기 버튼), 5(알림 아이콘 포함) 버튼과 같이 화면에 보여지는 텍스트만으로는 해당 요소의 의미를 이해하기 어려운 경우 aria-label을 사용하는 경우를 종종 보곤 합니다.

    그런데 aria-label은 기존에 표시되는 레이블을 덮어씁니다.

    예를 들어 <button class="noti" aria-label="개의 알림 있음">5</button> 과 같이 마크업을 한 경우 스크린 리더 사용자는 화면에 표시되는 5라는 숫자는 읽지 못하게 됩니다.

    따라서 aria-label은 x, ?, 아이콘 등으로만 요소를 표시하는 경우이거나 <div contenteditable="true"> 와 같이 HTML의 기본 label 태그를 사용할 수 없는 경우 등에서만 사용해야 합니다.

    이것은 id를 연결하여 스크린 리더에서 읽을 수 있는 레이블을 표시하는 aria-labelledby 속성에도 그대로 적용됩니다.

    물론 화면에 보여지는 텍스트를 aria-label에 포함한다면 문제는 없겠습니다.

    댓글을 작성하려면 해주세요.
  • tip
    [Android native] TalkBack 8.2에서부터 적용된 ListView 안의 항목개수 처리 관련
    Webacc NV 2020-06-18 14:36:39

    안드로이드 접근성을 대응하다보면 아쉬운 점 중 하나는 iOS와 달리 라디오버튼, 목록 리스트뷰와 같은 그룹화된 항목에 TalkBack이 포커스하더라도 몇 개 중 몇 번째 요소에 포커스하고 있는지를 알려주지 못한다는 것입니다.

    그런데 최근 업데이트 된 TalkBack 8.2 버전에서는 ListView로 그룹화 된 요소의 경우 목록 안의 요소에 포커스 하면 1/5, 3/5와 같이 총 개수 중 현재 포커스한 요소가 몇 번째임을 음성 출력하도록 수정되었습니다.

    따라서 우리가 유의해야 할 사항은 바로 개수에 대한 대체 텍스트 문제입니다.

    탭컨트롤의 접근성 구현 시 접근성 대응을 위해 대체 텍스트로 개수에 대한 정보를 주는 경우가 많습니다.

    예: 홈 탭(3개 중 첫 번째), 혹은 홈탭(1/3) 등.

    그런데 레이아웃에 따라 탭 컨트롤이 ListView로 그룹화되는 경우가 있는데 이 때는 TalkBack에서의 ListView 처리 방식의 변경으로 인해 개수에 대한 정보를 중복 읽게 되는 문제가 발생하게 됩니다.

    그렇게 되면 중복 정보로 인해 스크린 리더 사용자가 탐색할 때 불편을 겪게 될 것입니다.

    이 부분에 대해서도 이후 널리 아티클을 통해 깊이 다루어 보도록 하겠습니다.

    댓글을 작성하려면 해주세요.
  • tip
    [PC web] NVDA로 웹페이지 접근성 테스트 시 브라우즈모드 포커스 하이라이트 기능을 사용해 보세요.
    Webacc NV 2020-06-17 10:48:46

    PC 웹접근성을 테스트 하기 위해 스크린 리더를 사용하는 경우 겪는 어려움 중 하나는 현재 스크린 리더가 읽고 있는 줄이 어디인지 찾기 어려울 때가 있다는 것입니다. 

    브라우저는 <input type="text">와 같은 편집 영역이 아닌 이상 커서를 표시하는 캐럿이 없기 때문에 스크린 리더가 가상으로 커서를 만들어서 마치 문서를 탐색하듯이 사용자가 읽을 수 있도록 기능을 제공합니다.

    이 커서를 스크린 리더 제조사마다 가상커서, 브라우즈모드 등으로 부르고 있습니다.

    그런데 말 그대로 가상커서다보니 스크린 리더에서 자체적으로 현재 읽고 있는 줄을 하이라이트 해 주지 않는 이상 시각적으로 현재 가상의 커서가 있는 위치를 알 수 없습니다.

     

    이를 해결하기 위해 NVDA, JAWS 등에서는 나름대로의 방식으로 가상커서 하이라이팅 기능을 추가하였습니다. 

    NVDA에서는 NVDA 설정 > vision > 브라우즈모드 커서 하이라이트 기능을 켜서 사용하시면 접근성 테스트 시에 현재 읽고 있는 부분이 노란색으로 표시되므로 조금 더 쉽게 시각적 구분이 가능합니다.

    브라우즈모드커서 포커스 하이라이트가 체크된 NVDA 환경설정 화면 스크린샷

    댓글을 작성하려면 해주세요.
  • tip
    [iOS native] 음성 검색 시 마이크가 같은 화면에서 켜지는 경우네는 접근성 적용을 위해 startsMediaSession trait를 사용하세요.
    Webacc NV 2020-06-16 15:21:09

    지난 번에는 음성 검색을 누르면 화면이 전환되면서 마이크가 켜졌을 때 VoiceOver 소리가 들어가지 않도록 하기 위한 접근성 팁을 공유했습니다.

    이번에 공유할 팁은 음성 검색을 눌렀을 때 화면이 전환되지 않고 바로 마이크가 켜지는 경우입니다.

    이때 접근성 대응을 해주지 않으면 VoiceOver가 포커스 하고 있는 같은 레이블을 다시한번 더 읽기 때문에 해당 음성이 함께 들어가게 됩니다. 

    이를 해결하는 방법은 너무 간단합니다.

    사용자가 음성검색 버튼을 이중탭할 때 레이블을 다시 한번 읽지 못하도록 음성검색 버튼에 startsMediaSession trait를 추가하는 것입니다.

    이렇게 하면 사용자가 이중탭하더라도 아무런 내용도 읽지 않게 됩니다.

    댓글을 작성하려면 해주세요.
  • tip
    [WEB 공통] <ul> 요소에 WAI-ARIA 마크업을 통한 tab 컨트롤 구현 시 <li> 요소에는 role="none"을 추가해 주세요.
    Webacc NV 2020-06-15 16:38:41

    웹페이지를 탐색하다보면 WAI-ARIA를 활용하여 tab 컨트롤을 구현한 사이트를 종종 보곤 합니다.

    그런데 <ul> 요소로 되어 있는 탭컨트롤을 WAI-ARIA로 마크업하는 경우 흔히 하는 실수 중 하나가 각각의 <li> 요소에 role="none"을 추가하지 않는 것입니다. 

    <ul>은 role="tablist", <li>는 role="none", 각 a 요소에는 role="tab"을 삽입해 주어야 tab 컨트롤을 제대로 읽을 수 있게 됩니다.

    즉 tab 컨트롤은 tablist, tab, tabpanel로 구성되는데 <li> 요소는 tab 컨트롤과 관련이 없으므로 접근성 API에게 관련이 없는 요소라는 것을 알려 주어야 합니다.

    댓글을 작성하려면 해주세요.
  • tip
    [Android native] 한 화면에 여러 제목이 있을 때는 accessibilityHeading="true" 속성을 넣어주세요.
    Webacc NV 2020-06-12 17:59:12

    안드로이드에서는 iOS와 달리 제목을 TalkBack에서 따로 인식할 수 있도록 API를 지원한 지가 몇 년 되지 않습니다. 

    그러다보니 접근성이 잘 되어 있는 안드로이드 앱에서도 하위 제목을 TalkBack에서 '제목'으로 인식하도록 되어 있는 앱이 드문 것 같습니다.

    안드로이드 API 28 이상을 사용하여 앱을 개발하신다면 한 화면에 여러 제목이 존재하는 경우 accessibilityHeading 속성을 추가하면 iOS와 같이 스크린 리더 사용자가 제목 단위로 빠르게 이동할 수 있고 제목 요소임을 빠르게 이해할 수 있습니다.

    댓글을 작성하려면 해주세요.
  • tip
    [Android native] ProgressBar 요소 사용시에는 퍼센트에 해당하는 대체 텍스트를 넣어주세요
    Webacc NV 2020-06-11 11:23:17

    안드로이드 앱에서 진행률을 보여주어야 할 때는 ProgressBar를 사용하는 경우가 종종 있습니다.

    70%의 진행률 표시줄을 가리키는 스크린샷

    그런데 이 ProgressBar는 

    android:progress="70"과 같은 속성이 포함되더라도 TalkBack에서 해당 요소에 포커스 하지 못합니다.

    즉 진행률이 TextView 형태가 아닌 막대 그래프 형태로만 표시되고 있을 경우에는 스크린 리더 사용자는 이를 읽을 수가 없는 것입니다.

    이를 해결하려면 화면에 보여지는 각 progress에 해당하는 값을 contentDescription을 통해 대체 텍스트 형태로 추가해 주어야 합니다.

    예: 

    android:contentDescription="70%"

    이렇게 하면 스크린 리더에서 진행률 표시줄에 포커스 가능하며 퍼센트 값도 정확하게 읽어주게 됩니다.

    주의하실 점은 해당 대체 텍스트 안에는 숫자와 % 기호만 들어가야 하며 퍼센트에 해당하는 텍스트(예: 설문 진행률)가 화면에 표시된다면 해당 TextView를 labelFor로 연결하여 어떤 진행률인지 읽어주도록 할 수 있습니다.

    댓글을 작성하려면 해주세요.
  • tip
    [Android web] 버튼 요소에 ontouchstart 이벤트를 사용하면 TalkBack에서 이중탭해도 실행이 안 됩니다
    Webacc NV 2020-06-10 11:11:03

    모바일 네이티브 앱과 마찬가지로 모바일 웹에서도 터치 이벤트를 구현할 수 있도록 ontouchstart, touchmove, touchend 등의 이벤트를 제공하고 있습니다.

    그런데 버튼 태그에 터치 이벤트를 주게 되면 안드로이드 TalkBack 사용자는 이중탭해도 터치 이벤트가 실행되지 않습니다.

    이는 버튼 요소를 사용하는 순간 접근성 API에서는 클릭하는 요소로 인식하고 있어서 이중탭이 클릭으로 동작하기 때문입니다.

    물론 p 요소와 같은 곳에 터치 이벤트를 주게 되면 접근성 API에서 클릭 요소로 인식하지 않기 때문에 이중탭하면 터치 이벤트가 실행됩니다.

    사실 이것은 웹뿐만 아니라 앱에서 버튼 요소에 onTouchListener 이벤트를 사용해도 마찬가지 결과가 나옵니다.

    따라서 스크린 리더 사용자를 고려하여 터치 이벤트는 드래그와 같이 꼭 필요한 곳에서만 사용해야 하며 단순히 버튼을 실행하는 등의 요소에는 사용하지 않도록 주의가 필요합니다.

    온터치 이벤트 샘플(모바일에서 테스트)

    댓글을 작성하려면 해주세요.
  • tip
    [iOS web] 숨김 텍스트에 민감해요!
    Webacc NV 2020-06-09 11:50:05

    숨김 텍스트(Image Replacement)은 스크린 리더 사용자를 위해서만 제공하는 보조 텍스트 정보를 숨김 처리하는 기법으로 줄여서 IR라고 부르며, 단순하게 숨김 텍스트라고도 부릅니다. 수많은 웹 개발 라이브러리에서 이 IR기법용 클래스를 제공하고 있는데, 대표적으로 Bootstrap의 sr-only 클래스가 있으며, ir이나 blind 등의 클래스로 이를 제공하고 있습니다.

    IR 기법은 말 그대로 기법이기 때문에 텍스트를 숨기는 여러 가지 방법을 담고 있습니다. 많이 알려진 기법으로는 text-indent를 큰 음수값으로 제공하여, 화면 밖으로 텍스트를 빼 버리는 방법, text-indent처럼 position을 absolute로 제공하고, 화면 밖으로 left와 top 속성을 통해 내보내는 포지셔닝 방법이 있습니다.

    이 두 개의 방법은 분명히 스크린 리더가 읽을 수 있는 숨김 텍스트를 제공하지만, 화면 밖으로 텍스트를 빼는 것이기 때문에 의도하지 않은 X축 스크롤이 생기거나, 모바일 스크린 리더의 초점이 해당 텍스트를 감쌀 경우, overflow와 관계없이 x축 스크롤이 이동되는 단점도 명확하며, 구글의 검색 엔진에서는 스팸으로 분류되는 등의 단점도 있습니다. 또한, 해당 요소의 초점이 엉뚱한 곳에 나타나 미관상으로도 보기 좋지 않습니다.

     

    탐색 중 아이폰이 제 멋대로 숨김 요소를 건너뛰어요!

    위 두 가지 방법은 그나마 나은 편에 속합니다. PC 스크린 리더와 안드로이드의 스크린 리더는 읽을 수 있지만, iOS의 아이폰에서는 중요하지 않은 콘텐츠로 인식돼 읽지 않고 건너뛰는 현상을 발생시키는 기법도 있습니다.

    바로 크기 0을 사용하는 기법입니다. font-size, width, height를 0, overflow:hidden으로 렌더링한 요쇼는 iPhone의 VoiceOver에서 마치 img 태그의 alt를 빈 값으로 두는 것과 같이 읽지 않는 현상이 발생하게 됩니다.  마치 CSS에서 display:none, visibility:hidden으로 숨기거나, HTML 태그에서 aria-hidden="true"를 쓴 것 같이 말이지요.

    iOS의 VoiceOver에서 요소를 읽을 때, 터치할 수 있는 1px 이상이여야 올바르게 동작합니다. 따라서, iPhone의 VoiceOver 를 사용하는 사람을 고려하기 위해서는 반드시 이 기법을 사용해서는 안 됩니다.

    그렇다면 iOS, iPad OS를 위해서는 어떠한 방법을 사용해야 하나요?

    clip을 사용한 1px 크기의 숨김 요소를 사용하는 것이 가장 바람직합니다. CSS Tricks - 숨김 텍스트 기법 박물관의 첫 번째 항목인 2014년에 H5BP가 채택한 방법입니다. 이 방법을 사용하면 입맛이 까다로운 iOS에서도 잘 읽는 숨김 텍스트를 제공할 수 있습니다.

    부트스트랩의 sr-only에 사용되는 기법도 이 기법이며, 별도의 작업이 필요하지 않다면, 부트스트랩을 이용하여 간편하게 iOS를 고려한 숨김 텍스트를 제공할 수 있습니다.

     

    누를 수 있는 요소에 대한 숨김 텍스트에 대하여

    버튼과 같이 누를 수 있는 요소에 대해서는 용도에 따라서 ir기법보다는 aria-label을 사용하면 더 손쉽고 깔끔하며 미관을 해치지 않는 디자인을 제공할 수 있습니다. aria-label은 센스 리더에서도 지원하며, 대부분의 스크린 리더에서 잘 읽습니다.

    특히 커스텀 웹 미디어 플레이어 등에서 사용되는 재생/정지 버튼과 같이 아이콘으로 되어있는 버튼에는 aria-label을 사용하는 것이 편리합니다. 다만, WAI-ARIA는 접근성의 부족한 부분을 채워주는 보조적인 기술일 뿐, 주가 되어서는 안 되며, aria-label은 요소 내의 텍스트를 덮어씌워 버리므로 아이콘 또는 요소에 텍스트가 존재할 경우, aria-label에도 동등하게 텍스트를 제공해야 합니다.

     

     

    댓글을 작성하려면 해주세요.
  • tip
    [Mobile web] HTML의 lang 속성에 더 예민합니다
    Webacc NV 2020-06-09 09:11:57

    iOS android에서 스크린 리더 사용자가 웹페이지 혹은 웹뷰를 탐색할 때 난감한 것 중 하나가 한글을 영문 TTS로 읽는 경우가 종종 있다는 것입니다.

    이것은 HTML에서 lang 속성이 없거나 "en"으로 잘못 마크업했기 때문인데요. 

    PC 스크린 리더의 경우에는 비교적 자동 언어 감지에 대한 설정을 사용자가 커스터마이징할 수 있거나 TTS가 여러 개 설치되지 않은 경우에는 영향을 받지 않는 반면

    모바일에서는 기본적으로 여러 TTS가 설치되어 있어 언어 명시에 대한 영향을 더 크게 받게 됩니다.

    따라서 모바일 웹페이지(앱 내에 포함되는 WebView 포함)의 정확한 주 언어 명시는 접근성을 고려하기 위한 필수 조건 중 하나라고 할 수 있겠습니다.

    댓글을 작성하려면 해주세요.
  • tip
    [Android native] 초점을 특정 요소로 보내야 할 때는 sendAccessibilityEvent를 사용하세요
    Webacc NV 2020-06-05 17:50:09

    웹페이지와 마찬가지로 안드로이드 앱에서도 상황에 따라 접근성 초점을 특정 요소로 보내 주어야 하는 경우가 발생합니다. 

    대표적인 예가 신청서 등을 작성하는 화면에서 특정 입력 필드의 값이 유효하지 않거나 혹은 레이어를 닫았을 때의 포커스 처리를 해 주어야 할 때 등입니다. 초점 처리를 해 주지 않으면 스크린 리더 사용자가 에러가 난 입력 필드를 찾기 어렵거나 혹은 레이어가 없어지면서 초점이 화면 상단으로 튀어 버리는 문제가 발생할 수 있습니다. 

    초점을 다른 곳으로 보내주고자 할 때는 초점을 보내 주어야 하는 요소에 sendAccessibilityEvent 메소드를 사용할 수 있습니다. sendAccessibilityEvent 안에는 여러 옵션들이 있는데 초점을 보내줄 때는 TYPE_VIEW_FOCUSED 옵션을 사용하면 됩니다.

    댓글을 작성하려면 해주세요.
  • tip
    [iOS native] 음성 검색 구현할 때 VoiceOver 소리 들어가지 않게 하기
    Webacc NV 2020-06-04 18:53:49

    요즘에는 많은 앱에서 음성검색을 제공하고 있습니다. 음성 검색은 조금 더 빠르게 정보를 검색하거나 받아쓰기를 할 수 있어 시각장애인에게도 큰 도움이 됩니다.

    문제는 음성검색을 실행하면 화면의 특정 내용을 자동으로 VoiceOver가 읽기 때문에 난감한 경우가 많다는 것입니다.

    이것을 해결하려면 두 가지 경우의 수를 두고 생각을 해 보아야 합니다.

    1. 음성 검색을 누를 때 화면이 전환되는 경우

    2. 화면이 전환되지 않고 현재 화면에서 바로 마이크가 켜지는 경우

    오늘은 1번에 대한 해결방안을 제시해 드리려고 합니다.

    세 가지만 해 주시면 됩니다.

    a. 음성 검색이 실행되면 포커스를 임의의 요소(예컨대 듣고 있어요 등)으로 보내기. 이 때는 screenChangedNotification 메소드를 사용합니다.

    b. 해당 요소에 accessibilityLabel을 추가하되 "" 로 추가합니다. 그러면 포커스된 곳의 대체 텍스트가 없기 때문에 음성 검색을 하는 동안에 VoiceOver가 아무 말도 하지 않게 됩니다.

    c. 마지막으로 효과음이 출력되지 않는다면 VoiceOver가 켜졌을 때만이라도 시작음과 종료음이 출력되도록 하며 이때는 isVoiceOverRunning 메소드를 사용합니다.

    두 번째 방안에 대해서는 다음에 설명하겠습니다.

    이 역시 구체적인 구현 방법은 블로그 포스팅을 통해 올리도록 하겠습니다.

    댓글을 작성하려면 해주세요.
  • tip
    [iOS native] TabBar trait에 관하여
    Webacc NV 2020-06-03 14:53:42

    안녕하세요.

    iOS 네이티브 앱을 개발하다보면 접근성을 구현하기 위하여 accessibilityTrait 속성을 사용하는 경우가 종종 있습니다.

    Trait는 커스텀 view로 기능을 구현해야 할 때 각 요소가 가진 정확한 의미를 VoiceOver에 전달하는 역할을 할 수 있도록 하는 것으로 HTML과 비교하자면 WAI-ARIA와 비슷하다고도 할 수 있습니다.

    그런데 많은 분들이 trait 중에서도 TabBar trait가 있다는 것을 잘 모르시는 것 같습니다. TabBar 구현 시에 네이티브 컨트롤을 사용할 수 없을 경우에는 TabBar trait를 사용해서 네이티브 TabBar와 똑같이 VoiceOver에서 음성 출력할 수 있도록 할 수 있습니다. 

    자세한 구현 방법은 이후에 발행될 널리 블로그를 참고해 주세요.

    감사합니다.

    댓글을 작성하려면 해주세요.
  • tip
    접근성을 고려한 표를 기획하기~!!
    에어류 2020-06-02 16:18:29

    안녕하세요! 에어류입니다.

    많은 분들이 웹사이트를 기획할 때 국내에서는 게시판, 표와 같은 규격적인(?) 기획을 많이 해왔습니다.

    과거 우리는 테이블 형태의 웹사이트를 만들어 위치 기반으로 콘텐츠를 집어넣곤 했었습니다.

    그러나 웹 접근성을 이해하시는 분들은 좀 달라져야 합니다. 충분히 제목으로 사용할 수 있는 부분도 다단으로 또는 병합된 형태로 표를 사용할 때가 참 많습니다. 웹 접근성을 위해 되도록 제목으로 분리할 수 있는 부분은 제목으로 분리하거나 여러 제목셀로 만들어진 표의 제목셀의 단수를 줄여주시면 보조기기에서 표를 읽어나갈 때 쉬워지니 참고해보시면 좋겠습니다.

    제목셀이 3단으로 구성된 표를 2단으로 줄여 기획한 표 예시

    또 가능하다면 표에 넣지 않고 표의 제목, 즉 캡션을 마크업으로 제공해주신다면 더욱 접근성을 높이는 기획이 될 수 있겠습니다.

    표안의 제목을 표 밖에 제목으로 제공한 표 예시

    자. 이제 우리가 실천할 때입니다. ^^

     

    댓글을 작성하려면 해주세요.
  • tip
    iOS 모바일앱 스크린리더 사용 시 닫기 버튼 제공
    하루 2020-05-27 14:50:25

    Android 단말기는 보통 소프트웨어 버튼이나 하드웨어 버튼으로 이전 버튼이 제공됩니다.
    반면 iOS는 이전 화면으로 돌아가기 위한 버튼이 없어 모바일 스크린리더(VoiceOver)를 사용할 때 이전 화면으로 돌아가기에 어려움이 있습니다.

    VoiceOver를 사용할 때 레이어팝업으로 펼쳐지는 메뉴에 닫기 버튼이 없으면 홈화면으로 되돌아가지 못하게 됩니다.
    사실 아이폰에서는 '두 손가락으로 문지르기' 제스처로 알림을 닫거나 이전 화면으로 돌아갈 수 있는 기능을 제공하고 있습니다.
    이 제스쳐를 활용하면 이전 화면으로 돌아갈 수 없는 문제를 해결할 수 있는 것으로 보입니다.

    다만 이 제스쳐가 보편적인 제스쳐인지 고민해봐야 합니다.
    접근성이란 특별한 지식 없이도 이용이 가능해야하므로 해당 기능이 보편적인 경우에만 적용하는 것이 적절합니다.

    가장 좋은 방법은 닫기 버튼을 제공하는 것입니다.
    하지만 불가피한 경우에는 해당 제스쳐를 대체수단으로 사전에 안내해주는 것이 가장 확실한 접근성 적용이라고 할 수 있습니다.

    '닫기'버튼과 제스처 제공에 대해 정리하면 4가지의 제공 방법이 있습니다.
      1) ‘닫기’버튼과 ‘Z 제스처 안내’ 동시 제공
      2) ‘닫기’버튼 제공
      3) 해당 페이지에 진입 시 “Z 제스처를 사용하여 팝업을 닫을 수 있 습니다." 와 같은 안내 제공
      4) 앱내 ‘접근성 안내’ 페이지에서 제스처 동작에 대해 안내 제공

    전문가 진단과 사용성을 고려하여 '닫기'버튼을 기본적으로 제공하고, 
    이를 대체할 수 있는 '제스처'를 함께 안내해주신다면 가장 좋은 접근성 적용이 되겠습니다.

     

    이외에도 다양한 VoiceOver 제스쳐를 확인할 수 있는 링크 공유해드립니다.

    https://support.apple.com/ko-kr/guide/iphone/iph3e2e2281/13.0/ios/13.0

    댓글을 작성하려면 해주세요.
  • tip
    컨트롤 내 SVG 요소의 초점(focus) 접근성 향상 방법
    에어류 2020-05-27 11:15:49

    SVG기반의 그래픽이나 아이콘 등의 경우 기본적으로 컨트롤 요소가 아니기 때문에 키보드가 접근하지 않습니다. 
    다만 SVG 요소에 기능을 제공하기 위해 컨트롤 요소, 즉 버튼이나 링크 요소 안에 포함하여 사용할 경우 
    SVG 요소에도 보이지 않는 초점이 적용되는 문제가 발생합니다. 

    이 경우 button 요소에 보이는 초점 한번, SVG 요소에 보이지 않는 초점 한번, 총 2번의 초점이 적용되는 문제가 있습니다. 

    스크린리더에서도 위 컨트롤을 탭키로 접근 시 ‘OO 버튼’ 컨트롤이라고 읽어주고
    다음 탭키를 선택하면 ‘그래픽’이라고 중복으로 읽어주어 스크린리더 사용자에게 불편합니다.

    위와 같은 초점 중복 문제를 해결방법을 공유합니다.

    예시)
    <button type=”button”>
           <svg width="100" height="100" focusable="false"></svg>
    </button>

    이렇게 수정하게 되면 버튼과 SVG기반 이미지에 두번씩 초점이 적용되던 것이 한번씩만 접근하게 되어
    일반적으로 컨트롤에 초점이 이동하던 방식대로 초점 순서가 간결해지게 됩니다.

    다양한 컨트롤 <a>, <input>, <select>, <textarea>, <button> 등에 SVG를 사용하시게 되면
    꼭 해당 방법을 활용해보시기 바랍니다. 

    댓글을 작성하려면 해주세요.
  • news
    W3C silver mailing list 공유합니다.
    Nts Nuli 2020-05-26 20:49:04

    W3C에서 준비중인 WCAG의 다음버전. Silver의 메일링 리스트를 공유합니다.

    기간별 논의중인 주제에 대한 메일 thread, author, subect 들이 정리되어 있습니다.

    [W3C silber mailing list]

    https://lists.w3.org/Archives/Public/public-silver/

    댓글을 작성하려면 해주세요.
  • tip
    iOS 모바일 앱 접근성 진단 시, 음성출력표시
    레드스카이 2020-05-26 13:42:55

    모바일 애플리케이션 접근성 진단을 위해 보통 2가지의 운영체제에서 진단을 하게 되는데
    그 특성이 달라 동일한 방법으로 진단하기 어려웠습니다.

     

    먼저 개방적인 운영체제의 특징을 가지고 있는 안드로이드 운영체제에서는
    모바일 스크린리더인 토크백(Talk back)의 음성낭독 내용을 확인할 수 있는 방법이 존재하고 있습니다.

     

    VoiceOver 의 음성출력표시 기능이 없었기 때문에 그 동안은 낭독 내용을 클립보드에 복사하였다가
    타 애플리케이션을 이용하여 확인하는 방법으로 안드로이드 운영체제의 음성출력표시 기능을 대체해왔습니다

     

    VoiceOver 의 음성출력표시 기능의 이름은 ‘자막패널’입니다.

    VoiceOver의 자막패널 기능을 활성화해주고, 이를 안드로이드의 음성출력표시 기능과 같이 진단 시에 활용하면
    보다 정확한 낭독내용과 함께 진단 기록으로 남길 수 있는 방법이 있어 공유합니다.

     

    iOS : 설정 > 손쉬운 사용 > VoiceOver > 자막패널 활성화

    자막패널활성자막패널 활성 결과

    댓글을 작성하려면 해주세요.
  • tip
    접근성 디자인을 통해 배운 5가지 교훈(5 lessons I learned by designing for accessibility)
    Nts Nuli 2020-04-27 16:11:15

    18개월 전, 저는 Google의 Android 팀에  Android 접근성 디자인 첫 리더로 합류했습니다.
     이제, 여러분은 제가 접근성에 대한 엄격한 자격이 있어야한다고 생각할지도 모릅니다. 약 30억 대의 Android 기기에 대한 접근 가능한 경험을 디자인하는 책임을 맡기려면 말이죠.

     솔직히 말하면, 저는 색상 대비 비율과 탭 대상 크기를 넘어 접근성에 대한 지식이 거의 없었습니다.  저는 사회적 이익을 위해 (내 경력 전반에 걸쳐 열렬한 무언가를) 디자인에 대한 열정을 가지고 있씁니다. 슬프게도, 그 팀은 그 이상의 자격을 갖춘 사람을 찾을 수 없었습니다. 즉 공허한 열정이죠.  이는 세계에서 가장 큰 기술 회사 중 하나에서도 접근성 리소스가 얼마나 부족한지를 말해줍니다.

      기술 담당자에게 물어 보면 “아, 물론 접근성은 중요합니다. 그것은 옳은 일입니다." 라고 대답할 것입니다. 마감 시간이 다가 오면 같은 사람들이 “이봐요, 저는 그것을 성공시키고 싶지만, 제약조건을 고려했을 때, 접근성 같은 최신 사례를 수용할 수 없습니다”라고 말하면서 머리카락을 뽑을 것입니다.
    제가 접근성 디자이너가 되기 전에 이러한 유형의 사고 방식을 포기해도 괜찮았습니다.  더 이상은 아닙니다.

    제가 이 일을 하고 18개월 후에 배운 내용은 다음과 같습니다.

     1. 모든 사람이 어떤 방식으로든, 어떤 시점에서든, 장애인이 됩니다.

     “장애”라고 말할 때 가장 먼저 떠오르는 것은 무엇입니까?  대부분의 사람들에게는 아마도 영구적인 장애일 것입니다. 실명 (시각 장애), 청각 장애 (청각 장애), 휠체어를 타는 사람 (운동 장애) 또는 알츠하이머 또는 다운 증후군과 같은인지 장애 일 수 있습니다.
     WHO에 따르면 장애에 대한 정의를 영구 장애로만 제한하더라도 7명 중 1명은 장애인입니다. 그것은 세계에서 10억 명이 넘는 사람들입니다.

     하지만 장애는 그보다 훨씬 넓습니다.  큰 레스토랑에서 누군가와 대화를 하려고 했는데 배경 소음 이상으로 들을 수없는 적이 있습니까?  그것은 상황적 난청입니다. 종이에 손가락을 베인 며칠 동안 그 손가락을 사용하지 않았습니까?  일시적인 운동 손상입니다.

     모든 사람은 매일 상황적, 일시적 장애를 경험합니다.

      몇 가지 예 :
     • 운전 : 상황에 따른 시각 장애, 이동성 및 주의력 저하
     • 울퉁불퉁 한 버스 / 기차 탑승 : 상황에 따라 손재주 기능 저하
     • 여행 중 현지 언어를 구사하지 못하는 경우 : 언어적 의사 소통 장애
     • 쇼핑 중 가방을 휴대한 경우 : 상황에 따라 이동 장애
     • 눈 검사 후 동공 확대 : 일시적인 시력 장애
      • 뼈 부상으로 인한 캐스트(깁스) 착용 : 일시적인 이동 장애
     • 아침에 커피가 충분하지 않음 : 일시적인 인지 장애

     이러한 상황에서 정상적으로 신체를 가진 사람은 제품 (물리적 또는 디지털)을 사용할 때 영구적인 장애를 가진 사람과 동일한 제한을 경험합니다.
    모든 사람들은 날이 갈수록 꾸준히 나이를 먹고 있습니다.  나이가 들어감에 따라 신체  능력과  인지 능력이 자연적으로 저하됩니다.  시각 장애가 있는 사람의 약 65%가 65세 이상입니다 (WHO, 2012).  오늘날 완벽한  20/20 시력을 가지고 있다고해서,  영원히 그런 상태를 유지한다는 의미는 아닙니다.

     기술 제품은 기술에 정통한 젊은 층에 중점을 두는 경향이 있습니다.  하지만, 우리가 사용자 중심의 제품 디자이너로서 노인을 고려하지 않는다면 필연적으로 늙었을 때 누가 우리를 돌볼까요?

      2. 접근 가능한 제품 = 모든 단일 사용자를 위한 더 나은 제품입니다.

     접근성을 염두에 두고 디자인한다는 것은 영구적인 장애가 있거나 상황에 따라 일시적으로 장애가 있는 사람이든 모두를 포함한다는 의미입니다.  손쉬운 사용은 형태, 형태 또는 엣지케이스를 구성하지 않으며, 100 % 사용자에게 영향을 미칩니다.
    전형적인 현상은 curb cut (연석 절단) 효과입니다. 이는 장애인을 위해 디자인된 것들이 종종 모든 사람을 돕는다는 사실을 의미합니다.

     curb cut(연석 절단)은 길을 만나는 보도로 깎인 경사로입니다.  여러분은 아마 그것들을 실제로 눈치채지 못하고 본 적이 있을 것입니다. 이것은 휠체어를 탄 사람들이 쉽게 돌아다닐 수 있도록 법에 의해 의무화되어 있습니다.  하지만 수하물을 옮기거나 유모차 또는 자전거를 밀거나 스케이트 보드를 타는 사람들에게도 유용합니다.

    curb cut(연석 절단) 효과의 다른 예는 다음과 같습니다.

    •  타자기 : 원래 이탈리아 발명가 펠레그리노 토리 (Pellegrino Turri)가 맹인 여자 친구가 읽을 수 있는 연애 편지를 더 많이 쓸 수 있도록 디자인했습니다 (Bodine, Cathy. Assistive Technology and Science. 2013).

    •  자막 : 원래 청각 장애인이 TV 시청을 돕도록 디자인 되었습니다.

    •  이메일 : 인터넷을 디자인 할 때 빈트 서프 (Vint Cerf)가 자신의 청각 장애와 서면 의사 소통 (CNET)에 크게 영향을 받습니다.

     또한 접근성은 볼 수 있는 근본적인 문제를 증폭시키는 돋보기 렌즈입니다.  손떨림이있는 사람이 UI에서 특정 버튼을 탭하는 데 문제가 있는 경우, 사용하지 않는 사용자도 해당 버튼을 사용하려고 할 때 잘못 탭하는 경우가 많습니다.  학습 장애가 있는 사용자가 제품의 언어 또는 레이아웃을 이해하는 데 어려움을 겪는 경우, 장애가 없는 사용자도 이해하기 어렵고 복잡 할 것입니다.

     장애가 있는 사람들을 위해 문제를 해결하기 위해 시간과 자원을 바치면 모든 사람들이 그 혜택을 누리게됩니다. 솔직히 말하면 우리는 때때로 약간의 도움을받을 수 있기 때문입니다.


    출처 : https://uxdesign.cc/5-lessons-i-learned-by-designing-for-accessibility-65842a74f849

    댓글을 작성하려면 해주세요.
  • tip
    음수값차트는 표현이 되지 않나요?
    요화 2017-05-23 11:02:15

    음수값까지 들어가는 것을 표현하고 싶은데 음수값은 적용하는 법이 나와있지 않네요 설정에 음수값을 넣으도 표현이 되지 않구요 음수값까지 포함되는 차트를 알고 싶습니다~

    댓글을 작성하려면 해주세요.
  • tip
    널리 라이브러리 질문드립니다.
    네버리안 2017-05-19 10:54:16

    제가 이번에 만든 제품에 널리 라이브러리를 사용하여 제품에 넣어서 가독성을 높이고 싶은데요.. 라이선스규정과 라이선스를 어디에다가 첨부해서 넣어야하는지 궁금합니다.

    지금만든 웹프로젝트는 폐쇄망/네트워크 환경에서 사용될것이며 jsp 기반이구요 자바 이클립스 Gradle 빌드입니다.

    DB는 postgresql 인데.. 이 DB에 있는정보를 ajax로 받아서 도넛모양하고 칼럼 차트를 사용할수있을까요??

    궁금합니다.. 그리고 상용 소프트웨어에 들어갈거라.. 비용을 따로 내야되는지도... 궁금하네요..

    댓글을 작성하려면 해주세요.
  • tip
    css formatter 변환이 안되네요
    aeo**** 2017-05-17 10:38:18

    안녕하세요. 평소 널리로 css코드정렬을 애용하고있는데요. 갑자기 소스변환이 안되네요.(2주전에는 사용했었는데...) 변환된다고 로딩바가 뜨지만 변환된 파일은 0k입니다. 답변과 조치 부탁드립니다.

    감사합니다.

    댓글을 작성하려면 해주세요.
  • tip
    N-MET 'Sprites Generator' 의 내보내기가 작동하지 않습니다.
    삼초 2017-05-10 10:56:06

    안녕하세요. N-MET을 이전부터 유용하게 사용해왔던 퍼블리셔입니다. :)

    다름이 아니라, N-MET의 Sprites Generator 의 내보내기 기능이 이번 주 월요일 오후부터 작동하지 않고 있습니다. 이전에도 동일한 문제로 널리 포럼으에 문의드린 적이 있는데, 이번에도 서버에 문제가 생겨 이미지가 생성되지 않는 것인지요? 혹시 이 문제라면 언제쯤 정상적으로 사용할 수 있을지 알고 싶습니다.

    시간 나실 때 답변 부탁드립니다. 좋은 프로그램 만들어 주셔서 감사합니다.

    댓글을 작성하려면 해주세요.
  • tip
    Line Chart 조언 부탁드립니다.
    jesse 2017-04-05 18:00:08

    alt

    위 그림처럼 Line Chart 를 활용해서 추이 그래프를 만들고자 합니다.

    좌우로 스크롤? 스와이프? 해서 해당 날짜의 데이터를 볼려면 어떻게 하면 좋을까요?

    조언을 부탁드립니다.

    댓글을 작성하려면 해주세요.
  • tip
    네이버 검색 - 서브메뉴
    IT 2017-03-17 09:40:39

    안녕하세요.

    alt

    네이버 검색 시 사이트 영역에서 노출되는 서브링크를 등록하려고 하는데요.

    네이버에서 제공하는 "네이버 웹마스터도구"에서 요구하는 사이트맵, RSS 등 다 올렸어요.

    등록방법이나 신청을해야 한다면 신청방법 부탁드립니다.

    자동으로 수집한다면 룰에 대해서도 알려주세요.

    댓글을 작성하려면 해주세요.
  • tip
    외부데이터 활용관련 질문드립니다.
    너굴샷 2017-03-16 10:43:19

    기존에 값을 직접 입력해서 테스트를 해보았는데요, 아래는 테스트한 코드구요..

    var options = { legend:{ names: [3.09, 3.10, 3.11, 3.12, 3.13, 3.14, 3.15], hrefs: [] }, dataset:{ title:Playing time per day, //차트의 제목 values: [[9], [13], [16], [11], [16], [9], [4]], //각각의 데이터 colorset: [#30a1ce], // 라인컬러 fields:[] //범주 }, chartDiv : chart, // 차트 div 선택 chartType : line, // 차트 타입 chartSize : {width:600, height:300}, // 차트 크기 minValue : 0, // 차트 최소값 maxValue : 30, // 차트 최대값 increment : 5, // 차트 y축 범위 증가량 isGuideLineNeeded : false // 가이드라인 사용 유무 설정 }; Nwagon.chart(options);

    이런식으로 직접입력하면 라인차트가 생성이되는데 위에서 직접입력을 하지 않고 만약 외부 json파일의 데이터를 파싱 후 그 값은 변수에 저장, 그 변수들을 위에 dataset에 입력이 가능한가요? 외부로부터 받은 값을 차트로 그려주고싶은데 그부분이 가능한지 궁금해 글써봅니다..

    댓글을 작성하려면 해주세요.
  • tip
    옵션설정중 질문드립니다.
    너굴샷 2017-03-16 09:33:34

    line 차트를 테스트용으로 구성해보는중에 dataset의 title부분이 차트의 타이틀설정이라고 나오는데 이 title을 설정한 텍스트는 어디에 표출이되는건가요? 옵션을 설정해도 어디에 쓰이는건지 찾을수없어서 질문드려봅니다..

    댓글을 작성하려면 해주세요.
  • tip
    모바일 작업하실대 psd 해상도 어느 사이즈로 작업하시나요??
    김종성 2017-03-14 15:36:08

    지금 1080*1920 해상도 psd를 받아서 퍼블리싱 중인데

    다른 분들은 psd 어느 해상도를 받아서 작업하시는지요?

    댓글을 작성하려면 해주세요.
  • tip
    웹접근성 법률 적용
    보리 2017-03-06 16:46:33

    안녕하세요.

    서비스 사업자가 국내 사업자이면, 국내가 아닌 해외 서비스만 하더라도 국내법에 적용해서 웹접근성 작업 진행을 하는게 맞나요? 아니면 해외(미국)법에 맞게 적용을 해야하나요?

    댓글을 작성하려면 해주세요.
  • tip
    textarea에 title 사용
    koc**** 2017-02-14 11:08:53

    안녕하십니까.

    접근성 프로젝트를 처음 접해 보고 있습니다. 자세한 내용도 몰라서 접근성 관련 교육 동영상을 보며 공부 하고 있습니다.

    제 질문 내용은 다음과 같습니다.

    <div>
        <textarea (다른 속성들 생략) title="채팅내용 입력strong text" placeholder="메시지를 입력하세요.">
    </div>

    이런식으로 사용하고 있는데요.

    레이블이 시각적으료 표현되지 않을 경우에는 label 을 숨김처리 하거나 title을 사용할수 있음

    이라는 접근성 관련 내용을 봤습니다.

    여기서 레이블 이라는 것은

    닉네임 [ 인풋 타입 텍스트]

    이런 구조에서 닉네임 부분레이블 인가요?

    저런 레이블이 없으면 title을 사용해도 된다는 건가요?

    그러면 위에서 제가 textarea에 사용한 title 은 이상이 없는걸까요..?

    댓글을 작성하려면 해주세요.
  • tip
    네이버 모바일웹 로그인 페이지 오류 문제 질문드립니다.
    rime 2017-02-13 17:55:34

    네이버 홈페이지를 아이폰으로 크롬이나 사파리로 들어갔을때 (안드로이드 폰으로는 테스트 해보지 못했습니다.

    아래 동영상같은 문제가 발생합니다. input 창에 값 입력후 지울때

    마지막 값을 지우게 되면 공백이 발생하는 버그가 발생하게 됩니다.,

    동영상 링크 : link

    혹시 이문제에 대한 원인을 알수 있을까요?

    제가 구현하고 있는 사이트도 네이버와 같은 문제점이 있는데.. 혹시 해결방안이 있나 해서 질문드립니다.

    댓글을 작성하려면 해주세요.
  • tip
    차트 label 줄바꿈 질문입니다. (개행)
    카인대학일 2017-01-23 15:16:09

    legend:{ names: xxxx, xxxxx, ccccc

    이런식으로 차트의 라벨을 선언해두고 사용하는데요. 문제는 라벨의 이름이 xxxxxxxx xxxxxxxxx, cccc 이렇게 길어질 경우 앞의 라벨 string이 뒤의 라벨 string을 가려버립니다. 이를 해결하기 위해 앞의 라벨에 공백에서 줄바꿈을 하면 해결 될 것 같은데요. 어떻게 하면 좋을까요??

    xxxxxxxx xxxxxxxx xxxxxxxx xxxxxxxx xxxxxxxx xxxxxxxx xxxxxxxx
    xxxxxxxx xxxxxxxx<br>xxxxxxxx

    시도해본 목록입니다.

    댓글을 작성하려면 해주세요.
  • tip
    multi_column 챠트에서 배열 사용하기
    헐랭이 2017-01-21 15:38:26
        <div id="chart18"></div>
    <script>
        var options = {
            legend:{
                names: [1월, 2월, 3월, 4월, 5월, 6월, 7월, 8월, 9월, 10월, 11월, 12월],
                hrefs: []
                    },
            dataset:{
                title:Playing time per day, 
                values: [[51, 17], [62, 45], [25, 52], [32, 45], [52, 15], [82, 51], [72, 58], [32, 25], [42, 52], [12, 15], [28, 52], [32, 15]],
                colorset: [lue, 
    ed],
                fields:[신규, 해지]
                },
            chartDiv : chart18,
            chartType : multi_column,
            chartSize : {width:700, height:600},
            maxValue : 100,
            increment : 5
        };
    
        Nwagon.chart(options);
    </script>
    
    

    상기 코드의 names를 보시면 1월부터 12월까지 반복이 사용됩니다. 이런 경우 names안에 for문을 이용한 구문이 들어갈 수 없는지요? 예를 들면 for(v=1;v<=12;v++){ v; }

    이런 형태로는 넣을 수 없나요? 1일부터 31일, 2010년부터 2016년도 도 마찬가지일 듯 한데...

    댓글을 작성하려면 해주세요.
  • tip
    nwagon 다각형 그래프 사용
    바꾸기 2017-01-09 13:39:55

    다각형 그래프 만들어 질때 시계방향으로 치면 3시방향에 있는게 start로 제일 첫번째 꺼잖아요

    그걸 12시 방향으로 해서 시계방향으로 그래프가 생성되게 할라면 js 뭘 수정해야 하나요?

    그러니깐 제가 가,나,다,라,마 {10,20,30,40,50} 이렇게 만들었을때

    가는 오른쪽 끝인 3시방향에 나타나잖아요 이 시작 부분을 12시 방향 제일 위쪽으로 해서 만들고 싶어요

    이미지 첨부 한거 보면 Perceivable가 제일 처음이예요 이걸 제일 위로 해서 반듯한 오각형을 만들고 싶어요

    사각형이나 육각형은 모양이 반듯한데 오각형이나 삼각형 같은 경우 삐뚤어져서 보기 흉해요...

    alt

    댓글을 작성하려면 해주세요.
  • tip
    모바일 페이지에서 첫화면부터 모바일 키패드가 보이게 가능한가요??
    김종성 2016-12-21 18:49:21

    모바일에서 index.html에 들어가자마자 input에 focus가 있으면서 키패드가 보여지게 가능한가요??

    댓글을 작성하려면 해주세요.
  • tip
    MAC에서 브라우저별 나눔고딕 font-weight 렌더링이슈
    ggc3**** 2016-12-18 16:04:11

    OS : macOS Sierra(10.12.1)
    테스트 브라우저 :
         1. Chrome (버전 55.0.2883.95 (64-bit))
         2. Safari (버전 10.0.1(12602.2.14.0.7))
         3. FireFox (버전 50.1.0)
         4. Opera (버전 41.0.2353.69 /)
    이슈내용
        mac에서 나눔TTF를 설치하고 font-family:"나눔고딕", "NanumGothic"으로 선언할 경우 chrome/opera 브라우저에서 font-weight가 적용되지 않는 현상.
    *네이버에서 맥용TTF 나눔고딕을 설치하여 서체관리자에는 나눔고딕(폰트페밀리) Regular/Bold/ExtraBold 3가지 굵기의 폰트가 설치되있습니다. 단, 서체관리자에서 Regular서체를 제외한 나머지 폰트를 삭제 후 확인하면 normal/bold 두가지 font-weight가 정용됩니다.
    나눔OTF를 설치하고 font-family:"NanumGothicOTF"로 선언해주면 문제없이 적용됨.

    css
        p{font-family:나눔고딕, NanumGothic;font-size:40px;line-height:.5}
    마크업
    <p style="font-weight:100">나눔고딕abcdef ABCDEF 1234567890 font-weight:100</p>
    <p style="font-weight:200">나눔고딕abcdef ABCDEF 1234567890 font-weight:200</p>
    <p style="font-weight:300">나눔고딕abcdef ABCDEF 1234567890 font-weight:300</p>
    <p style="font-weight:400">나눔고딕abcdef ABCDEF 1234567890 font-weight:400</p>
    <p style="font-weight:500">나눔고딕abcdef ABCDEF 1234567890 font-weight:500</p>
    <p style="font-weight:600">나눔고딕abcdef ABCDEF 1234567890 font-weight:600</p>
    <p style="font-weight:700">나눔고딕abcdef ABCDEF 1234567890 font-weight:700</p>
    <p style="font-weight:800">나눔고딕abcdef ABCDEF 1234567890 font-weight:800</p>
    <p style="font-weight:900">나눔고딕abcdef ABCDEF 1234567890 font-weight:900</p>
    <p style="font-weight:lighter">나눔고딕abcdef ABCDEF 1234567890 font-weight:lighter</p>
    <p style="font-weight:normal">나눔고딕abcdef ABCDEF 1234567890 font-weight:normal</p>
    <p style="font-weight:bold">나눔고딕abcdef ABCDEF 1234567890 font-weight:bold</p>
    <p style="font-weight:bolder"><span>나눔고딕abcdef ABCDEF 1234567890 font-weight:border</p>

    Chrome 화면 Chrome 캡처화면

    Opear 화면 Opera 캡처화면

    댓글을 작성하려면 해주세요.
  • tip
    font size 여백 문제 어떻게 하시나요
    김종성 2016-12-12 12:04:10

    보통 폰트를 쓰면 폰트위에 여백이 살짝 공간이 잡혀서 일반 폰트 크기보다 더 크게 잡히던데

    이런부분들을 해결하시나요??

    댓글을 작성하려면 해주세요.
  • tip
    마우스 오버시 값이 안나타니지 않고 검정바탕이 뜨는현상
    똥만이 2016-12-06 10:03:55

    모든 그래프에 마우스 오버시 값이 나타나지 않고 검정바탕이 뜨는 현상이 일어나서 문의 드립니다.

    댓글을 작성하려면 해주세요.
  • tip
    가로 막대 차트는 어떻게 만드나요??
    유준아빠 2016-12-02 14:51:41

    가로 막대 차트는 만들수없나요? 차트 종류를 봐도 세로는 있는데 가로 막대 차트는 보이지 않아서요 답변 부탁드립니다 수고하세요.

    댓글을 작성하려면 해주세요.
  • tip
    파이차트 관련하여 문의드립니다
    로체스터 2016-11-09 10:22:10

    파이나 도넛차트에서 툴팁이 아닌 영역안에 퍼센티지 숫자를 넣을수 있는 옵션이 있을까요?

    댓글을 작성하려면 해주세요.
  • tip
    Nwagon option정리해놓은것은 없나요?
    쳐부수자북괴군 2016-11-08 11:39:06

    네이버에서도 멋진 오픈소스 차트가 나왔네요!

    이번에 한번 적용해보려 하는데 구글차트처럼 옵션 및 API 정리해놓은곳은 어디있나요? 안보이네용..

    댓글을 작성하려면 해주세요.
  • tip
    line차트에 대해 문의드립니다.
    카드값줘 2016-10-28 13:46:05

    line차트를 사용중인데 그래프 값마다 나오는 점들을 지워서 하나의 선으로만 만들순 없나요??

    댓글을 작성하려면 해주세요.
  • tip
    Nwagon donut chart 질문입니다.
    ih**** 2016-10-05 14:30:01

    현재 도넛 차트 커스텀 중니다. 궁금한 점이 차트에 마우스 오버 시 차트에 관한 데이터 들이 나오는데 아래와 같은 그림의 영역을 따로 제어하는 방법은 없는가요?

    alt

    그리고 차트 만드는 레이아웃 자체가 고정인데 유동적으로 사이즈에 맞게 변하는 레이아웃은 못잡는건가요?

    댓글을 작성하려면 해주세요.
  • tip
    차트 툴팁 관련하여 문의드립니다.
    Kim Smc 2016-10-04 18:08:18

    http://nuli.navercorp.com/forum/post/68

    목록을 살펴본 결과 이전에도 같은 문의를 하신 분들이 몇몇분 계신데 정확한 답을 못 얻은것 같아서 다시 문의드려요..

    저는 라인차트를 쓰고있는데 마우스오버시에만 툴팁이 보여지게 되어있습니다.

    그런데 아예 처음부터 각 포인트에 해당 값이 노출되도록 하고싶은데 어디 어떤 함수를 건드려야 할까요??

    자체적으로 스크립트로 만들어 줘야한다는 글을 보았는데 어디다 만들어야할지를 모르겠습니다..

    답변 부탁드려요.감사합니다.

    댓글을 작성하려면 해주세요.
  • tip
    Nwagon_no_vml 파일의 쓰임세?
    똘이맘 2016-09-23 09:48:30

    익스플로러 하위버전에 쓸수 있는 그래프를 검색하다 오늘 발견했습니다.

    다운로드 후 파일을 보니 Nwagonnovm.js가 있던데

    요파일은 언제 어떻게 쓰는지 궁금합니다.

    댓글을 작성하려면 해주세요.
  • tip
    그래프 x, y축에 단위 세팅방법 문의드립니다.
    kal**** 2016-09-21 12:27:13

    아래 그림처럼... x축에 일, y축에 원 이러식으로 값을 넣을 수 있을까요?

    alt

    댓글을 작성하려면 해주세요.
  • tip
    차트 컬러를 자동으로 결정하기?
    rarose 2016-09-08 16:09:17

    차트 컬러를 자동으로 결정하는 좋은 방법이 있나요? 랜덤하게라도..

    댓글을 작성하려면 해주세요.
  • tip
    각 차트들 타이틀은 왜 표시가 안된나요??
    구름 2016-09-06 10:50:45

    소스내부에는 들어가있는거 같은데

    HTML에서 표시가 안되네요 방법이 없나요??

    댓글을 작성하려면 해주세요.
  • tip
    적절한 제목 그 올바른 방법은
    af**** 2016-08-24 15:08:53

    xhtml 독타입으로 웹접근성 사이트를 마크업할 때 <section>과 <aside>를 사용할 수 없습니다. 참고로 section과 aside는 컨텐츠 블록(outline)을 생성해 줍니다. 그래서 헤딩태그를 자유롭게 사용할 수 있습니다. 그렇지 않다면 헤딩태그의 레벨에 신경을 많이 써야 하죠.

    그런데 xhtml에서 적절한 제목을 제공하기 위해서 헤딩태그를 사용할 때 여러분은 어떠한 기준으로 마크업을 하시나요? 문서의 중요도에 따라 헤딩태그의 레벨을 결정하시나요? 아니면 문서의 구조를 기준으로 마크업 하시나요? 제가 의문점이 든 것은 만약 gnb에 <h2>로 마크업을 하였고 메인 컨텐츠의 어떠한 영역에 또 <h2>로 마크업 했을때 과연 잘못된 것인가 하는 것이었고 로고에 <h1>으로 푸터쪽에 <h1>으로 마크업을 하였다면 이 역시 잘못된 것인가 하는 겁니다.

    여러분의 의견이 궁금합니다.

    댓글을 작성하려면 해주세요.
  • tip
    웹 접근성 오류
    마이구미 2016-08-16 10:07:46

    웹 접근성 테스트 할려고 했는데 아래와 같은 텍스트가 떴습니다. You can check following schemas only: "http://", "https://"

    해결 방안이 어떻게 될까요?

    아래 테스트 링크입니다. https://livere.com/

    댓글을 작성하려면 해주세요.
  • tip
    모바일 3d 기법 배너
    뽀로롱 2016-08-12 16:48:46

    네이버 모바일 메인페이지를 보는데

    광고배너중 터치슬라이드를 할때

    위아래로 3d처럼 움직이는 배너를 본적이 있는데요

    그걸 무슨기법이라고 하나요?

    구현 방식은 무엇인가요???

    댓글을 작성하려면 해주세요.
  • tip
    Single Column Chart 문의
    r*** 2016-08-10 15:34:04

    Single Column Chart에서 maxValue 값 이상의 값이 입력됐을 경우 alt

    이미지의 두번째 막대그래프처럼 표시됩니다. 딱 maxvalue 만큼 그려지게 할 수 있는 방법이 있을까요?

    또 tooltip에 글자 표시 가능한지 가능하다면 방법은 무엇인지 알고 싶습니다.

    댓글을 작성하려면 해주세요.
  • tip
    왜 나눔 폰트가 ie8에서 깨져나올까요.
    af**** 2016-08-01 18:58:16

    네이버에서는 폰트가 안깨지고 잘 나오는데 왜 제가 만든 사이트의 웹폰트만 IE8에서 깨지는 지 모르겠네요. 왜 그런걸 까요.

    댓글을 작성하려면 해주세요.
  • tip
    웹폰트 적용방법 어떤게 올바른 방법일까요.
    af**** 2016-08-01 15:53:31

    웹폰트 적용방법은 크게 두가지가 있는데요. 하나는 아래방식이고

    @font-face { font-family: NanumBarunGothic;

    src: url(../webfont/NanumBarunGothic/NanumBarunGothicWeb.eot);

    src: url(../webfont/NanumBarunGothic/NanumBarunGothicWeb.eot?#iefix) format(embedded-opentype),url(../webfont/NanumBarunGothic/NanumBarunGothicWeb.woff) format(woff), url(../webfont/NanumBarunGothic/NanumBarunGothicWeb.ttf) format(ruetype); }

    그리고 나머지 하나는 특수문자를 이용해서 사용하는 방법입니다.

    @font-face{ font-family:nanum;

    src:url(fonts/NanumGothic.eot);

    src:local(※),url(fonts/NanumGothic.woff) format(woff)

    }

    코딩하는 입장으로써 이 두 코딩에서 가끔 햇갈리더군요. 제가 알기론 아래가 폰트 포멧을 브라우저에 따라 다운받게하는 최적의 코드라고 알고 있는데요. 여러분의 생각은 어떠신가요?

    댓글을 작성하려면 해주세요.
  • tip
    html5에서 사라진 table의 summary 속성과 웹접근성, 웹표준
    af**** 2016-07-05 16:49:36

    html5에서 table의 summary 속성이 사라졌습니다. 웹표준 검사를 하면 오류로 표시가 됩니다.

    그렇다면 html5로 웹접근성을 고려하여 마크업을 할때 summary 속성을 작성하지 않는게 맞는건가요? 아니면 작성해야 되나요. 만약 작성하지 않아도 된다면 어떻게 작성해야 되는지 궁금합니다.

    댓글을 작성하려면 해주세요.
  • tip
    line 차트도 multi가 아닌 한 가지의 값만 받고 싶어요 ㅠㅠ
    mi**** 2016-06-18 22:32:20

    line 차트의 예시에서는 이차원 배열의 형식으로 값을 뿌려주고 있는데요, 저는 한 가지 종류의 값만 받아와서 일차원 배열의 형식으로 뿌려주고 싶어요. column 차트는 멀티와 싱글 차트가 따로 제공되고 있던데 line은 그게 아니라서 좀 어렵네요 ㅠㅠ 혹시 어떤 부분을 어떤 식으로 고쳐야 할 지 알려주실 수 있을까요?

    댓글을 작성하려면 해주세요.
  • tip
    charset이 html과 css가 다를경우
    2016-06-08 20:34:36

    얼마전에 html 은 utf-8 css는 euc-kr로 작업된 산출물을 관리하다가 ie에서 css가 적용이 되지 않는 현상을 발견한적있습니다. 당연히 동일하게 맞춰야하지만 다르게 될 경우 이런 현상이 나타나는 정확한 원인이 궁금하네요~

    댓글을 작성하려면 해주세요.
  • tip
    css에서 charset utf-8?
    af**** 2016-06-07 11:30:57

    한글폰트명이 잘 인식되기 위해 @charset "utf-8"로 선언합니다. 그러면 파일 인코딩인 euc-kr일 경우 @charset "utf-8"로 선언 해도 되나요? 아니면 파일 인코딩에 맞춰서 euc-kr로 선언해야 되는 것인가요? 만약 euc-kr로 선언해야 된다면 한글폰트명 인식에는 문제가 없는지 궁금합니다. 조언 부탁드립니다.

    댓글을 작성하려면 해주세요.
  • tip
    Column Chart div 여백 질문
    오죠사마 2016-05-19 19:17:31

    alt

    Nwagon을 사용하는 학생인데요 div에 border를 주어서 확인해보았더니 위쪽 여백이 너무 많아서 혹시 차트를 div의 top까지 올릴 방법이 있을까요?

    댓글을 작성하려면 해주세요.
  • tip
    csv파일로 부터 데이터를 읽어 차트를 구현해 보고 싶은데요
    가영아빠 2016-05-11 18:16:41

    csv파일을 읽어들여 chart로 나타내는 기능은 없나요? 검색해도 나오질 않아 문의 드립니다.

    댓글을 작성하려면 해주세요.
  • tip
    차트 툴팁
    snrnsir**** 2016-04-30 20:11:08

    차트 라이브러리 소개에

    Nwagon의 라이브러리는 자동으로 각각의 꼭지점에 마우스 이벤트를 생성하여 마우스 오버시에 각각의 항목에 대한 정확한 수치를 툴팁형태로 나타내 준다.

    라고 나와있는데 아무리 마우스오버를 시켜봐도 툴팁이 생성되지 않아서요.

    예제는 radar와 column 두가지 차트 소개에 나와있는 예제 그대로 사용하였습니다.

    두 차트 모두 툴팁이 생성되지 않는데 자동으로 생성되는것이 아닌가요 ? 아니면 제가 무언가 잘못한걸까요 ?

    댓글을 작성하려면 해주세요.
  • tip
    레이더 차트 크기 질문
    Artifex 2016-04-28 11:52:12

    함수 내에 넓이 높이가 있기는 한데, 그걸 건드리면 차트의 크기가 줄어드는 게 아니라

    차트를 보여주는 넓이 높이가 줄어들더라고요!

    이렇게 말이죠

    어떻게 해야 차트 자체의 크기를 늘이고 줄일 수 있나요?

    댓글을 작성하려면 해주세요.
  • tip
    line Chart에서 legend 표시
    천하무적 2016-04-28 01:06:44

    안녕하세요. 궁금한게 있는데, line 차트를 불러와서 표시하는데 legend 수가 많아질 경우 하단의 label이 중복되게 나와서 알아 볼 수가 없는데요, label을 보이지 않게하는 것은 drawLineForeground 내에 Nwagon.line.drawLabel 부분에서 labels.appendChild(text) 을 제외하여 전체 label을 표시하지 않게는 알겠는데, 처음과 끝 부분만 label이 출력하게끔은 설정 못하나요?

    var text = Nwagon.line.drawLabels(px + cw/2, 15, names[i], false, 0) 에서 i값 0과 data.length-1 이 처음과 끝 데이터를 받아오는 것으로 보이는데, 반복문 내에서 labels.appendChild(text)이 있다보니 전체를 출력하는것 처럼 보이네요..

    제가 잘못 파악한건지 확인 부탁드릴께요 감사합니다.

    댓글을 작성하려면 해주세요.
  • tip
    radar 차트 데이터 표현 문의입니다.
    직진이다 2016-04-18 09:54:14

    현재 포인트에 오버시만 데이터가 표현 가능합니다.

    마우스 오버가 아닌 경우에도 데이터를 표현 하고 싶습니다.

    답변 부탁드립니다.

    댓글을 작성하려면 해주세요.
  • tip
    멀티 차트는 지원하지 않나요?
    정주Yang 2016-04-11 14:31:30

    예제에 보니 단일차트만 예제로 되어 있던데 멀티차트는 지원하지 않는 건가요? 예를들어 area와 line이나 line와 Column의 조합처럼 동시에 한차트로 보여주는 것 처럼 말이죠.

    댓글을 작성하려면 해주세요.