Interview 5장 - 웹 접근성

CS

웹 접근성

• 웹 접근성은 일반적으로 장애인,고령자 등이 웹 사이트에서 제공하는 정보에 비장애인과 동등하게 접근하고 이해할 수 있도록 보장하는 것을 말한다.
• 웹 접근성의 예로, 시력이 안 좋은 경우 화면의 텍스트를 음성으로 읽어주는 스크린 리더를 사용하는 경우가 많은데, 이미지에 들어가 있는 글자의 경우는 스크린 리더가 인식할 수 없어 음성으로 읽을 수 없다.
  • 이미지 속 글자를 인식하여 텍스트로 반환, 스크린 리더가 읽을 수 있게 만드는 기능을 제공하는 사이트도 있지만, 이미지속 글자를 인식하고 변환하는 과정에서 시간이 소요되고 텍스트로 작성되어 있는 경우와 비교했을 때 정보에 접근하는 시간이 오래 걸린다.
  • 해외 사이트와 비교 시, 상품의 기본 정보가 모두 텍스트로 작성되어 있으며, 모든 이미지에 이미지를 설명하는 텍스트가 함께 작성되어 있다.

웹 접근성을 갖출 시 기대 효과

• 사용자층 확대
  • 장애인, 고령자 등 소외 계층의 참여자유도가 높아져 새로운 고객층 확보가 가능하다.
• 다양한 환경 지원
  • 다양한 환경, 다양한 기기에서의 웹 사이트를 자유롭게 사용할 수 있게 되므로 서비스의 사용 범위가 확대된다.
• 사회적 이미지 향상
  • 사회 공헌 및 복지 향상에 깊이 참여하게 되고, 충성 고객 확보 등에 대한 가능성이 늘어난다.

웹 콘텐츠 접근성 지침

• 인식의 용이성(Perceivable) : 모든 콘텐츠는 사용자가 인식할 수 있어야 한다.
  1. 대체 텍스트 사용하기
     1. 이미지가 로딩되지 않았거나 시각 장애인을 위한 대체 텍스트로, alt 속성을 사용한다.
     2. 배경 이미지와 같이 정보를 인식할 필요가 없는 경우에는 alt 값으로 빈 문자열을 준다.
     3. 인접 요소의 내용에서 정보를 충분히 인지할 수 있는 경우에도 alt값으로 빈 문자열을 주는 것이 좋다.
  2. 저먹 서용하기
     1. 멀티미디어 콘텐츠는 track요소를 사용하여 비디오에 자막을 불러오거나 수화 등을 제공해야 한다.
  3. 색에 무관한 콘텐츠 인식
     1. 색약, 색맹 등의 색을 인지하는데 어려움이 있는 사용자를 위해 콘텐츠의 테두리를 설정하거나, 레이블을 달아 내용을 명확하게 파악할 수 있도록 한다.
  4. 명확한 지시사항 제공
     1. 모양,크기,위치,방향,색,소리 등에 관계없이 인식할 수 있어야 한다.
     2. 지시사항의 버튼이 어디를 가리키는지를 대체 텍스트를 작성하거나, 소리를 통해 지시하는 경우 시각적 피드백도 함께 제공해야 한다.
  5. 텍스트 콘텐츠 명도 대비
     1. 명도 대비가 충분히 확보되지 않는 경우 텍스트를 읽기 어려우며, 콘텐츠와 명도 대비는 3~4.5대 1로 작성해야 한다.
  6. 자동재생 금지
     1. 동영상, 오디오, 음성 등 모든 종류의 소리를 말하며 자동으로 재생되지 않아야 한다.
     2. 또한 정지 버튼, 가장 먼저 노출시켜 정지할 수 있게 구현하는 등의 추가 기능이 필요하다.
  7. 콘텐츠 간 구분
     1. 테두리, 구분선, 무늬, 명도, 대비 등 시각적으로 구분할 수 있는 방법을 사용해야 한다.

운용의 용이성

1. 키보드 사용 보장
   1. 모든 기능은 키보드만으로도 사용할 수 있어야 하며 키보드로도 웹 페이지에서 제공하는 기능을 사용하도록 제공한다.
2. 초점 이동
   1. 키보드에 의한 초점은 논리적으로 이동해야 하며 시각적으로 구별할 수 있어야 한다.
3. 조작 가능
   1. 사용자 입력 및 컨트롤은 조작 가능하도록 제공되어야 한다.
   2. 너무 작은 버튼의 경우 제대로 선택하기 힘들기 때문에 대각선 길이 6mm이상은 되어야 한다.
   3. 컨트롤 간 1픽셀 이상의 여백을 주어 구분한다.
4. 응답 시간 조절
   1. 가능하면 시간 제한이 있는 콘텐츠를 제외하고, 꼭 넣어야 하는 상황에서는 충분한 시간과 종료 안내 및 조절 수단을 제공해야 한다.
   2. 페이지를 자동 전환하는 경우에도 시간을 연장하거나 정지할 수 있는 수단을 제공해야 한다.
5. 정지 기능 제공
   1. 자동으로 변경되는 콘텐츠는 움직임을 제어할 수 있다.
   2. 자동 변경 슬라이드에서는 정지 버튼이 없더라도 키보드나 마우스 접근 시 정지되도록 구현해야 한다.
   3. 자동 변경 콘텐츠는 실시간 검색어와 같이 자동으로 변경되는 콘텐츠에 접근했을 때 모든 콘텐츠를 확인할 수 있도록 구현해야 한다.
6. 깜빡임과 번쩍임 사용 제한
   1. 초당 3~50회 주기로 깜빡이거나 번쩍이는 콘텐츠를 제공하지 않아야 한다.
7. 반복 영역 건너뛰기
   1. 콘텐츠의 반복되는 영역은 건너뛸 수 있어야 한다.
8. 제목 제공
   1. 페이지, 프레임, 콘텐츠 블록에는 적절한 제목을 제공해야 한다.
9. 적절한 링크 텍스트
   1. 용도나 목적을 이해할 수 있어야 하며 이미지에 링크가 걸려있는 경우 링크를 설명해주는 대체 텍스트가 필요하다.

이해의 용이성

1. 주로 사용하는 언어를 명시해야 한다.
2. 사용자 요구에 따른 실행
   1. 사용자가 의도하지 않은 기능은 실행되지 않아야 한다.
3. 콘텐츠 선형 구조
   1. 콘텐츠는 논리적인 순서로 제공해야 한다.
4. 표의 구성
   1. 표는 이해하기 쉽게 구성해야 한다.
   2. caption을 이용한 표에 제목을 제공
   3. 표의 제목 셀은 th, 데이터 셀은 td
   4. 구조가 복잡할 경우 id, headers 작성
5. 레이블 제공
   1. 사용자 입력에는 대응하는 레이블을 제공해야 한다.
   2. input요소에 id를 설정하고 label,for 속성을 연결해준다.
   3. title 속성을 사용한다.
6. 오류 정정
   1. 입력 오류를 정정할 수 있는 방법을 제공해야 한다.
   2. 오류 발생 원인을 찾을 수 있어야 하고 발생한 위치로 이동이 가능해야 한다.

견고성

1. 마크업 오류 방지
   1. 요소의 열고 닫음에 오류가 없어야 하며, 요소의 속성과 id를 중복해서 사용해선 안 된다.
2. 웹 애플리케이션 접근성 준수