접근성 관련 자주 묻는 질문!

입력 필드에는 레이블이 무조건 제공되어야 하나요?

네, 사용자가 입력이 필요한 콘텐츠(<input>, <textare> 등)에 올바른 입력 목적을 확인할 수 있도록 시각적으로 확인할 수 있는 레이블 또는 지시문을 제공해야 합니다.

입력 후 사라져서 시각적으로 입력 목적을 확인할 수 없는 입력 자리 표시자(Placeholder)는 레이블로 사용할 수 없습니다.

AEM 컴포넌트(SVLA 등)에서 동영상 재생 시 등록한 자막이 표출되지 않는데, 어떻게 조치해야되나요?

• 자막이 WebVTT 파일 형태인지 확인합니다. 파일 형태가 동일하다면, WebVTT 파일 작성 시 정해진 자막 형식에 맞게 작성되었는지 확인합니다.
  • 첫 줄은 파일 형식을 나타내기 위해 파일 시작 시 헤더를 넣습니다.
  • WebVTT 파일( .VTT)에는 큐(Cues)가 포함되어 있으며 한 줄 또는 여러 줄일 수 있습니다.
  • 두번째 줄은 비워두고 세 번째 줄에는 첫 번째 큐에 대한 시간이 지정됩니다. 예를 들어, 시간 1초에서 시작하여 4초에서 끝나는 첫 번째 큐의 경우 다음과 같이 작성됩니다.

이미지 또는 동영상에서 클릭 모션(Click Motion)을 나타내는 불투명한 영역과 텍스트의 명도 대비를 확인해야되나요?

네, 불투명한 영역이 텍스트 영역과 겹쳐 있다면 텍스트와 배경 간 명도 대비를 4.5:1(한국 기준 3:1) 이상 준수해야 합니다.

 

💡 참고(Reference)

클릭(Click)하는 영역을 되도록 텍스트와 겹치지 않도록 구성하고, 불가피하게 텍스트와 겹치는 경우 클릭(Click)하는 영역의 색상을 진하게 구성하여 텍스트가 보이지 않도록 합니다.

모바일앱에서 스크린리더(Screen Reader)로 순차 탐색 시 포커스(Focus)가 화면에 보이지 않을 때 화면의 스크롤을 통해 대체 가능한가요?

아니오, 스크린리더(Screen Reader)가 활성화된 상태에서 순차 탐색(한 손가락 좌에서 우 스와이프 동작)하는 경우 포커스가 반드시 화면에 보여야 합니다. 화면의 스크롤을 아래로 내려서 포커스를 화면에 보이게 하는 것은 대체 가능한 방법이 아닙니다.

💡 참고(Reference)

화면 전체를 스크롤 하는 동작이 예외가 될 수 있는 지표는 *단일 포인터 입력 지원(2.5.1 Pointer Gestures)*에 해당하며, 다른 지표의 예외 내용이 될 수 없으므로 주의가 필요합니다.

• 단일 포인터 입력 지원(2.5.1 Pointer Gestures) : 모든 콘텐츠는 단일 포인터(탭, 더블탭) 방식으로 이용할 수 있어야 하며, 스크린리더가 비활성화된 상태(OFF)에서 점검합니다.

UI가 동일하지만 기능이 다른 경우 관련 aria-* 속성을 동일하게 제공해야되나요?

개별 요소에는 기능에 알맞은 aria-* 속성을 제공해야 됩니다. 다만, 아래 예시와 같이 기능이 다르지만 기능의 목적이 Nevigation의 용도로 사용하고 있는 UI의 경우 해당 기능을 감싸고 있는 <div>에 role=”Nevigation”을 삽입하고, aria-label 또는 aria-labelledby 속성으로 어떤 목적인지 안내해야 합니다.

좌우로 스와이프하는 콘텐츠의 부분 가로 스크롤을 없애기 위해서 CSS 적용으로 인해 FireFox 브라우저에서 콘텐츠 영역에 전체 포커스가 적용되는 것을 어떻게 해결하나요?

• 좌/우 스와이프하는 콘텐츠를 감싸고 있는 <div> 영역에 tabindex=”-1”를 삽입하면 키보드 포커스가 적용되지 않아서 해결되지만, Android의 TalkBack은 tabindex=”-1”이 삽입된 영역에 포커스가 적용되기 때문에tabindex 속성을 사용하는 것이 궁극적인 해결 방법은 아닙니다.
• FireFox 브라우저에서만 발생하는 문제로서 현재 명확한 해결 방법이 없습니다. 추후 해결 방법을 발견하면 관련 내용 업데이트 하겠습니다.

키보드 사용자가 표와 같은 특정 영역의 가로 또는 세로 스크롤을 사용하기 위해 tabindex=”0”을 지정한 경우 ARC Toolkit 오류가 발생하는데 괜찮은가요?

• 가로 또는 세로 스크롤을 사용하기 위해 tabindex=”0”을 지정한 경우 tabindex가 삽입된 태그에 role=”region”을 삽입하여 역할을 지정하고, aria-label=”제목”으로 용도에 대해 설명합니다.
  Short note on improving usability of scrollable regions - TPGi

대한민국에서 서비스하는 홈페이지에서 영문 나래이션이 포함된 동영상인 경우, 영어 자막만 제공하면 접근성에 위배인가요?

• WCAG 기준으로 영문 나래이션에 대한 대체 정보인 영문 자막(Caption)만 제공되면 접근성에 문제되지 않습니다. (비장애인 사용자와 장애인 사용자가 동일하게 접근 불가능한 관점, 접근성과 별개로 사용자 문제에 더 치중됨)
• 다만, KWCAG 기준에서는 한국에 서비스한다면 영문 나래이션에 대한 대체 정보를 한국어 자막(Subtitle)으로 제공해야하므로 이를 제공하지 않는 경우 문제가 될 수 있습니다. (장애인 사용자가 콘텐츠를 이용할 수 없는 관점, 사용자 문제도 접근성 범주에 포함됨)
• WCAG, KWCAG 두 기준 모두 준수해야 하는 대한항공 홈페이지의 동영상 자막 기준으로 정리하면 Page의 언어(lang 속성)에 알맞은 닫힌 자막이 제공 되어야 하며, 해당하는 언어의 닫힌 자막이 없는 경우 접근성 위배입니다.

💡 예를 들어 동영상에 삽입된 나래이션 또는 열린 자막의 언어가 영어인 동영상을 대한민국에 서비스하는 경우 한국어 닫힌 자막은 필수이며, 그 외 언어는 옵션입니다.

⚠️ Caption의 경우 동영상 내 언어와 동일한 자막을 뜻하며, 동영상 내 언어와 다른 언어로 번역된 자막은 Subtitle이라고 합니다. 몇몇 국가에서는 Caption을 Subtitle이라고 부르기도 합니다.

동영상 제공 시 각 닫힌 자막은 필수로 제공해야되나요?

 

• 경우에 따라 자막을 제공하는 방식이 달라집니다.
  • Case 1. 열린 자막 O 나래이션 O
  : 아래 예시와 같이 열린 자막(여러 명이, 각자의~)과 나래이션으로 동영상의 내용을 모든 설명하고 있다면 닫힌 자막을 필수도 제공하지 않아도 됩니다. 다만, 사례를 설명하는 내용을 열린 자막과 나래이션만으로 인식할 수 없다면 동영상 화면이 보이지 않는 시각장애인 사용자는 사례에 대한 내용을 확인할 수 없기 때문에 닫힌 자막으로 사례에 대한 설명을 추가로 제공해야 됩니다.
  • 열린 자막과 나래이션으로 동영상의 모든 내용을 확인 가능한 경우: 닫힌 자막 상관없음
  • 열린 자막과 나래이션으로 확인할 수 없는 내용이 동영상에 삽입된 경우: 닫힌 자막 필수 제공

• Case 2. 열린 자막 X 나래이션 O
  • 나래이션이 동영상의 모든 내용을 설명하고 있어도 자막이 없으면 청각장애인은 동영상의 내용을 온전히 확인할 수 없으므로 자막이 제공되어야 합니다. 이때, 나래이션이 모든 내용을 전달하고 있으면 열린 자막으로 제공해도 상관없으나, 나래이션만으로 동영상의 내용을 확인할 수 없는 경우 닫힌 자막으로 제공해야 합니다.
• Case 3. 열린 자막 O 나래이션 X
  • 열린 자막이 제공되어도 시각장애인이 사용하는 스크린리더(화면낭독기)는 열린 자막을 확인할 수 없으므로 닫힌 자막을 필수로 제공해야 합니다.
• Case 4. 열린 자막 X 나래이션 X
  • 동영상에 열린 자막과 나래이션이 둘 다 없는 경우 시각장애인은 동영상의 내용을 확인할 방법이 없으므로 닫힌 자막을 필수로 제공해야 합니다. 이때, 닫힌 자막은 동영상의 내용을 화면을 보지 않고도 전반적인 동영상의 내용을 확인할 수 있어야 합니다.
• 각 케이스 별로 구분하기 어려운 경우 모든 케이스에 닫힌 자막을 제공해도 상관없습니다.

⚠️ 나래이션에 제공된 내용이 닫힌 자막에 제공되지 않은 경우 접근성 위배(청각 장애인이 나래이션으로 제공된 내용을 확인할 수 없으므로)이며, 반대로 닫힌 자막에 제공된 내용이 나래이션에 제공되지 않은 경우에는 위배에 해당하지 않습니다.

 

💡 닫힌 자막(Closed Caption)으로 제공하면 청각 장애인뿐만 아니라 시각장애인도 스크린리더(화면낭독기)를 통해 자막의 내용을 확인할 수 있습니다.