컨트롤, 입력
텍스트가 아닌 콘텐츠가 사용자의 입력을 허용하거나 컨트롤 한다면, 목적을 서술하는 이름(예: 컴포넌트 이름, 폼 입력 필드 이름 등)을 제공해야 합니다.
시간 기반 미디어
만약 텍스트가 아닌 콘텐츠가 시간에 기반한 미디어일 경우, 미디어를 설명할 수 있는 대체 수단(예: 자막, 원고, 수화 등)을 제공해야 합니다. 생방송 미디어 콘텐츠의 경우 적절한 대체 텍스트를 자막으로 제공해야 합니다.
- 오디오 미디어 사전에 녹음된 오디오 전용 컨텐츠에 대한 동등한 정보를 제공하는 수단이 필요합니다. (수화, 통역)
- 비디오 미디어 사전에 녹화된 비디오 전용 컨텐츠에 대한 동등한 정보를 제공하는 수단이 필요합니다. (자막)
감각
텍스트가 아닌 콘텐츠가 특정한 감각적 경험의 산물이라면, 최소한 설명 가능한 대체 텍스트를 제공해야 합니다.
특정한 감각적 경험의 산물로 시각 예술 작품, 음악 등이 있습니다. (예술품과 같은 것에 대한 묘사가 장황할 필요가 없다는 이야기 입니다. 명확하고 간결하게 기술하는 것이 좋습니다.)
보안 문자
텍스트가 아닌 콘텐츠의 사용 목적이 컴퓨터가 아닌 사람에 의한 접근을 확인하는 것이라면, 목적을 정의하고 서술하는 적절한 대체 텍스트를 제공하고, 장애를 극복할 수 있는 다른 형태의 캡챠(CAPTCHA)를 제공해야 합니다.
(보안 목적의 CAPCHA 임을 알리는 대체 텍스트 제공 및 시각 장애인도 이용할 수 있도록 음성 CAPCHA 등을 제공 하라는 의미입니다.)
장식성 혹은 보이지 않는 요소
텍스트가 아닌 콘텐츠가 순수한 장식 이거나, 시각적으로만 사용 되었거나, 사용자에게 보이지 않는다면 보조기술에서 이를 읽지 않고 무시하도록 처리해야 합니다.
기기 회전
특정 디스플레이 방향이 필수적 이지 않은 한, 콘텐츠는 보기 및 작동을 세로 또는 가로. 한 방향으로 제한 하지 않습니다. 이 지침을 준수하면 태블릿, 스마트폰 등을 휠체어에 장착하거나, 운동 능력이 제한되어 있거나, 현재 손이 바쁘기 때문에 휠체어를 돌리는데 어려움이 있는 사용자의 접근성이 개선 될 것입니다.
또한 시력이 약하거나 인지 장애가 있는 사람은 가로 방향을 선호 할 수 있습니다. 더 큰 텍스트 크기와 긴 행을 허용하여 가독성을 향상 시킬 수 있기 때문입니다. 모든 방향에서 애플리케이션을 사용할 수 있도록 만들면 누구나 혜택을 얻을 수 있습니다.
컬러 활용
색상 만으로 정보 전달, 행동을 지시하고, 반응을 유발하고, 시각적 요소를 식별하는 시각적인 용도로 사용하면 안됩니다. 무신사와 G마켓을 비교해 보겠습니다.
오디오 컨트롤
3초 이상 자동으로 웹 페이지가 오디오를 출력한다면, 오디오 재생을 일시정지 하거나 멈추게 하는 기능 또는 오디오 볼륨을 조절할 수 있는 기능을 제공해야 합니다.
** 나쁜 예시 : https://codingparty.goorm.io/codinghero **
대비
텍스트 또는 이미지 텍스트의 시각적인 표현은 다음 예외사항을 제외하고 명도 대비 차는 최소 4.5:1이 되어야 합니다. 큰 텍스트 : 24px 이상 또는 18px Bold 텍스트의 경우 3:1 명도 대비 차까지 허용합니다. 구글 개발자 도구를 통해 측정하고 적정 수준을 파악할 수 있습니다.
중요하지 않은 비 활성화된 텍스트나 이미지의 텍스트, 장식적인 요소, 보이지 않는 콘텐츠, 로고나 브랜드는 별도의 명도 대비 요구가 없습니다.
링크 텍스트 역시 대비가 중요합니다. 링크 텍스트가 활성화 된 상태(
:hover, :focus, :active 등)를 시각적으로 명확하게 구분할 수 있도록 만들어야 합니다. 기본 스타일을 그대로 사용하거나, 임의의 스타일을 설정해 시각적인 구분을 가능하게 만들어야 합니다.** 아래 페이지에서 클릭할 수 있는 링크가 몇개나 될지 예상해보시기 바랍니다. 만약 여러분이 저시력 장애인이라면 어떤 느낌일까요?
