SNC Lab

이번 글에서는 오류 유형을 통해 키보드가 접근할 수 있는 웹 콘텐츠를 제공하는 방안에 대해 알아 보려 합니다. 웹 접근성에서 키보드를 특별히 중요하게 다루어야 하는 이유는 무엇일까요? 웹사이트를 탐색할 때 시각 장애인 사용자는 스크린 리더의 도움을 받아도 화면에 UI와 마우스 커서가 어느 곳에 위치하고 있는지 정확하게 알 수 없기 때문에 마우스로 원하는 요소를 클릭 하기가 쉽지 않습니다. 또한, 손에 떨림이 있거나 신체 운동에 제약이 있는 사용자 역시 마우스로 탐색을 하기 보다는 주로 키보드를 사용합니다. 키보드에서 ‘Tab’ 키를 누르면 초점(focus)이 현재 상호작용이 가능한 위치로 이동합니다. 만약 상호작용이 가능한 요소임에도 초점이 이동하지 않거나, 키보드에 반응하지 않는다면 키보드 사용자들은 ..

오류유형으로 살펴보는 웹 접근성 지침 2020. 3. 24. 14:34

우리가 흔히 밝은 배경에 어두운 계열의 색으로 텍스트를 작성하는 것과 같이, 텍스트와 배경의 밝고 어두운 정도를 서로 상반되게 하는 이유가 있습니다. 바로 명도 대비라는 현상을 이용하여 텍스트 정보를 보다 잘 인식하기 위해서입니다. 우리는 밝고 어두운 정도를 명도라고 부르고, 서로 다른 명도가 인접하여 상대적으로 밝은 색은 더 밝게, 어두운 색은 더욱 어둡게 보일 때 '명도 대비가 높다'고 합니다. 예를 들어, 흰색 배경에 검은색 글씨의 명도 대비는 21:1로 가장 높은 값으로 측정되며, 흰색 배경에 흰색 글씨의 명도 대비는 1:1로 가장 낮은 값으로 측정됩니다. 이번 글에서는 텍스트 콘텐츠의 명도 대비가 적절하지 않은 오류 유형을 통해 텍스트의 명도 대비가 왜 중요한지, 어떻게 하면 명도 대비가 높은 ..

오류유형으로 살펴보는 웹 접근성 지침 2020. 3. 24. 14:31

웹 콘텐츠에서 색상은 사용자에게 심미적인 효과를 전달하는 것 외에도 어떤 항목을 강조하거나 다른 항목과 구분하기 위한 목적으로 흔히 사용됩니다. 그런데 어떤 항목을 다른 항목과 구분하기 위한 목적으로 색상 정보를 사용하는 경우, 모든 사람이 색상을 분명하게 구분할 수 있지는 않기 때문에 문제가 발생합니다. 우리가 흔히 색맹・색약이라고 부르는 색각 이상 증상을 가진 사람들은 대게 적색과 녹색을 구분하는 데 어려움을 격습니다. 저시력 사용자는 흰 배경에 적힌 회색 계통의 옅은 글자를 잘 읽을 수 없으며, 밝은 모니터 화면을 장시간 볼 경우 심한 눈의 피로를 느낍니다. 사용자는 이러한 불편을 해소하기 위해 명도대비를 21:1 정도로 극대화화 하여 가독성을 높이는 고대비 테마 또는 회색조 테마를 이용합니다. 이..

오류유형으로 살펴보는 웹 접근성 지침 2020. 3. 4. 17:12

이미지 콘텐츠와 마찬가지로 동영상 콘텐츠에도 대체 수단이 필요합니다. 동영상 콘텐츠에 대체 수단을 적절하게 제공하게 되면, 시각 또는 청각 장애를 가진 사람들 뿐만 아니라 일반적인 사용자도 동영상 콘텐츠를 보다 편리하게 이용할 수 있습니다. 예를 들어 주변에 소음이 가득한 공간에서 동영상을 시청하는 경우에 동영상에 자막이 있다면, 주변이 소란스러워도 볼륨을 최대로 높이지 않고 자막을 통해 내용을 알 수 있습니다. 심지어는 영상을 재생하지 않아도 콘텐츠 목록에서 미리보기로 자막과 함께 영상을 볼 수 있습니다. 동영상 콘텐츠의 대체 수단을 제공할 때에는 이미지 콘텐츠 보다 더 많은 것을 고려해야 합니다. 이미지 콘텐츠는 정보를 시각적으로만 전달하고 시간의 흐름이 없기 때문에 한 순간의 장면에 대한 설명을 제..

오류유형으로 살펴보는 웹 접근성 지침 2020. 3. 4. 17:08

오류유형3. 계층구조적 이미지에 대한 대체 텍스트 제공 우리가 콘텐츠를 접할 때 서술형 텍스트로 된 내용보다는 구조화되었거나 이미지로 표현된 내용이 한층 이해하기 쉬운 경우가 있습니다. 이러한 이유로 웹 콘텐츠 중에는 복잡한 조직의 구조나 단계적 절차 등을 간결한 이미지로 나타낸 예가 많습니다. 하지만 이러한 웹 콘텐츠들을 마크업할 때는 반드시 주의해야 할 점이 있습니다. 조직간의 관계를 표현하지 않은 경우 정부나 기업과 같이 조직체의 구조와 관계를 표현한 조직도 이미지는 각 계층 간의 관계 정보가 중요합니다. 따라서 관계 정보를 사용자가 이해할 수 있도록 올바르게 제공하는 방법을 살펴보도록 하겠습니다. Example 조직 계층이 있는 이미지 Do Not 스크린 리더 음성 "조직도 이미지" "대표이사 이..

오류유형으로 살펴보는 웹 접근성 지침 2020. 3. 4. 17:04

오류유형2. 의미 없는 이미지에 대한 대체 텍스트 제공 웹 콘텐츠를 구성하는 요소는 사용자에게 어떤 정보를 전달하려는 목적 외에도 여러가지 목적을 가집니다. 예를 들어, 이미지를 포함한 많은 시각적 요소들은 콘텐츠의 이해를 돕는 보조적인 수단, 또는 단순히 심미적인 효과를 위해 사용됩니다. 일반 사용자는 이러한 시각적 요소의 의미를 이해하기 위해 특별히 노력하지 않습니다. 오히려 이와 같은 정보에는주의를 기울이지 않고 원하는 내용을 담고 있는 영역을 우선적으로 확인할 것입니다. 그런데 우리가 콘텐츠의 강조나 심미적인 효과를 위해 사용한 이미지에 대체 텍스트를 제공한다면 스크린 리더 사용자는 무의미한 정보로 인해 웹 사이트 탐색 과정을 방해 받게 됩니다. 따라서 이러한 유형의 의미 없는 이미지는 보조기술이..

오류유형으로 살펴보는 웹 접근성 지침 2020. 2. 25. 15:38

오류 유형 1. 이미지 요소의 alt 속성 제공 웹사이트에 이미지를 표현하고 싶을 때 여러 가지 방법을 이용할 수 있습니다. 그중 가장 기본적이며, 흔하게 사용되는 방법이 , 와 같은 HTML 이미지 요소(element)의 사용일 것입니다. alt 속성(attribute)은 이러한 이미지 요소를 대체할 수 있는 텍스트(alternative text), 즉, 설명을 제공하는 역할을 합니다. 스크린 리더는 alt 속성 값으로 제공된 텍스트를 해석해서 음성으로 출력해 줍니다. 이번 편에서는 이미지 콘텐츠의 대체 텍스트를 제공하는 방법 중 하나인 alt 속성과 관련된 웹 접근성 오류에 대해 알아보겠습니다. alt 속성을 선언하지 않은 경우 만약 alt 속성 자체를 생략해 버린다면, 어떻게 될까요? alt 속성을..

오류유형으로 살펴보는 웹 접근성 지침 2020. 2. 25. 15:17

시작하기 전에 웹 접근성이 잘 보장된 웹사이트를 만들기 위한 기술을 적용할 때, 실제로 이를 필요로 하는 사용자가 유용하게 사용할 수 있도록 우리는 항상 적절한 구현 방법에 대해 고민해야 합니다. 앞으로 연재할 글에서는 웹 접근성을 적절하게 웹사이트에 적용하기 위해 어떠한 상황들이 접근성 사용자의 웹사이트 이용을 어렵게 만드는 지를 살펴보고, 문제를 해결할 수 있는 방법을 이미지, HTML, CSS, JavaScript 코드, 스크린 리더 음성 출력 사례로 제공합니다. 사례에는 수 많은 웹 접근성 프로젝트를 수행하며 확인한, 실무에서 빈번하게 발생하는 웹 접근성 문제를 반영했습니다. 하나의 웹 접근성 문제 해결에 활용할 수 있는 여러 가지 기술 및 기법이 있으나, 사례 별로 가장 적합한 방법을 선별하여 ..

오류유형으로 살펴보는 웹 접근성 지침 2020. 1. 13. 17:17