다양한 형식으로 미디어 콘텐츠를 제시하는 방법에 대한 팁입니다.

오디오, 이미지 및 비디오 콘텐츠(미디어 콘텐츠라고도 함)를 추가하는 것은 사이트를 개선할 수 있는 훌륭한 방법입니다. 그러나 콘텐츠를 완전히 보거나 들을 수 없는 방문자가 이 정보를 어떻게 경험하게 될지 고려해야 합니다.

이 가이드를 사용하여 방문자에게 미디어 콘텐츠를 제시하는 대안적인 방법에 대해 자세히 알아보세요.

참고: 이 가이드는 참고 자료이며, 법적 조언이 아닙니다. Squarespace는 사이트 또는 비즈니스에 적용되는 특정 접근성 법률이나 표준에 대한 조언을 제공하지 않으며, 이는 Squarespace의 서비스 약관에 명시되어 있습니다.

비디오 시청하기

이미지

인터넷은 시각적 매체로, 이미지가 사이트를 표현하는 데 중요한 역할을 할 수 있습니다. 대체 텍스트와 같은 요소 및 애니메이션 이미지나 .gif의 형식을 지정하는 방법은 유의해야 할 중요한 사항입니다.

대체 텍스트

페이지를 스캔하면 스크린 리더는 이미지를 식별하고 방문자에게 설명 텍스트(대체 텍스트)를 읽어줍니다. 대체 텍스트를 추가할 때, 잠시 시간을 내어 처음에 이미지를 사용한 이유를 생각해 보세요. 예를 들면 정보를 전달하기 위한 것인가요, 아니면 장식용인가요? 시각 장애가 있는 방문자가 비장애인 방문자가 이용할 수 있는 모든 정보에 접근하려면 이미지에 대해 어떤 내용을 알아야 할까요?

가장 좋은 방법은 전화로 친구에게 설명하듯이 이미지를 간략하게 설명하는 것입니다. 콘텐츠를 구분하는 그래픽이나 추상적인 배경 이미지와 같은 순수 장식용 이미지는 설명이 필요하지 않습니다. 대체 텍스트가 페이지의 콘텐츠라는 점을 기억하는 것이 중요합니다. 명확하고 간결하게 작성되어야 합니다.

애니메이션 GIF

사이트 대부분의 영역에 애니메이션 이미지 또는 .gif를 추가할 수 있습니다. 애니메이션 .gif 파일이 1초 동안 3회 이상 깜박이지 않도록 하세요. 이러한 유형의 콘텐츠는 발작이나 기타 신체적 반응을 유발할 수 있는 것으로 알려져 있습니다.

팁: 사이트가 7.1 버전을 사용 중인 경우 방문자는 기기 설정을 통해 일부 애니메이션 기능을 끌 수 있습니다. 이렇게 하면 사이트를 방문할 때 움직임이 줄어듭니다. 예를 들어 Mac 사용자가 기기에서 화면 모션을 줄이도록 선택하면, 배경 이미지 효과 또는 배경 아트에 대해 활성화한 애니메이션이 해당 방문자에게 애니메이션으로 표시되지 않습니다.

비디오

사이트에 비디오를 추가할 때 다음 팁을 염두에 두세요.

• YouTube 및 Vimeo의 통합된 클로즈드 캡션 기능을 사용하여 동기화된 캡션을 추가하세요. 이렇게 하면 시청자가 비디오 블록 내에서 캡션을 활성화하거나 비활성화할 수 있습니다. 캡션 추가에 대한 자세한 내용은 YouTube 및 Vimeo를 참조하세요.
• 페이지당 배경 비디오를 두 개 이하로 추가하세요. 과도한 모션은 움직임에 민감한 사람에게 어려움을 줄 수 있습니다.
• 비디오에서 1초 동안 3회 이상 깜박이는 콘텐츠를 사용하지 마세요.

오디오

대본을 추가하여 청각 장애가 있는 방문자가 팟캐스트와 같은 오디오 콘텐츠에 접근할 수 있도록 도와줄 수 있습니다. 페이지 관리를 위해 링크되지 않은 페이지에 대본을 포함하는 것이 좋습니다.

모션

모션과 애니메이션은 더욱 인터랙티브하고 눈길을 사로잡는 사이트를 만들 수 있습니다. 그러나 방문자가 혼란스러워하지 않도록 주의하는 것이 중요합니다. 특히 모션을 포함하는 디자인 선택은 움직임에 민감한 사람에게 부정적인 영향을 미칠 수 있습니다. 다음은 사이트의 완전한 접근성을 보장하기 위해 미묘하게 사용하거나 완전히 피해야 할 디자인 요소입니다.

시차 효과

시차 효과는 스크롤할 때 배경 요소가 전경 요소와 다른 속도로 움직이는 현상입니다. 이러한 유형의 효과를 사용할 때는 전정 장애가 있는 사람들의 요구 사항를 고려하세요.

시차 효과는 다음과 같은 사람에게 어려움을 줄 수 있습니다.

• 많은 공간을 차지할 때
• 텍스트 뒤 또는 근처에 나타날 때
• 한 페이지에서 여러 번 발생할 때

배경 이미지 효과를 끄려면 배경 이미지 섹션의 단계를 따르세요. 이미지 효과로 없음을 선택했는지 확인하세요. 시차 효과를 사용하는 경우 페이지당 하나로 제한하고 각 효과의 크기와 깊이를 최소화하는 것을 고려하세요.

사이트에서 모션과 애니메이션을 줄이는 방법에 대해 자세히 알아보려면 사이트 전체 애니메이션을 참조하세요.

깜박임

깜박이거나 빠르게 색상이 변하는 콘텐츠는 민감한 방문자에게 발작을 유발할 수 있습니다. 가능하면 깜박이거나 색상이 빠르게 바뀌는 콘텐츠 사용을 피하고 다음 가이드라인을 적용하는 것이 좋습니다.

• 1초에 3회 이상 깜박이지 않습니다.
• 일반적인 깜박임 및 빨간색 깜박임 임계값보다 낮습니다.

깜박임 임계값은 각 색상마다 다릅니다. 사람들은 다른 색상보다 빨간색 깜박임에 더 많이 영향을 받습니다.

Trace Center의 감광성 간질 분석 도구를 사용하여 발작 위험과 깜박임 임계값을 테스트할 수 있습니다.