장애가 있는 사람들을 위해 사이트 사용성을 개선하세요.

장애가 있거나 화면 리더 및 기타 보조 기술을 사용하는 방문자를 포함한 모든 방문자가 더 쉽게 접근하고 탐색할 수 있도록 사이트의 여러 측면을 사용자 지정할 수 있습니다.

이 가이드를 사용하여 콘텐츠를 디자인하고 구조화하는 모범 사례에 관해 알아보세요.

추천 기사: 내장 기능을 활용해 접근 가능한 사이트 만들기

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

레이아웃

명확한 레이아웃과 디자인으로 웹사이트를 제작하면 저시력자나 인지 장애가 있는 방문자에게 도움이 됩니다. 그러나 레이아웃이 간단하고 일관적이면 컴퓨터에 익숙하지 않은 방문자나 모바일 기기와 같은 작은 화면에서 사이트를 보는 방문자에게도 도움이 될 수 있습니다. 웹사이트의 다양한 부분, 예를 들어 탐색 메뉴, 링크, 텍스트 섹션은 명확하게 식별 가능해야 합니다.

키보드 탐색

일부 방문자는 마우스 대신 키보드를 사용하여 사이트를 탐색할 수 있습니다. 키보드 접근성은 음성 인식 및 화면 리더와 같은 특정 보조 기술을 사용할 때도 중요합니다. 키보드만 사용하여 사이트를 탐색하면서 사이트의 접근성을 테스트해 보세요.

포커스 아웃라인 사용자 정의하기

Squarespace 7.1 버전 사이트에는 탐색 링크 및 양식 필드와 같은 페이지 항목을 강조하는 기본 포커스 아웃라인 기능이 있지만, 포커스 아웃라인은 모든 사이트와 페이지에서 표준으로 적용됩니다. 

선의 색상이나 두께를 맞춤 설정할 수는 없습니다. 방문자가 키보드의 Tab 키를 누르면 아웃라인이 나타납니다. Tab 키를 처음 누르면 콘텐츠로 건너뛰기 메시지가 나타납니다. 스페이스바를 눌러 사이트 머리말과 탐색을 건너뛰고 사이트 콘텐츠로 바로 이동하거나 Tab 키를 계속 눌러 다른 콘텐츠로 이동하세요.

참고: 포커스 아웃라인 기능에 문제가 발생하지 않도록 브라우저를 최신 버전으로 유지하세요. 브라우저 버전을 업데이트하려면 다음 단계를 따르세요.

Squarespace 키보드 단축키

사이트를 관리하고 편집할 때 사용할 수 있는 키보드 단축키에 대해 자세히 알아보세요.

플루이드 엔진

플루이드 엔진 섹션을 편집할 때 다음 모범 사례를 염두에 두세요.

• 블록이 오버랩되는 경우, 방문자가 모든 블록의 콘텐츠를 여전히 보고 사용할 수 있는지 확인하세요.
• 다양한 블록 요소가 어떻게 상호 작용할지 고려해 보세요. 예를 들어, 양식 블록이 있는 경우, 그 위에 버튼 블록을 배치하지 않는 것이 좋습니다. 방문자들이 어떤 버튼이 양식을 제출하는 버튼인지 혼란스러워할 수 있기 때문입니다.
• 다른 종류의 콘텐츠 위에 텍스트를 배치할 경우, 가독성을 확보하세요. 블록에 색상 배경을 추가하거나, 이미지에서 눈에 띄도록 텍스트 색상을 변경하거나, 텍스트를 계속 읽을 수 있는 위치로 이동하는 것 등이 해당될 수 있습니다.

명확하고 간결한 언어

사이트 콘텐츠를 만들 때 접근성을 염두에 두는 것이 중요합니다. 여기에는 사용하는 언어, 텍스트의 구조, 콘텐츠 구성 방식이 포함됩니다. 잘 구성되고 간결하며 명확한 텍스트는 모든 방문자에게 도움이 되며, 특히 인지 또는 시각적 제약이 있는 사용자에게 유용합니다.

사이트의 텍스트를 작성할 때 다음 팁을 고려하세요.

• 명확한 언어와 서식을 사용하세요.
• 간결한 문장과 단락으로 작성하세요.
• 전문 용어 및 불필요하게 복잡한 표현은 피하세요.
• 약어는 처음 등장할 때 전체 명칭을 함께 표기하세요. (예: 최상위 도메인(TLD))
• 적절한 경우 글머리 기호 목록을 사용하세요.
• 의미를 명확히 하기 위해 이미지, 비디오 및 오디오를 활용해 보세요.

제목

방문자가 새 웹페이지에 접근할 때, 화면 읽기 도구가 가장 먼저 전달하는 것은 제목입니다. 페이지에 SEO 제목이 있으면 화면 읽기 도구는 이를 읽고 페이지 제목은 건너뜁니다. SEO 제목이 없는 경우, 페이지 제목을 읽습니다.

짧고 구체적이며 고유한 페이지 제목을 제공하면 보조 기술을 사용하는 사용자들이 웹페이지의 내용과 목적을 빠르게 파악할 수 있습니다.

제목 모범 사례

제목을 작성할 때 다음 사항을 고려할 수 있습니다.

• 페이지의 주제와 목적을 소개하세요.
• 각 페이지의 제목은 고유해야 하며 사이트의 다른 페이지와 차별화되어야 합니다.
• 가장 중요한 고유 정보를 제목의 앞부분에 배치하세요. 예를 들어 '접근성 가이드'는 '접근성에 대한 안내'보다 효과적입니다.

텍스트

표제 요소

화면 읽기 도구는 시각적 요소 대신 HTML 코드를 사용해 페이지의 구조를 이해합니다. 화면 읽기 도구를 사용하는 방문자는 페이지의 각 섹션에 표제 요소가 있으면 더 쉽게 탐색할 수 있습니다. 또한 검색 엔진도 표제 요소를 기준으로 콘텐츠를 이해하므로, 표제 요소를 사용하는 것은 사이트의 SEO를 향상시키는 데에도 효과적입니다.

페이지 구조와 표제 요소에 대해 더 알아보려면 Web Accessibility Initiative를 방문하세요.

목록

텍스트의 레이아웃을 정리할 때는 목록과 표제 요소를 사용하세요. 목록은 서로 관련된 콘텐츠 묶음(예: 링크 그룹이나 예시 모음)을 명확히 나타내는 데 도움이 됩니다. 텍스트를 목록으로 서식 지정하면 다음과 같은 결과가 나타납니다.

• 콘텐츠 탐색을 더 쉽게 만드세요.
• 인지 장애가 있는 방문자가 콘텐츠를 이해하는 데 도움이 됩니다.

링크

보조 기술을 사용하는 방문자가 링크 간을 문맥을 잃지 않고 이동할 수 있도록, 각 링크 텍스트에 링크의 목적을 명확하게 설명하세요. 링크를 적절하게 포맷팅하면 SEO 향상에도 도움이 됩니다. 링크 텍스트에 '링크'라는 단어를 포함할 필요는 없습니다. 대부분의 화면 판독기는 각 링크 앞에 '링크'라고 말해줍니다.

예를 들어:

간격

텍스트에 적절한 줄 간격을 설정하세요. 이렇게 하면 방문자가 자신의 필요에 맞게 줄 간격을 조정하여 읽기 경험을 개선할 수 있습니다. 사이트 스타일에서 자간과 줄 높이를 조정할 수 있습니다.

색상

사이트 스타일을 사용하여 사이트 색상도 사용자 지정할 수 있습니다. 하지만 방문자에게 정보를 전달할 때 색상에만 의존해서는 안 됩니다. 시력이 약하거나 색각 이상이 있는 사람들은 색상 차이를 인식하지 못할 수 있습니다. 또한, 색상만으로는 화면 판독기를 사용하는 시각 장애인에게 정보를 전달할 수 없습니다.

Google Chrome의 개발자 도구 또는 Firefox의 접근성 검사기를 사용해 일반적인 색각 이상이 있는 사람이 페이지를 어떻게 경험하는지 시뮬레이션할 수 있습니다.

참고: 이는 Squarespace 지원 범위에 포함되지 않는 서드파티(타사) 도구입니다.

양식

일부 방문자에게는 양식 작성이 어려울 수 있습니다. 각 필드가 명확하게 라벨이 지정되어 있고, 양식이 쉽게 탐색 가능하도록 하는 것이 중요합니다. 텍스트 블록을 사용하여 방문자가 양식을 적절히 작성하기 위해 알아야 할 간단한 안내를 포함하세요.

양식 필드에 표시되는 예시 텍스트로 플레이스홀더를 추가할 수 있습니다. 이렇게 하면 방문자가 양식을 어떻게 작성해야 할지 더 잘 이해할 수 있습니다. 단, 플레이스홀더 텍스트는 라벨 텍스트를 대체해서는 안 됩니다. 플레이스홀더 텍스트에 대해 자세히 알아보려면 포럼을 방문하세요.