티스토리 뷰

웹 접근성

이해의 용이성(2)

wjsdud248 2019. 6. 23. 22:31

콘텐츠 선형화

콘텐츠 선형구조는 웹 문서를 제작할 때 뼈대가 되는 HTML 마크업 언어로 먼저 논리적인 순서에 맞게 개발을 하고 여기에 대한 레이아웃이나 장식 등의 표현을 위해 CSS를 적용하여 주게 되는데 CSS를 통해 꾸며진 상태의 순서가 아닌 CSS가 제거된 상태에서의콘텐츠 순서가 우리가 콘텐츠를 읽어나갈 때 이해가 될 수 있는 상식적인 순서로 제공되고 있는지에 대한 개념입니다.

  • 검사항목 19 콘텐츠 선형구조는 화면낭독기의 가상 커서 방식으로 콘텐츠를 읽는 순서를 결정합니다.
  • 이 검사항목은 검사항목 9번과 연관이 있으며, 가장 중요한 것은 검사항목 9번의 초점이동이 논리적인 순서로 이동해야 이와 같이 CSS를 제거한 콘텐츠의 순서도 동일한 순서로 초점이동이 되어야 합니다.
  • 콘텐츠의 순서가 논리적으로 선형화되어 제공한 경우 준수한 것으로 인정합니다.
  • 오류유형 분석으로는 첫째, 계층 구조가 명백하게 필요한 콘텐츠를 중첩 마크업을 이용하여 표현하지 않은 경우가 있습니다.
  • 제목과 내용으로 구성된 콘텐츠 목록의 배치가 분리되어 내용을 직관적으로 이해할 수 없는 경우입니다.
  • 내용에 해당하는 부분을 ul,div,p와 정의형 목록에서의 dd로 구성한 경우 계층 구조로 인정됩니다.
  • 로그인, 회원가입 등의 방법 안내는 로그인, 회원가입 이전에 정보를 제공해야 합니다.
  • 서브메뉴에서 내용 순으로 선형화 된 페이지의 서브메뉴가 우측에 위치하는 경우 등 혼란이 없는 경우는 인정합니다.

표의 구성

표는 데이터 간의 상관관계를 요약하여 제공하는 정보로써 행과 열이 얽힌 표에 담긴 정보를 음성으로 듣고 이해할 수 있도록 제목셀과 내용셀로 구분하여 서로 짝지어 읽을 수 있도록 합니다.

  • 검사항목 20의 표의 구성은 복잡한 표를 풀어서 읽을 수 있도록 구현함으로써 화면낭독기에서 이용할 수 있는 제목셀과 내용셀을 짝지어 읽게 하고,표에 대한 설명 정보를 미리 확인할 수 있어 표에 대한 이해를 쉽게 만듭니다.
  • 표는 크게 두 가지로 나뉩니다. 먼저 데이터 테이블은 본래 데이터의 상관관계를 나타내며, 표의 형식을 제거하고 남아있는 데이터를 나열했을 때 이해를 할 수 없습니다.
  • 표의 구성의 제공 시 기준은 표를 이해할 수 있도록 정보를 제공한 경우 준수한 것으로 인정합니다.
  • 표의 구성의 오류유형은 3가지가 있습니다. 첫째, caption요소, summary속성을 제공하지 않거나 용도 또는 설명이 부적절한 경우입니다.
  • 데이터 테이블에 제목 셀과 내용 셀을 th와 td요소로 구분하지 않은 경우입니다.
  • 제목 셀 및 내용 셀의 다단, 병합 등 복잡한 표를 제공 시 headers 속성으로 td에서 th의 id를 참조 또는 scope속성으로 th요소에 td요소의 범위를 지정하여 제공하지 않은 경우입니다.
  • 데이터테이블은 자료들 간의 논리적인 관계를 나타내기 위해 표를 사용한 경우를 말하며, 표의 형식을 제거하고 선형화 했을 때 이해할 수 없는 경우에 해당합니다.

레이블 제공

레이블이란 입력서식이나 편집창과 같은 폼의 요소에 대한 목적이나 용도를 의미하며, 우리가 흔히 라벨이라 부르는 꼬리표를 의미합니다.

  • 레이블 제공은 논란이 많았던 지표 중에 하나로 가장 좋은 레이블이란 label의 for와 폼 요소의id를 연결해주는 방법입니다.
  • 레이블 제공의 기준은 입력 서식에 대응하는 레이블을 제공한 경우 준수한 것으로 인정합니다.
  • 레이블 제공의 오류유형은 첫째, input type="image | hidden | submit | button | reset"을 제외한 모든 input, textarea, select요소에 1:1 대응하는 label요소 또는 title 속성을 제공하지 않은 경우입니다.
  • 레이블 제공의 오류유형은 둘째, input의 id와 label의 for가 다르거나, 페이지 안에 같은 id가 있는 경우입니다.
  • 레이블 제공의 오류유형은 셋째, select요소의 첫 번째 option이 레이블 역할을 대신하는 경우입니다.
  • option요소는 선택하고자 하는 데이터를 나열하는 의미로 사용되는 것이지 폼요소에 대한 설명을 대신할 수 없어서 화면낭독기 사용자에게는 해당 옵션에 대한 내용이 선택하는 것으로 오해할 소지가 있습니다.
  • 레이블 제공의 주의사항은 어떻게 될까요? 첫 번째, 레이블로 연결할 텍스트가 있는 경우 title 속성보다 label요소를 제공하는 것을 권장합니다.

오류 정정

오류 정정은 사용자가 온라인서식 입력 즉, 온라인 회원가입, 예약가입, 예금 이체 등 서식입력 후 나오는 오류들에 대하여 정정할 수 있도록 오류의 내용을 알려주고,오류의 위치에서 수정할 수 있도록 하는 것입니다.

  • 검사항목 22에 해당하는 오류 정정은 시스템의 문제를 파악하여 문제 발생을 줄이기 위해 사용하는 것입니다.
  • 오류 정정은 오류입력 항목에 정정할 수 있는 방법을 제공해야 하며, 오류 메세지를 알린 후 오류 항목에 초점이 자동으로 이동하는 것이 좋습니다.
  • 오류 정정의 오류유형은 첫째, 입력 서식을 잘못 작성한 경우 해당 서식 필드로 초점을 이동할 수있는 수단을 제공하지 않거나 해당 서식의 전송버튼을 눌렀을 때,
  • 둘째, 오류 발생 시, 정정할 수 있는 수단을 제공하지 않는 경우입니다. 개선 전에는 10Kbyte이상의 파일을 등록하고 검사 요청 시 아무런 오류메시지가 제공되지 않아 다음단계로 진행이 불가능했기 때문에 오류 메시지를 제공하여 사용자가 잘못 제공한 정보에 대해 알려줍니다.
  • 셋째, 입력 정정방식 또는 내용을 잘못 제공한 경우입니다.
  • 마지막으로 오류 정정의 주의사항으로는 오류가 있는 곳에만 오류 표시를 하면 전맹이나 저시력자는 오류가 난 곳에 도달하기 전까지는 어디에 오류가 있는지 알기 어렵습니다.

댓글
© 2018 webstoryboy