이 페이지가 도움이 되셨나요?
아니요

접근성이 높은 뷰를 설계하기 위한 최상의 방법

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

Tableau는 WCAG 2.0 AA(웹 콘텐츠 접근성) 지침을 충족하는 웹 페이지에 내장할 경우 US Section 508 요구 사항을 준수하는 뷰를 작성할 수 있게 해 주는 몇 가지 컨트롤을 지원합니다. 접근성을 위한 뷰 작성의 단계에 따를 뿐만 아니라, 웹 사이트에 내장된 콘텐츠가 다음과 같은 WCAG 2.0 AA 원칙을 준수하는지도 확인해야 합니다.

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

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

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

간결함

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, NarrativeScience의 Narratives for Tableau 또는 Yseop의 Savvy를 사용하십시오.

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

    쉽게 액세스할 수 없음 - 텍스트가 너무 작음 쉽게 액세스할 수 있음 - 보다 설명적인 텍스트
    • 이 뷰에서는 시트 제목에 대한 기본 텍스트와 필터 및 범례에 대한 기본 레이블을 사용합니다.

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

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

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

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

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

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

 

색상 및 대비

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

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

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

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

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

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

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

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

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

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

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

 

뷰 게시

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

사용자가 뷰를 사용할 수 있게 만들려면 Tableau Server 또는 Tableau Online에 뷰를 게시하고 툴바 메뉴에서 공유를 클릭하고 내장 코드를 복사한 다음 WCAG 규격 웹 페이지에 붙여 넣어 뷰를 내장하고 사용자가 사용할 수 있게 만드십시오.

참고: Tableau의 툴바에서 알림, 사용자 지정 뷰 및 구독 단추는 WCAG 규격을 지원하지 않기 때문에 웹 페이지에 뷰를 내장하기 전에 내장 코드를 조금 수정하여 이러한 단추를 해제해야 합니다. Tableau의 웹 편집은 WCAG 규격을 지원하지 않기 때문에 게시된 통합 문서에서 웹 편집 사용 권한을 해제해야 합니다.

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