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

입력 필드의 명도 대비가 3:1 미만인 경우 접근성 위배인가요?

입력 필드의 명도 대비가 3:1 미만으로 제공되어도 입력 필드에 제공된 입력 자리 표시자(Placeholder)의 명도 대비가 4.5:1 이상이면 1.4.11 Non-text Contrast 지표에 위배되지 않습니다. 동일하게 버튼의 명도 대비가 3:1 미만으로 제공되어도 버튼명(텍스트)의 명도 대비가 4.5:1 이상이면 접근성에 위배되지 않습니다.

 

[ 1.4.11 Non-text Contrast 지표 중 질문에 대한 내용 발췌 ]

이 성공 기준은 컨트롤의 선택 영역을 나타내는 시각적 표시가 있을 것을 요구하지 않지만, 컨트롤의 시각적 표시가 컨트롤을 식별하는 유일한 방법인 경우 해당 표시의 명도 대비는 충분해야 합니다. 다만, 버튼 내의 텍스트(또는 아이콘) 또는 텍스트 입력 내부의 플레이스홀더 텍스트가 표시되고 있고 선택 영역에 대한 시각적 표시가 없는 경우 성공 기준을 통과합니다.

아코디언의 구성(단일 또는 다중)에 따라 마크업이 다르게 적용되나요?

• 아코디언은 어떻게 구성(단일 또는 다중)되어 있는지 따라서 마크업 방식이 달라집니다.
  • 단일 아코디언
    • <button> 요소로 마크업하고 확장 상태는 aria-expanded 속성을 사용하고 aria-controls로 아코디언 패널과 연결합니다.
    • 아코디언 패널의 컨테이너에 role="region" 을 삽입하고 연결된 아코디언 헤더 제목과 aria-labelledby와 연결합니다.
  • 다중 아코디언
    • 기본적인 구조는 단일 아코디언과 동일하지만 아코디언 헤더를 헤딩 요소로 제작하거나 role="heading" 과 aria-level 속성을 사용합니다.

세로 이중 스크롤이 발생하는 경우 접근성 위배인가요?

세로 스크롤이 이중으로 발생하여도 접근성에 위배되지 않습니다.

CSS Style 적용되지 않은 기본 브라우저 포커스(검정색)인 경우 접근성 위배인가요?

단순히 포커스 CSS Style이 적용되지 않았다고 접근성에 문제되지는 않습니다. 다만, 기본 브라우저 포커스와 배경 간의 명도 대비가 3:1 미만인 경우 1.4.11 Non-text Contrast 지표에 의해 접근성 위배이므로 배경 이미지의 색상을 변경하거나 포커스 스타일을 수정하여 해결할 수 있습니다.

확장 영역(aira-expaned 속성을 사용) 밖을 마우스 클릭하는 경우 확장 영역이 닫혀야 하나요?

접근성에서는 키보드 포커스가 확장 영역에서 벗어나면 확장 영역이 닫히도록 제시하는 요건만 존재하나,인터페이스의 일관성을 위해서 확장 영역 밖을 클릭하는 경우에도 동일하게 확장 영역이 닫히도록 개발하고 있습니다.

이미지 파일을 다운로드 할 수 있는 다운로드 링크에 시각적 포맷(JPG, PNG 등)으로도 정보를 제공해야 하나요?

시각적 포맷으로 정보를 제공하지 않아도 접근성에 문제되진 않습니다. (숨김텍스트 형태로 이미지 파일의 포맷만 구분하여 제공하면 됩니다.) 다만, PDF의 경우 이미지와 달리 시각적 포맷으로 정보를 제공하고, 숨김텍스트 형태도 동일하게 제공합니다.

텍스트에 음영 효과를 적용한 경우 어떤 부분의 명도 대비를 체크해야 되나요?

텍스트와 근접한 배경 영역의 명도 대비가 4.5:1 이상 준수하면 됩니다.