SNC Lab

사용자로부터 값을 입력 받을 때 사용하는 사용자 인터페이스를 입력 서식이라고 부릅니다. 우리가 입력 서식을 통해 정확한 값을 받기 위해서는 레이블(label)이 필요합니다. 여기서 말하는 레이블은 서식에 입력해야 하는 값이 무엇인지 설명하는 이름표입니다. 이번 글에서는 간단하게 레이블의 제공 여부와 레이블을 올바르게 제공하기 위해 주의해야 할 사항을 오류유형을 통해 살펴보도록 하겠습니다. 입력 서식에 레이블이 없는 경우 입력 서식에 대응하는 레이블이 없다는 것은 사용자가 입력해야 하는 값이 무엇인지 알 수 없는 상황과 같습니다. 레이블처럼 보이는 것이 있어도 스크린리더가 이를 읽지 못하면, 스크린리더 사용자에게는 레이블이 없는 것과 마찬가지입니다. Example placeholder로 레이블을 대체한 이..

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

표는 어떤 내용을 일정한 형식과 순서에 따라 알아 보기 쉽게 나타낸 것입니다. 그러므로 우리가 표를 만들 때는 표의 일정한 형식과 순서를 알 수 있게 만들어야 합니다. 그렇지 않으면 우리가 표를 통해 전달하고자 하는 내용이 제대로 전달되지 않을 수 있습니다. 그럼, 웹콘텐츠로서 표의 내용을 사용자가 이해하기 쉽게 하려면 어떻게 표를 구현해야 할까요? 이번 글에서는 표를 제공할 때 주의해야 할 웹 접근성 오류 유형 3가지를 알아 보겠습니다. 표의 제목과 요약 정보를 제공하지 않거나 불충분하게 제공한 경우 HTML5에서는 표의 제목과 요약정보는 요소를 사용하여 제공할 수 있습니다. 제목(caption)이 없거나, 표의 내용을 충분히 대변하지 못하는 caption을 제공하는 것은 사용자에게 나름대로 표를 분석..

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

혹시 웹 콘텐츠를 탐색하던 중에 요청하지 않은 기능이 갑자기 실행된 적 있으신가요? 예를 들어 링크가 새 창으로 열리거나, 우리의 의도를 넘겨짚어 새 콘텐츠를 불러오는 등의 기능들이 우리가 원하지도 않았는데 실행되곤 하는 경우 말입니다. 이러한 경험을 하게 될 때 사람들마다 받아들이는 느낌은 상당히 다를 수 있습니다. 특히 저시력인과 시각장애인은 자신의 예측을 벗어난 화면에 혼란스러울 수 있고, 인지장애인은 새로운 상황을 이해하는 데 많은 시간이 걸릴 수 있습니다. 웹 접근성에서는 이러한 문제를 방지하기 위해 사용자의 예상을 벗어난 변화가 일어나지 않도록 몇 가지 오류 유형을 제시하고 있습니다. 이번 글에서는 그 오류 유형을 통해 사용자가 예측가능한 콘텐츠와 기능을 제공하는 방법을 함께 알아보도록 하겠습..

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

웹 콘텐츠 중에는 본인인증 번호 입력과 같이 시간이 제한되어 있는 것이 있습니다. 대부분의 경우 보안상의 이유로 시간제한이 되어 있지만, 모든 사용자가 제한 시간내에 원하는 작업을 완료하기란 어렵습니다. 예를 들어, 시각 장애가 있고 화면 판독기를 사용하는 사람이라면 화면의 레이아웃을 이해하고 정보를 찾아 컨트롤을 작동시키기까지 제한된 시간보다 더 많은 시간이 필요할 수 있습니다. 마찬가지로 인지 또는 언어 장애가 있는 사람도 정보를 읽고 이해하는 데 많은 시간이 필요할 수 있습니다. 이 외에도 불안정한 네트워크 환경 등의 문제가 있을 수 있기 때문에 시간제한이 있는 콘텐츠를 제공할 때에는 유의해야 할 점이 많습니다. 시간제한이 있는 콘텐츠를 제어할 수 있는 수단을 제공하지 않은 경우 사용자가 제한된 시..

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

이번 글에서는 오류 유형을 통해 키보드가 접근할 수 있는 웹 콘텐츠를 제공하는 방안에 대해 알아 보려 합니다. 웹 접근성에서 키보드를 특별히 중요하게 다루어야 하는 이유는 무엇일까요? 웹사이트를 탐색할 때 시각 장애인 사용자는 스크린 리더의 도움을 받아도 화면에 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