매우 유용한 뷰를 만들었고 이 뷰의 데이터를 모든 사용자가 보고 이해할 수 있게 하고 싶지만 일부 사용자에게 시각적 또는 신체적 장애가 있습니다. 이런 경우 어떻게 해야 할까요?

Tableau는 WCAG 2.0 AA(웹 콘텐츠 접근성) 지침을 충족하는 Tableau Online 또는 Tableau Server의 뷰에서 사용할 경우 US Section 508 요구 사항을 준수하는 뷰를 작성할 수 있게 해 주는 몇 가지 컨트롤을 지원합니다. Tableau Online 또는 Tableau Server에서 공유되는 콘텐츠가 접근성을 위한 뷰 작성의 단계에 따르며 다음과 같은 WCAG 2.0 AA 원칙을 준수하는지 확인해야 합니다.

  • 인지 가능 - 정보 및 사용자 인터페이스 구성 요소가 인식 가능한 방식으로 사용자에게 표현되어야 합니다. 텍스트로 대체되는 표시를 포함하고 콘텐츠를 표현하는 다른 방법을 고려하십시오.

  • 작동 가능 - 사용자 인터페이스 구성 요소와 탐색 기능을 사용자가 뷰와 상호 작용하기 위해 사용하는 다양한 장치 또는 수단을 통해 액세스할 수 있어야 합니다.
  • 이해 가능 - 뷰에 표현된 정보를 사용자가 이해할 수 있어야 합니다. 예를 들어 뷰에 표시되는 서로 다른 요소에 명확하게 구분할 수 있는 이름 및 레이블을 사용합니다.

이 문서에 설명되어 있는 최상의 방법에 따르고 접근성을 위한 뷰 작성에 설명되어 있는 단계를 통합하여 Tableau Server 또는 Tableau Online에 게시할 경우 모든 사용자에게 접근성을 보장할 수 있는 뷰를 작성하십시오.

간결함

WCAG 2.0 AA 원칙: 이해 가능

뷰를 통해 전달하려는 정보의 양이 많은 경우가 있습니다. 하지만 복잡한 뷰는 화면 읽기 프로그램이나 키보드를 사용하여 파악하거나 탐색하기 어려울 수 있습니다. 다음 지침에 따르면 정보가 밀집된 뷰로 사용자에게 부담을 주지 않으면서 필요한 모든 정보를 전달할 수 있습니다.

  • 표시하는 마크의 수를 줄일 수 있도록 가능한 경우 항상 데이터를 집계하십시오. 또한 뷰에 1000개 이상의 마크를 표시하면 뷰가 브라우저가 아닌 서버에서 렌더링될 수 있으며, 서버에서 렌더링되는 뷰는 아직 WCAG 규격을 지원하지 않습니다.

    사용자가 데이터 보기 페이지(기본적으로 설정됨)에 액세스하여 마크의 기초 데이터를 검토하거나 데이터를 같은 방식으로 표시하는 응용 프로그램에서 페이지에 액세스하여 데이터를 다운로드할 수도 있습니다.

    : 이 예에서는 세부 뷰와 집계된 뷰의 차이점을 설명하기 위해 서로 다른 두 막대 차트 뷰를 보여 줍니다.

    접근성이 낮음 - 마크가 너무 많음 접근성이 높음 - 집계된 뷰
    • 세부 정보가 너무 많아서 뷰를 이해하기 어렵습니다.

    • 뷰가 5000개 이상의 마크를 표시하며 각 마크가 표현하는 대상을 알려 주는 텍스트가 충분하게 포함되어 있지 않습니다.

    • 화면 읽기 프로그램을 필요로 하는 사용자가 사용하기에 너무 어렵습니다.

    • 이 예에서는 상위 수준에서 데이터를 집계한 동일한 뷰를 보여 줍니다.

    • 키 데이터 요소는 계속 포함되지만 이제 사용자가 읽고 이해하기가 훨씬 쉽습니다.

    • 5000개가 넘는 마크의 수가 약 20개로 줄었습니다.

    • 사용자는 뷰에 포커스를 지정한 다음 Enter 키를 눌러 데이터 보기 페이지를 열면 계속 기초 세부 정보를 볼 수 있습니다.

     

  • 텍스트, 색상, 모양 등을 사용하여 뷰에 추가적인 컨텍스트를 추가할 수 있도록 막대 차트나 라인 차트 같은 간단한 그래픽 요소를 사용하는 것이 좋습니다.

  • 마크 수를 가장 중요한 데이터 요소들을 강조할 수 있는 정도로만 제한합니다.

이 유형의 뷰를 구축하는 방법에 대한 자세한 내용과 예는 접근성을 위한 뷰 작성간결함을 참조하십시오.

 

제목 및 캡션

WCAG 2.0 AA 원칙: 인지 가능, 이해 가능

제목 및 캡션에 설명적인 텍스트를 입력하여 보조 기술을 사용하는 사용자에게 상황을 알릴 수 있으며 뷰에 있는 데이터를 파악하도록 도울 수 있습니다. 다음 지침에 따라 모든 사용자의 요구 사항을 충족하도록 Tableau의 시각적 특성을 조정합니다.

  • 뷰를 설명하기 위해 사용하는 텍스트로 뷰를 보완한다고 생각하십시오.

  • 제목 및 캡션에서 텍스트를 사용하여 비주얼리제이션과 표시하는 내용을 설명합니다.

  • 쉽게 이해할 수 있는 간결한 언어를 사용합니다. 은어, 약어 또는 줄임말을 사용하지 마십시오.

  • 텍스트 설명에 "이미지" 또는 "사진" 같은 단어를 포함시키지 마십시오. 대개 이러한 정보는 화면 읽기 프로그램에 이미 포함되어 있습니다.

  • 머리말, 제목 등을 모두 대문자로 표현하면 읽기가 어려울 수 있으므로 대문자로만 표현하지 마십시오.

    예: 이 예에서는 두 개의 서로 다른 막대 차트를 보여 줍니다. 한 막대 차트는 매우 작은 텍스트를 사용하고 다른 막대 차트는 제목 및 캡션을 사용하여 컨텍스트를 추가합니다.

    접근성 낮음 - 텍스트가 너무 작음 접근성 높음 - 설명 텍스트를 추가하여 컨텍스트 제공
    • 한 단어로 된 제목은 충분한 설명이 되지 않습니다.

    • 마크는 색상과 크기로 구분됩니다. 하지만 추가적인 텍스트가 없으면 이러한 마크의 컨텍스트를 파악하기 어려울 수 있습니다.

    • 이 뷰를 쉽게 설명할 수 있는 캡션이나 다른 설명 텍스트가 없습니다.

    • 이 예에서는 동일한 뷰를 보여 주지만, 제목과 캡션에 모두 추가적인 설명 텍스트가 포함됩니다.

    • 동일한 대비 색조와 크기 차별화 요소를 사용하지만 막대 마크에 레이블이 추가되어 추가적인 컨텍스트를 제공합니다.

컨텍스트를 위한 텍스트를 포함하는 뷰를 작성하는 방법에 대한 자세한 내용과 예는 접근성을 위한 뷰 작성도움이 되는 추가 텍스트 표시를 참조하십시오.

 

추가 텍스트

WCAG 2.0 AA 원칙: 인지 가능, 이해 가능

뷰에서 제목과 캡션만이 아니라 광범위하게 텍스트를 사용하여 표시되는 다양한 요소의 컨텍스트를 쉽게 파악할 수 있도록 돕고 범례 및 필터 같은 다양한 컨트롤과 데이터 간의 관계를 설명할 수 있습니다.

이러한 추가적인 텍스트를 사용할 때 다음 지침을 따르십시오.

  • 범례 또는 필터의 머리글에 텍스트를 사용하여 컨트롤과 해당 기능을 설명합니다. 또한 대시보드에서 텍스트 영역을 사용하여 비주얼리제이션이 표시하는 내용을 상세히 설명하는 추가적인 컨텍스트를 제공할 수 있습니다.

  • 가능한 경우 항상 컨트롤에 레이블을 표시합니다. 예를 들어 범례의 레이블을 Subcategory에서 Color key for product type으로 변경하면 사용자가 컨트롤과 데이터 간의 관계를 더욱 쉽게 이해할 수 있습니다.

  • 뷰에 링크 텍스트가 포함되는 경우 링크로 이동되는 위치를 설명하는 텍스트를 사용합니다. 예를 들어 링크 텍스트로 "Global Warming statistics for 1990-2000"을 사용합니다. "여기를 클릭하세요", "More" 또는 "More information" 같은 단어를 사용하지 마십시오. 이러한 링크 텍스트는 지나치게 일반적이어서 사용자에게 혼란을 줄 수 있습니다.

  • 비주얼리제이션에 대해 데이터 기반의 텍스트 설명을 생성하는 자연 언어 생성(NLG) 도구를 사용하는 것이 좋습니다. 예를 들어 Automated Insights의 Wordsmith(링크가 새 창에서 열림), Narrative Science의 Narratives for Tableau(링크가 새 창에서 열림) 또는 ARRIA의 Natural Language Insights 확장 프로그램(링크가 새 창에서 열림)을 사용하십시오.

    예: 이 예에서는 두 개의 거품형 차트를 보여 줍니다. 한 차트에서는 뷰를 생성할 때 기본적으로 표시되는 텍스트 하나만 사용하고 다른 차트에서는 뷰의 의미를 전달할 수 있도록 뷰 전체에 컨텍스트 기반 텍스트를 추가합니다.

    접근성 낮음 - 텍스트가 너무 작음 접근성 높음 - 보다 설명적인 텍스트
    • 이 뷰에서는 시트 제목에 대한 기본 텍스트와 필터 및 범례에 대한 기본 레이블을 사용합니다.

    • 마크는 크기와 색상으로만 구분됩니다.

    • 뷰에 컨텍스트를 제공할 수 있는 캡션이나 다른 설명 텍스트가 없습니다.

    • 이 예에서는 동일한 뷰를 보여 주지만, 추가적인 설명 텍스트가 포함됩니다.

    • 마크의 관계를 설명하고 뷰가 표시하는 내용에 대한 추가 컨텍스트를 제공하는 별도의 텍스트가 제목 및 캡션이 추가되었습니다.

    • 수익 숫자를 표시하는 마크 레이블이 추가되었기 때문에 더 이상 사용자가 이 정보를 파악하기 위해 색상에만 의존할 필요가 없습니다.

컨텍스트를 위한 추가 텍스트를 포함하는 뷰를 작성하는 방법에 대한 자세한 내용과 예는 접근성을 위한 뷰 작성도움이 되는 추가 텍스트 표시를 참조하십시오.

 

색상 및 대비

WCAG 2.0 AA 원칙: 인지 가능, 이해 가능

색상을 사용하여 뷰에서 마크를 구분할 수 있습니다. 하지만 시각 장애가 있는 사용자의 경우 색상만 사용해서는 구분이 어려울 수 있으며, 뷰에 많은 마크가 있는 경우 문제가 더 심각해집니다. 뷰에서 색상을 사용할 때 다음 지침을 따르십시오.

  • Tableau가 제공하는 색맹용 색상표를 사용하면 뷰에 적합한 색상을 쉽게 선택할 수 있습니다. 사용하는 모든 색상표에서 충분한 대비를 제공하고 명암 스펙트럼상에서 서로 구분되는 색상을 할당하십시오.

  • 라인 마크의 경우 마크를 쉽게 구분할 수 있도록 모양, 크기 및 레이블과 같은 추가 옵션을 사용하십시오.

  • 대비 분석(링크가 새 창에서 열림) 도구를 사용하여 대비 비율이 충분한 최상의 텍스트 색상과 배경색을 선택합니다. 텍스트의 색상 대비가 뚜렷하며 4.5:1(큰 텍스트의 경우 3:1)의 대비 비율 표준을 준수하는지 확인하십시오.

    예: 이 예에서는 두 개의 라인 차트를 보여 줍니다. 한 차트는 색상만 사용하여 라인을 구분하고 다른 차트는 보다 적절한 색상과 함께 모양을 사용하여 마크를 구분합니다.

    쉽게 액세스할 수 없음 - 색상만 사용하여 마크 구분 쉽게 액세스할 수 있음 - 색상과 모양을 사용하여 마크 구분
    • 이 뷰에서는 색상만 사용하여 라인을 서로 구분합니다.

    • 뷰의 마크에서 시각 장애가 있는 사용자가 완전하게 액세스할 수 있는 색상표를 사용하지 않습니다.

    • 이 예에서는 색상과 모양을 모두 사용하여 마크를 구분하는 동일한 뷰를 보여 줍니다.

    • 명확한 제목이 있는 색상 범례와 모양 범례가 뷰에서 각 색상과 모양이 나타내는 대상을 식별합니다.

마크를 쉽게 구분할 수 있도록 색상을 사용하는 뷰를 작성하는 방법에 대한 자세한 내용과 예는 접근성을 위한 뷰 작성에서 신중한 색상 사용 및 대비 제공을 참조하십시오.

 

뷰 게시

WCAG 2.0 AA 원칙: 인지 가능, 작동 가능, 이해 가능

사용자가 뷰를 사용할 수 있게 만들려면 Tableau Server 또는 Tableau Online에 뷰를 게시하고 툴바 메뉴에서 공유를 클릭하십시오. 사용자는 화면 읽기 프로그램이나 키보드를 사용하여 뷰 및 툴바 단추와 상호 작용할 수 있습니다. 자세한 내용은 Tableau 뷰의 키보드 접근성를 참조하십시오.

참고: Tableau의 웹 편집은 WCAG 규격을 지원하지 않기 때문에 게시된 통합 문서에서 웹 편집 사용 권한을 해제해야 합니다.

통합 문서를 게시하고 내장하는 방법, 내장 코드를 찾아 웹 페이지에 복사하는 방법 및 툴바를 해제하는 방법에 대한 자세한 내용은 접근성을 위한 뷰 작성에서 뷰 게시 및 공유을 참조하십시오.

피드백을 제공해 주셔서 감사합니다!