웹 콘텐츠 접근성 운용의 용이성 - by. UXKM

고려 사항

1. 키보드 인터페이스와 기능

   콘텐츠의 모든 기능은 키보드로 사용이 가능하여야 합니다. 이 경우, 해당 기능을 사용하는 데 필요한 키보드의 조작 횟수의 많고 적음은 고려 대상이 아닙니다.

2. 예외 콘텐츠

   위치 지정 도구의 커서 궤적이 중요한 역할을 하는 콘텐츠(예: 붓질 기능이 필요한 콘텐츠, 시뮬레이션 콘텐츠, 지리정보 응용 콘텐츠, 가상현실 콘텐츠)와 움직임 측정 센서를 이용하는 콘텐츠는 이 검사 항목의 예외로 간주됩니다. 그러나 이러한 예외 콘텐츠라도 위치 지정 도구나 움직임 측정 센서를 제외한 나머지 사용자 인터페이스는 반드시 키보드만으로 사용할 수 있어야 합니다.

기대 효과

위치 지정 도구를 사용할 수 없는 시각 장애인의 경우, 키보드만으로도 웹 콘텐츠나 웹 사이트가 제공하는 모든 기능을 사용할 수 있습니다.

고려 사항

1. 초점 이동 순서 유지

   사용자가 키보드를 이용해 초점을 이동할 때, 이동 순서가 사용자 예측과 일치하지 않으면 혼란을 초래할 수 있습니다. 따라서 초점 이동 순서는 사용자가 예상하는 순서와 일치해야 하며, 기존 관례를 따르는 것이 바람직합니다. 만약 관례와 다른 초점 이동 순서를 결정해야 하는 경우에는 이동 순서가 논리적이도록 구현해야 합니다.
   예를 들어, 사용자 아이디, 비밀번호 입력 창과 로그인 버튼 간의 초점 이동 순서는 [사용자 아이디] → [비밀번호] → [로그인 버튼]의 순서로 해야 합니다.

2. 함정 또는 오류 방지

   웹 콘텐츠는 사용자가 키보드로 조작할 수 없는 상태가 되거나, 다음 사용자 입력 또는 컨트롤로 초점을 이동할 수 없거나, 이전 페이지로 초점을 이동할 수 없는 상태가 되어서는 안 됩니다. 이러한 상황을 피하기 위해 웹 콘텐츠는 항상 사용자가 키보드를 통해 초점을 이동할 수 있도록 구현되어야 합니다.

3. 초점의 시각화

   사용자 입력(예: 마우스 클릭 또는 키보드 조작)으로 컨트롤이 초점을 받았을 때, 해당 컨트롤이 초점을 받았음을 시각적으로 구별할 수 있어야 합니다.
   대표적인 예로는, 키보드 조작을 통해 버튼이 초점을 받을 때 버튼 주위에 점선 테두리가 표시되는 경우가 있습니다. 위치 지정 도구(마우스)와 키보드에 의한 초점 표시 방법이 다를 수 있지만, 각 경우에 초점을 시각적으로 명확하게 구별할 수 있도록 해야 합니다.

기대 효과

• 화면 낭독 프로그램을 사용하는 사용자는 사용자 입력 주변의 상하좌우에 위치한 콘텐츠에 대한 정보를 알 수 없습니다. 따라서 웹 콘텐츠의 키보드 조작에 의한 초점 이동 순서는 기존 관례를 따라야 합니다. 그렇지 않으면 사용자가 입력을 조작하는 과정에서 혼란을 초래할 수 있습니다.
• 마우스나 키보드 조작으로 특정 영역에 이동했을 때, 해당 영역이 초점을 받았음을 시각적으로 명확히 알려주면, 저시력 장애인, 노인, 지체 장애인뿐만 아니라 비장애인도 어느 컨트롤이 선택되었고 활성화할 수 있는지를 쉽게 인지할 수 있습니다. 이렇게 시각적 피드백을 제공하는 것은 모든 사용자가 웹 콘텐츠를 보다 쉽게 탐색하고 조작할 수 있도록 도와줍니다.

고려 사항

1. 컨트롤의 크기

   콘텐츠에 포함된 모든 컨트롤은 대각선 방향의 길이를 6.0mm 이상으로 제공하는 것이 바람직합니다.

2. 링크, 사용자 입력, 기타 컨트롤 등의 안쪽 여백

   링크, 사용자 입력, 기타 컨트롤은 테두리 안쪽에 1픽셀 이상의 여백을 두어야 하며, 이 여백에서는 위치 지정 도구(마우스)의 조작에 반응하지 않도록 구현하는 것이 바람직합니다.

기대 효과

컨트롤을 크게 구현하면, 터치스크린을 사용하는 손 떨림이 있는 사용자와 시각 장애인도 컨트롤을 쉽게 찾고 조작할 수 있습니다.

고려 사항

1. 시간제한 콘텐츠 사용 배제

   시간제한이 있는 콘텐츠는 가급적 제공하지 않아야 합니다.

2. 예외 콘텐츠

   시간 제한이 있는 경우, 온라인 경매나 실시간 게임처럼 반응 시간을 조절할 수 없는 상황에서는 이 검사 항목이 적용되지 않습니다. 그러나, 이런 경우에도 사용자에게 시간 제한이 있음을 사전에 안내하고, 시간이 종료되었을 때에도 이를 알려줘야 합니다.
   또한, 세션 시간이 20시간 이상인 콘텐츠의 경우에도 예외로 간주됩니다.

3. 반응 시간 조절이 필요한 콘텐츠

   반응 시간이 정해진 웹 콘텐츠를 제공할 때, 사용자가 다음 중 한 가지 방법을 선택하여 반응 시간을 조절할 수 있는 수단을 제공해야 합니다.

   • 시간제한을 해제
   • 시간제한을 연장

   또한, 반응 시간 조절 기능은 사용자가 충분한 시간(최소 20초 이상)을 두고 사전에 알 수 있도록 해야 합니다.

기대 효과

비장애인보다 문서를 읽고 이해하는 데 더 많은 시간이 필요한 지적 장애 또는 학습 장애가 있는 사용자도 시간제한이 있는 콘텐츠를 시간에 관계없이 이용할 수 있게 됩니다.

고려 사항

1. 이동하거나 스크롤 되는 콘텐츠 사용 배제

   스크롤 및 자동 갱신되는 콘텐츠를 가급적 사용하지 않습니다.

2. 이동하거나 스크롤되는 콘텐츠

   저시력 장애인이나 지적 장애인 등은 이동하거나 스크롤되는 콘텐츠를 사용하는 데 어려움을 겪을 수 있습니다. 따라서 웹 콘텐츠는 다음과 같은 기능을 제공해야 합니다.

   • 사용자가 콘텐츠의 이동이나 스크롤을 일시 정지시킬 수 있는 컨트롤
   • 지나간 콘텐츠나 앞으로 나타날 콘텐츠를 선택할 수 있는 컨트롤

   앞으로 이동, 뒤로 이동, 정지와 같은 컨트롤을 제공함으로써 사용자들이 콘텐츠를 보다 쉽게 탐색할 수 있도록 해야 합니다.

기대 효과

• 배너와 같이 빠르게 변화하는 콘텐츠를 이용하기 어려운 지체 장애인, 노인, 뇌병변 장애인들도 빠르게 변화하는 콘텐츠를 이용할 수 있습니다.
• 스크롤되는 뉴스 콘텐츠에서 이미 지나간 뉴스를 손쉽게 확인할 수 있는 기능을 제공하면, 콘텐츠의 사용이 훨씬 편리해집니다.

고려 사항

1. 번쩍이는(blinking) 콘텐츠 사용 금지

   번쩍임이 초당 3회에서 50회이며, 10인치 이상의 화면에 표시된 번쩍이는 콘텐츠가 차지하는 면적의 합이 화면 전체 면적의 10%를 넘지 않아야 합니다.

2. 깜빡이는(flashing) 콘텐츠 사용 금지

   초당 3회에서 50회의 속도로 깜빡거리게 만든 콘텐츠는 그 깜빡임을 정지시킬 수 있어야 합니다.

3. 번쩍이는(blinking) 시간의 제한

   웹 페이지에 포함되는 콘텐츠의 번쩍이는 시간을 3초 미만으로 제한하면, 지속적인 번쩍임으로 인한 발작을 예방하면서도 콘텐츠의 중요성을 효과적으로 전달할 수 있습니다. 이러한 접근은 광과민성 증후군 환자, 학습 장애인, 저시력 장애인 등 다양한 사용자들의 안전과 편의를 보장합니다.

기대 효과

• 광과민성 증후가 있는 사용자들은 빛이 번쩍거리는 것에 민감하게 반응하여 발작을 일으킬 수 있습니다. 따라서 본 검사 항목을 준수한 콘텐츠는 광과민성 증후가 있는 사용자도 접근 가능합니다.
• 주의 집중에 어려움이 있는 사람의 경우, 지속적으로 번쩍거림이 있는 콘텐츠를 집중하여 응시하기가 매우 어렵습니다. 따라서 본 검사 항목을 만족하는 웹 콘텐츠는 주의 집중에 어려움이 있는 사람도 접근이 가능합니다.

고려 사항

1. 반복 영역을 건너 뛸 수 있는 수단 제공

   웹 페이지가 제공하는 핵심 영역이 위치한 곳으로 직접 이동하는 건너뛰기 링크를 제공해야하며, 건너뛰기 링크는 웹 페이지의 가장 앞에 위치해야 합니다.

2. 여러 개의 건너뛰기 링크 제공

   여러 개의 건너뛰기 링크를 제공하는 경우에는 핵심 영역으로 이동하기 위한 건너뛰기 링크가 가장 먼저 나타나도록 해아합니다.

3. 시각적인 구현

   건너뛰기 링크는 시각 장애인뿐 아니라 지체 장애인도 키보드 조작 횟수를 줄일 수 있게 하는 효과적인 수단이므로 메뉴 건너뛰기 링크는 화면에서 눈에 띄게 보이도록 구현해야 한다.

기대 효과

• 웹 페이지의 상단이나 좌측 프레임에 반복되는 링크 목록이 포함되어 있으면, 화면 낭독 프로그램 사용자는 이 목록을 순서대로 읽어야 하므로 매우 불편하며, 키보드 사용자도 모든 링크를 순차적으로 이동해야 핵심 영역으로 갈 수 있어 불편합니다. 이를 해결하기 위해 웹 페이지의 첫 부분에 핵심 영역으로 바로 이동할 수 있는 '건너뛰기' 링크를 제공하면, 웹 페이지 핵심 영역으로 신속하게 이동할 수 있어 효율성이 높아집니다.
• 색인이 없는 긴 문장으로 구성된 콘텐츠는 특정 위치로 이동하기 매우 불편합니다. 그러나 웹 페이지의 시작 부분에 색인을 제공하면 필요한 부분으로 직접 이동할 수 있어 내비게이션이 더 쉽고 빠릅니다.
  또한, 콘텐츠를 장, 절, 소절¹⁾ 등으로 구분하면 웹 브라우저나 보조 기술이 제공하는 장, 절, 소절 간의 빠른 이동 수단을 활용할 수 있어 더욱 효율적으로 탐색할 수 있습니다.
• 여러 페이지로 구성된 웹 사이트에서 사이트 맵을 제공하면 사용자는 이를 이용하여 필요한 정보가 위치한 페이지로 보다 쉽고 빠르게 이동할 수 있습니다.

고려 사항

1. 웹 페이지 제목(title) 제공

   모든 웹 페이지가 해당 내용을 간단명료하게 기술한 제목을 포함하고 있을 경우 여러 개의 웹 페이지가 열려 있더라도 사용자(예: 시각 장애인, 지적 장애인, 중증 지체 장애인 등)는 제목을 통해 웹 페이지를 선택하므로 모든 웹 페이지에는 해당 페이지를 간단명료하게 설명한 제목을 제공해야 합니다.
   또한, 웹 페이지 제목은 유일하고 서로 다르게 제공해야 합니다.

2. 팝업 창 제목(title) 제공

   팝업 창에도 제목을 제공해야 합니다.

3. 프레임 제목(title) 제공

   웹 페이지의 모든 프레임에는 각 프레임을 설명하는 간단명료한 제목을 제공해야 합니다. 모든 프레임에 간단명료한 제목이 부여되면 사용자(예 : 시각 장애인, 지적 장애인, 중증 지체 장애인 등)는 프레임 제목을 통해 프레임의 선택, 이동 등이 가능합니다.
   아무런 내용이 없는 프레임에도 ‘빈 프레임’ 등과 같이 제목을 제공합니다.

4. 콘텐츠 블록 제목 구성

   콘텐츠 블록에는 적절한 제목(heading)을 제공하면 제목과 본문을 구분할 수 있으며, 제목을 이용하여 콘텐츠 블록 간의 이동이 가능합니다.
   그러나 본문이 없는 콘텐츠 블록에는 제목을 붙이지 않습니다.

5. 특수 기호 사용 제한

   웹 페이지, 프레임 또는 콘텐츠 블록의 제목은 문장의 하나로 간주하여 불필요한 특수 기호를 반복해서 사용하지 않아야 합니다.

기대 효과

• 웹 사이트가 제공하는 모든 웹 페이지에 서로 다른 제목을 제공하면 동시에 여러 개의 웹 페이지가 열려 있더라도 사용자(예 : 시각 장애인, 지적 장애인, 지체 장애인 등)는 웹 페이지의 제목을 확인하여 열려있는 웹 페이지 간을 편리하게 이동할 수 있습니다.
  이를 위해, 각 페이지는 해당 페이지만의 유일하고 서로 다른(unique and exclusive) 페이지 제목을 가져야 합니다.
• 웹 페이지를 구성하는 모든 프레임에 제목을 제공하면 사용자 (예 : 시각 장애인, 지적 장애인, 중증 지체 장애인 등)는 프레임 제목을 통해 프레임 간을 매우 편리하게 이동할 수 있습니다.
  이를 위해, 페이지의 경우와 마찬가지로, 동일한 페이지에 포함된 모든 프레임은 해당 프레임만의 유일하고 서로 다른 프레임 제목을 가져야 합니다.

고려 사항

1. 맥락을 통해 이해할 수 있도록 링크 텍스트 제공

   링크의 용도나 목적지를 링크 텍스트만으로 또는 주변의 맥락으로부터 충분히 이해할 수 있도록 링크 텍스트를 제공해야 합니다.

   • 문장의 일부분에 링크를 연결하는 경우
     

     URL(Uniform Resource Locator) 목적지, 용도 등을 표현한 텍스트에 링크를 연결해야 합니다.

   • ‘바로가기’, ‘GO’ 등의 링크 텍스트를 제공하는 경우
     

     URL에 관한 정보를 제공하는 문장에 이어서 링크 텍스트를 삽입해야 합니다.

   • 이미지 링크를 제공하는 경우
     

     URL에 관한 정보를 제공하는 텍스트와 URL로 이동하는 이미지 링크는 하나의 링크로 구성하는 것이 바람직합니다. 이 경우, 이미지 링크의 대체 텍스트는 공백 문자로 제공해야 합니다.

   • 동일한 제품을 서로 다른 관점에서 각각 설명한 페이지로 이동하는 링크들은 각 링크 텍스트를 서로 다르게 구성하는 것이 바람직합니다.
   • 탭(tab) 컨트롤을 이용하여 공지사항 목록을 나열하고, 주변에 ‘더보기’ 링크를 제공하는 콘텐츠에서 ‘더보기’ 링크는 그 맥락으로부터 ‘공지사항 더보기’임을 알 수 있습니다.
2. 이미지 링크 구성

   아이콘(icon)으로 링크 텍스트를 대신하여 표현한 경우 (예: 홈 페이지로 이동하기 위한 링크를 집 모양의 아이콘 이미지로 제공하고, 해당 아이콘에 홈 페이지로 이동하는 링크를 걸어놓은 경우)
   아이콘 이미지만으로도 링크의 용도나 목적지, 내용을 충분히 이해할 수 있도록 직관적이고 명료하게 제공해야 합니다. 아이콘에 대체 텍스트를 제공하는 방법에 대해서는 검사 항목 [적절한 대체 텍스트 제공]을 참고해야 합니다.
   

   [적절한 대체 텍스트 제공] 바로가기

기대 효과

텍스트에 링크를 연결할 때 ‘여기를 클릭하세요.’와 같은 애매모호한 표현을 사용하면, 시각 장애인, 지적 장애인뿐만 아니라 비장애인도 클릭 시 어떤 일이 일어날지, 또는 어떤 내용이 제시될지 알 수 없습니다.
그러나 링크 텍스트를 직관적으로 구성하면 장애인들은 해당 링크를 클릭했을 때 무슨 일이 벌어질 것인지를 분명하게 알 수 있으므로 시각 장애인이나 지적 장애인은 맥락을 이해하기 위한 쓸데없는 콘텐츠 간의 이동 과정을 피할 수 있습니다.