접근성: CMS 모범 사례

CMS(콘텐츠 관리 시스템)에 접근성 모범 사례를 구현하면 보조 기술에 의존하는 사용자를 포함해 모든 사용자가 사이트를 사용할 수 있습니다. 이러한 사례에는 요소에 접근 가능한 이름 추가, 이미지 및 갤러리에 효과적인 대체 텍스트 사용, ARIA 속성이 있는 섹션 또는 컨테이너에 요소 배치 등이 포함됩니다. 

이러한 가이드라인을 따르면 모든 사용자를 수용할 수 있는 보다 포용성 있는 사이트를 제작해 사용자가 콘텐츠를 더 쉽게 탐색하고 상호 작용할 수 있습니다.

대체 텍스트는 이미지와 갤러리에 컨텍스트를 제공하는 데 필수적입니다. 대체 텍스트 작성 시에는 AI가 이미지를 이해하는 것처럼 이미지를 설명하는 데 집중해야 합니다. 125자 미만으로 간결하게 유지하고 "~의 이미지"와 같은 표현은 피하세요. 효과적인 대체 텍스트 작성에 대한 자세한 지침은 접근성: 이미지 및 갤러리 준비하기를 참고하세요.

일반적으로 CMS 연결 이미지 및 갤러리의 대체 텍스트로 사용할 컬렉션 입력란을 생성하는 것이 좋습니다. 컬렉션을 체계적으로 유지하려면, 컬렉션이 나타내는 이미지 또는 갤러리 옆 대체 텍스트 입력란을 배치하고 이름을 "대체 텍스트 [이미지/갤러리 이름]"으로 지정할 수 있습니다. 장식 이미지에는 대체 텍스트가 반드시 필요한 것은 아닙니다. 자세한 내용은 아래의 장식 이미지 섹션을 참고하세요. 

CMS에 장식용 이미지가 아닌 이미지를 추가하는 경우에는 설명이 포함된 대체 텍스트를 제공하는 것이 중요합니다. 이미지의 대체 텍스트를 나타내는 별도의 '텍스트' 입력란 유형을 CMS 컬렉션에 추가하는 것이 좋습니다. 대체 텍스트에는 구체적이고 설명적인 표현을 사용하는 데 집중하세요. 예를 들어, 대체 텍스트를 "여성"으로 작성하는 대신 "정원에서 데이지를 심는 여성"을 사용하세요. 

에디터의 이미지를 데이터세트에 연결 시에는 대체 텍스트 연결 대상 입력란을 클릭하고 생성한 대체 텍스트 입력란을 선택하세요. 이를 통해 스크린 리더가 이미지와 목적을 설명할 수 있어 사이트를 보다 포용성 있게 만들 수 있습니다. 

장식용 이미지는 일반적으로 의미 있는 콘텐츠를 전달하지 않으며 대체 텍스트가 필요하지 않습니다. 이미지가 순전히 장식용으로 사용되는 경우, 데이터세트에서 대체 텍스트의 연결을 해제한 상태로 둘 수 있습니다. 이는 스크린 리더가 이미지를 건너뛰어 불필요한 방해 요소를 방지하는 데 도움이 됩니다.

이미지 링크가 데이터세트 작업(예: 동적 아이템 페이지 열기)에 링크되는 경우, 대체 텍스트는 이미지 자체가 아닌 작업을 설명해야 합니다. 예를 들어, 이미지 클릭 시 방문자가 프로필 페이지로 이동하는 경우, 대체 텍스트는 "Willis McSmoot에 대해 자세히 알아보세요"가 될 수 있습니다.

표현식을 사용하면 정적 텍스트(예: "자세히 알아보기")와 동적 컬렉션 입력란 값(예: "Willis McSmoot")을 결합해 이미지마다 다른 대체 텍스트를 적용할 수 있습니다. 이를 통해 방문자는 보조 기술 사용 시 이미지의 목적을 이해할 수 있습니다. 

'이미지' 입력란 유형에 연결된 갤러리의 경우, 각 이미지에 대한 대체 텍스트를 제공하는 것이 중요합니다. CMS 컬렉션에 이미지의 대체 텍스트에 대해 별도의 '텍스트' 입력란 유형을 생성하세요. 갤러리를 데이터세트에 연결할 때 대체 텍스트 연결 대상 드롭다운을 해당 대체 텍스트 입력란에 연결합니다 . 이는 스크린 리더가 갤러리 내 이미지에 대한 설명을 제공할 수 있도록 해 접근성을 향상시킬 수 있습니다.

갤러리를 '미디어 갤러리' 입력란에 연결하는 것은 동적 아이템 페이지에 아이템에 대한 수많은 이미지 또는 동영상을 표시할 수 있는 좋은 방법입니다. 이 경우, 컬렉션의 '미디어 갤러리' 입력란 내에 각 미디어 파일에 대한 대체 텍스트를 추가하세요. 컬렉션의 해당 아이템 옆 '미디어 갤러리' 입력란을 클릭해 각 미디어 파일에 대체 텍스트를 추가합니다. 여기에 각 파일의 제목 및 설명을 입력할 수도 있습니다. 이를 통해 스크린 리더는 이미지와 동영상 모두의 컨텍스트를 전달해 갤러리의 모든 미디어 콘텐츠에 액세스할 수 있습니다.

Studio 에디터에서 '더보기' 버튼을 추가하는 경우, 반복 레이아웃 또는 갤러리 아래에 배치되는 모든 것을 별도의 섹션에 유지하세요. 반복 레이아웃 또는 갤러리와 동일한 섹션에 요소를 반복 레이아웃 또는 갤러리 바로 아래에 배치하는 경우, '더보기' 버튼을 클릭하면 요소가 겹치게 됩니다. 이러한 겹치는 부분은 가시성과 접근성을 방해해 방문자에게 혼란을 초래할 수 있습니다.

이 문제를 방지하려면, '더보기' 버튼을 포함해 반복 레이아웃 또는 갤러리 아래에 배치하려는 모든 요소가 별도의 섹션에 연결되어 있는지 확인하세요. 이렇게 하면 사용자가 '더보기' 버튼 클릭 시 갤러리 또는 반복 레이아웃이 겹치지 않고 적절하게 확장되어 보다 명확하고 사용자 친화적인 경험을 제공할 수 있습니다.

정적 페이지에서 방문자가 '다음/이전 아이템' 버튼을 클릭해 CMS 연결 요소가 콘텐츠를 변경할 수 있는 경우 표시 요소를 단일 컨테이너에 첨부합니다. 그 다음, 컨테이너의 ARIA(접근성 리치 인터넷 애플리케이션) 속성을 설정해 방문자가 버튼 클릭 시 스크린 리더가 변경된 콘텐츠를 알릴 수 있도록 할 수 있습니다.

변경되는 콘텐츠를 표시하는 요소만 추가하면 됩니다. '다음/이전 아이템' 버튼을 컨테이너에 추가할 필요는 없습니다.

텍스트 요소에 데이터세트 아이템 수를 표시하고 방문자가 입력 요소를 클릭해 아이템 수를 변경할 수 있는 경우, 컨테이너에 텍스트를 첨부합니다. 그 다음, 컨테이너의 ARIA(접근성 리치 인터넷 애플리케이션) 속성을 설정해 아이템 수 변경 시 스크린 리더가 이를 알릴 수 있도록 합니다.

이는 방문자가 콘텐츠를 필터링하는 입력 또는 콘텐츠를 수집하는 입력을 클릭하는 경우와 관련이 있을 수 있습니다. 방문자가 표시되는 아이템 수를 변경할 수 있는 경우, 스크린 리더가 변경사항을 알 수 있도록 아이템 수를 표시하는 텍스트를 컨테이너에 추가하세요.

콘텐츠를 필터링하도록 설정된 입력 요소가 있는 경우, 방문자가 선택하는 즉시 필터가 기본적으로 적용됩니다. '필터 적용' 버튼을 추가해 이 동작을 변경할 수 있습니다.

접근성을 위해 '필터 적용' 버튼을 추가하는 것이 좋습니다. 이 버튼을 사용하면 방문자가 클릭할 때까지 콘텐츠가 필터링되지 않습니다. 이 기능은 특히 사용자가 여러 필터를 한 번에 적용하기 전 여러 필터를 설정하려는 경우, 더욱 향상된 경험을 제공합니다. 

페이지 번호바의 접근성을 높이려면, 바 자체와 버튼 모두에 접근 가능한 이름을 추가하세요. 이러한 이름은 화면에는 표시되지 않지만 스크린 리더기에 필수적이며, 사용자가 페이지 탐색 방법을 이해하는 데 도움이 됩니다. 예를 들어, 페이지 번호바 이름을 "페이지 탐색"으로 지정하고 "다음 페이지", "이전 페이지"와 같은 버튼에 명확한 이름을 지정하거나 콘텐츠에 따라 사용자 지정할 수 있습니다(예: "다음 게시물" 또는 "이전 제품").

아래를 클릭해 일반적인 접근성 질문에 대한 답변을 확인하세요.