728x90
728x90
마크업 언어의 요소는 열고 닫음, 중첩 관계 및 속성 선언에 오류가 없어야 한다. 오류가 없도록 마크업 문서를 구성하면 웹 브라우저나 보조 기술이 작동을 멈추지 않고 콘텐츠를 명확히 전달할 수 있으며, 콘텐츠의 일부 기능이 누락되는 것을 방지할 수 있다. 마크업 오류에 대한 사례들을 살펴보도록 하겠다. 요소의 열고 닫음 (오류 예시) 첫 번째 목록 두 번째 목록 세 번째 목록 첫 번째 목록 두 번째 목록 세 번째 목록요소의 열고 닫음이 일치해야 한다. 현재 예시에서는 ol 태그가 열려만 있고 닫혀 있지는 않아 오류이다. 마크업 언어로 작성된 콘텐츠는 표준에서 특별히 정한 경우를 제외하고는 시작 요소와 끝나는 요소가 정의되어야 한다. img 요소와 같이 단일 태그가 아닌..
입력 서식 작성 시, 사용자의 실수로 오류가 발생할 경우 이를 정정할 수 있는 방법을 제공해야 한다. 오류 정정에 대한 사례들을 살펴보도록 하겠다. 입력 오류 시 입력 내용이 모두 사라지는 경우입력 서식 작성 시 오류가 발생하여 입력 내용이 모두 사라지는 경우 오류이다.작성된 내용이 삭제되지 않고 오류가 있는 부분만 수정할 수 있도록 제공해야 한다. 오류 내용 제공오류가 발생하는 경우 사용자에게 오류가 발생한 원인을 알려 주어야 한다. 오류 발생 시점으로 초점 이동오류가 발생한 입력 서식으로 초점이 이동해야 한다. [ 출처 ]BoostCourse 웹 UI 개발 : https://www.boostcourse.org/web344/lecture/35127
사용자 입력에는 이와 대응하는 레이블을 제공해야 한다. 레이블이란 모든 사용자 입력의 용도 또는 역할에 대한 설명을 말한다. 옷에도 라벨이 있듯이 입력 서식에도 라벨, 즉, 레이블을 제공해야 한다. 레이블 제공에 대한 사례들을 살펴보도록 하겠다. 레이블이 시각적으로 노출되어 있는 경우청각으로 웹을 인식하는 사용자는 입력 서식에 초점이 갔을 때 스크린리더가 "편집창"이라고만 읽어준다. 아이디 입력창도 "편집창", 비밀번호 입력 창도 "편집창"이라고 읽어주기 때문에 무엇을 입력해야 하는지 알 수 없다. 따라서 이에 대한 설명을 제공해야 한다. (1) 레이블과 입력 서식이 1:1 매칭인 경우 레이블을 제공하고 label for 값과 input의 id 값을 동일하게 제공아이디비밀번호이렇게 제공하게 되면 입..
데이터 표비장애인들은 표를 보면 인식할 수 있지만 볼 수 없는 사용자들은 내용을 들으면서 인식한다. 스크린리더가 마크업에 따라 표를 읽어주기 때문에 데이터를 표로 구성할 경우 표의 내용, 구조 등을 이해할 수 있게 제목 셀과 데이터 셀이 구분되도록 구성해야 한다. 표의 구성은 제목 셀과 내용 셀 구분, 제목과 요약 정보 제공 이렇게 되어야 한다. 제목 셀은 th로 내용 셀은 td로 마크업하면 된다. 또한 제목 셀이 가로, 세로로 있는 경우 scope로 행 제목인지 열 제목인지 구분 가능하도록 제공해야 한다. XHTML, HTML4caption으로 제목을 제공, table의 summary 속성으로 요약 정보를 제공 직원 관리 현황 표 번호 부서 직원 수 합계 15명..
콘텐츠는 논리적인 순서로 제공해야 한다. 즉, 웹 페이지를 구성하는 모든 콘텐츠는 사용자가 그 내용을 이해할 수 있도록 선형 구조로 작성되어야 한다. 콘텐츠의 선형 구조에 대한 사례들을 살펴보도록 하겠다. 탭 제목 - 내용 콘텐츠탭 메뉴가 나열되어 있고 탭에 대한 내용이 있는 경우 시각적으로는 클릭하면 해당 내용이 보이기 때문에 쉽게 인식할 수 있다. 스크린리더 사용자는 메뉴와 내용을 따로 마크업하는 경우 메뉴를 다 읽어주고 나서야 내용을 읽어주기 때문에 어떤 메뉴에 대한 내용인지 인식할 수 없다. 따라서 메뉴 내용 메뉴 내용 순으로 마크업하거나 메뉴끼리 내용끼리 마크업하되 내용에 해당 메뉴 제목을 제공해 주어야 한다. (1) 탭 1제목 > 탭 1내용 > 탭 2제목 > 탭 2내용상품상품 내용쇼핑몰쇼..
웹 브라우저는 웹 페이지를 구성하는 텍스트 콘텐츠의 언어 정보를 바탕으로 텍스트 콘텐츠를 화면에 표시하거나 보조 기술로 전달한다. 언어를 명시하면 자동 언어 전환을 지원하는 스크린 리더의 경우 선언된 언어로 전환하여 읽어준다. 따라서 웹 페이지에 주로 사용하는 언어를 명시해야 한다. 기본 언어를 어떻게 제공하는지 살펴보도록 하겠다. 기본 언어 표시 기본 언어 표시는 HTML 태그에 lang 속성을 사용하여 "ISO639-1"에서 지정한 두 글자로 된 언어 코드로 제공해주시면 된다. 한국어는 언어 코드가 "ko"이므로 한국어 페이지는 기본 언어를 한국어로, 영어 페이지는 기본 언어를 영어로 설정해주시면 된다. 기본 언어 설정을 해둔 상태에서 중간에 다른 언어가 존재한다면 해당 영역에만 lang 속성으로 ..