정보 접근성/접근성 (A11Y) - 웹 접근성 지침 썸네일형 리스트형 웹 접근성 준수 지침 - 인식의 용이성 - 7. 콘텐츠 간의 구분 웹 접근성은 모든 사용자가 웹 콘텐츠에 접근할 수 있도록 하는 중요한 요소입니다. 특히, 인식의 용이성 측면에서는 콘텐츠 간의 명확한 구분이 필수적입니다. 이웃한 콘텐츠가 구별되지 않으면 사용자가 정보를 이해하고 이용하는 데 어려움을 겪을 수 있습니다. 따라서 아래의 방법들을 통해 콘텐츠 간의 구분을 명확히 할 수 있습니다.1) 테두리를 이용하여 구분콘텐츠 주위에 테두리를 추가하는 것은 가장 기본적이고 효과적인 방법입니다. 테두리는 콘텐츠의 경계를 명확히 하여 사용자가 각 섹션을 쉽게 구별할 수 있도록 합니다. 예를 들어, CSS를 사용하여 다음과 같이 테두리를 추가할 수 있습니다:.content { border: 1px solid #000;}2) 콘텐츠 사이에 시각적인 구분선을 삽입하여 구분콘텐츠 사.. 웹 접근성 준수 지침 - 인식의 용이성 - 6. 자동 재생 금지 웹 접근성은 모든 사용자, 특히 장애가 있는 사용자들이 웹 콘텐츠를 편리하게 이용할 수 있도록 하는 것을 목표로 합니다. 자동으로 재생되는 소리는 사용자에게 불편을 줄 수 있으며, 특히 시각 장애인, 청각 장애인, 주의력 결핍 장애가 있는 사용자들에게 더 큰 문제를 일으킬 수 있습니다. 따라서 웹 접근성 준수 지침에서는 자동 재생을 금지하고 있습니다.1) 페이지 진입 시 자동 재생되는 3초 이상의 배경음 콘텐츠(동영상 포함)자동 재생음을 제공하지 않도록 합니다. 이는 사용자에게 갑작스럽고 원치 않는 소리가 발생하는 것을 방지하기 위한 것입니다. 예를 들어, 웹페이지에 들어가자마자 3초 이상의 배경음이나 동영상이 자동으로 재생되는 경우, 사용자가 이를 제어할 수 없는 상황에서 불쾌감을 느낄 수 있습니다.구.. 웹 접근성 준수 지침 - 인식의 용이성 - 5. 텍스트 콘텐츠의 명도 대비 웹 접근성에서 텍스트 콘텐츠의 명도 대비는 사용자가 텍스트를 쉽게 읽을 수 있도록 하는 중요한 요소입니다. 텍스트와 배경 간의 명도 대비가 충분하지 않으면 저시력자나 색각 이상자 등 다양한 사용자들이 콘텐츠를 인식하는 데 어려움을 겪을 수 있습니다. 따라서 웹 접근성 지침에서는 텍스트 콘텐츠와 배경 간의 명도 대비가 4.5 대 1 이상이어야 한다고 규정하고 있습니다. 이 기준은 텍스트의 크기와 용도에 따라 다를 수 있습니다.1) 텍스트텍스트 콘텐츠와 배경 간의 명도 대비가 4.5 대 1 이상이 되도록 제공해야 합니다. 이는 일반 텍스트의 경우 기본적으로 적용되는 기준입니다. 명도 대비를 확인하려면 다양한 도구를 사용할 수 있습니다.예시텍스트와 배경 색상의 명도 대비를 계산할 수 있는 다양한 온라인 도구가.. 웹 접근성 준수 지침 - 인식의 용이성 - 4. 명확한 지시 사항 제공 지시 사항은 모양, 크기, 위치, 방향, 색, 소리 등에 관계없이 인식될 수 있어야 한다. 이를 통해 다양한 사용자들이 접근성을 보장받을 수 있으며, 웹사이트나 애플리케이션의 이용 편의성이 증대됩니다.1) 모양으로만 정보 제공모양만을 이용해 정보를 전달하는 것은 시각 장애인이나 화면 읽기 프로그램을 사용하는 사람들에게 문제가 될 수 있습니다. 예를 들어, 중요한 정보나 기능을 특정 아이콘의 모양으로만 나타내면 시각적 인식이 어려운 사용자는 이 정보를 놓칠 수 있습니다. 이를 해결하기 위해서는 텍스트 레이블을 추가하거나 대체 텍스트를 제공해야 합니다.예시:❌ 잘못된 예시: “우측 상단의 톱니바퀴 모양을 클릭하세요.”✅ 올바른 예시: “우측 상단의 톱니바퀴 모양(설정 아이콘)을 클릭하세요.”2) 위치나 방향.. 웹 접근성 준수 지침 - 인식의 용이성 - 3. 색에 무관한 콘텐츠 인식 콘텐츠는 색에 관계없이 인식될 수 있어야 한다. 이는 색각 이상자(색맹)나 시각 장애가 있는 사용자들이 콘텐츠를 완벽하게 이해하고 이용할 수 있도록 돕는 중요한 접근성 요소입니다.1) 차트차트는 데이터를 시각적으로 표현할 때 매우 유용하지만, 색상에만 의존하는 경우 색각 이상자가 정보를 해석하기 어려울 수 있습니다. 차트에서 색상 외에도 다양한 표시 방법을 사용하여 정보를 전달해야 합니다.예시:❌ 잘못된 예시: “파란색 막대는 판매량을, 빨간색 막대는 수익을 나타냅니다.”✅ 올바른 예시: “파란색 막대(점선 패턴)는 판매량을, 빨간색 막대(대각선 줄무늬)는 수익을 나타냅니다.” 이렇게 색상 외에도 패턴이나 레이블을 추가해 정보를 제공해야 합니다.추가 팁:데이터 포인트에 레이블을 추가하여 값을 명확히 표시.. 웹 접근성 준수 지침 - 인식의 용이성 - 2. 자막 제공 2. 자막 제공멀티미디어 콘텐츠에는 자막, 대본 또는 수화를 제공해야 한다.1) 멀티미디어자막 또는 대본 또는 수화를 제공한다.2) 사용자가 업로드하는 멀티미디어대체 콘텐츠를 제공할 수 있도록 안내하고 툴을 제공한다.3) 음성이 나오지 않는 멀티미디어청각적으로도 인식이 가능하도록 원고 등의 대체 콘텐츠를 제공한다. 웹 접근성 준수 지침 - 인식의 용이성 - 1. 적절한 대체 텍스트 제공 적절한 대체 텍스트 제공텍스트가 아닌 콘텐츠는 그 의미나 용도를 인식할 수 있도록 대체 텍스트를 제공해야 합니다.1. alt 제공, , 의 alt에는 적절한 대체 텍스트를 제공해야 합니다.오류 사례해결 방안2. IR 기법특수문자, 기호 포함, 조직도, 차트 등 복잡한 콘텐츠의 경우 숨김 처리로 대체 텍스트를 제공해야 합니다.오류 사례해결 방안메뉴오류 사례해결 방안이미지형3. 의미 없는 이미지장식 또는 꾸밈 목적 등의 의미 없는 이미지는 대체 텍스트를 제공하지 않아야 합니다.오류 사례해결 방안4. 이모티콘 이미지이모티콘의 의미를 파악할 수 있도록 적절한 대체 텍스트를 제공해야 합니다.오류 사례해결 방안5. QR코드 이미지해당 링크를 알 수 있도록 대체 텍스트를 제공해야 합니다.오류 사례해결 방안6. 썸네일.. 이전 1 다음
단순함연구소 UX개발실
