728x90
728x90
CSS로 대체 텍스트를 화면에서 숨기는 방법은 여러가지가 있다. 몇가지 방법들을 살펴보고 사용하지 말아야 할 속성들과 주의해야할 점들을 알아보도록 하겠다. 대체 텍스트는 그 의미가 잘 전달이 되도록 시멘틱하게 마크업 해야 하고, 화면에서 보이지 않도록 CSS로 숨긴다. 이때 중요한 것은 스크린 리더기가 읽을 수 있도록 처리해야 한다는 점이다. 요소를 화면에서 숨기는 방법 (1) 좋지 않은 수준스크린 리더가 인식하지 못하기 때문에, 다음 중 어느 속성이라도 사용하지 말아야 한다./* 투명도를 0으로 주는 것과 동일하게 화면에서 사라지지만, 스크린 리더 인식 안함 */visibility: hidden;/* 요소가 아예 없는 것으로 인식 */display: none;/* 요소의 사이즈를 0으로 만들면 스크..
스크린 리더는 스크린을 읽어주는 프로그램이다. PC와 모바일에서 사용하는 스크린리더가 모두 다르다. 각 기기에서 사용하는 스크린리더에 대해 살펴보도록 하겠다. 윈도우 (설치형)센스리더 베이직 6.5NVDA Version 2018.4 MAC (시스템 제공)VoiceOver Android (시스템 제공)TalkbackVoice Assistant IOS (시스템 제공)VoiceOver [ 출처 ]BoostCourse 웹 UI 개발 : https://www.boostcourse.org/web344/lecture/37467
Colour Contrast Analyser (CCA)전경 색과 배경색의 명도 대비를 체크해주는 프로그램현재까지 최신 버전 2.5.0명도 대비는 최소 3:1 이상이 되도록 구현 KWCAG a11y inspector컨트롤의 대각선 길이를 측정해주는 프로그램크롬 웹 스토어에서 설치 가능웹에서의 컨트롤 크기는 대각선 6mm 이상으로 구현 OpenWAX접근성을 자동으로 진단해주는 프로그램크롬 웹 스토어에서 설치 가능자동 진단이 정확하지는 않아 수동 진단 병행 필요 W3C Validation웹 표준을 검사하는 사이트접근성 오류, 특히 마크업 오류 확인 시 많이 사용 [ 출처 ]BoostCourse 웹 UI 개발 : https://www.boostcourse.org/web344/lecture/35129
마크업 언어의 요소는 열고 닫음, 중첩 관계 및 속성 선언에 오류가 없어야 한다. 오류가 없도록 마크업 문서를 구성하면 웹 브라우저나 보조 기술이 작동을 멈추지 않고 콘텐츠를 명확히 전달할 수 있으며, 콘텐츠의 일부 기능이 누락되는 것을 방지할 수 있다. 마크업 오류에 대한 사례들을 살펴보도록 하겠다. 요소의 열고 닫음 (오류 예시) 첫 번째 목록 두 번째 목록 세 번째 목록 첫 번째 목록 두 번째 목록 세 번째 목록요소의 열고 닫음이 일치해야 한다. 현재 예시에서는 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 속성으로 ..
링크 텍스트는 용도나 목적을 이해할 수 있도록 제공해야 한다. 링크의 용도나 목적지를 링크 텍스트만으로 또는 주변의 맥락으로부터 충분히 이해할 수 있도록 링크 텍스트를 제공해야 한다는 것이다. 적절한 링크 텍스트에 대한 사례들을 살펴보도록 하겠다. 빈 링크 링크 텍스트를 제공하지 않아 이렇게 빈 링크가 존재하는 경우, 스크린리더 사용자는 무슨 링크인지 알 수 없으며 링크가 크기를 갖지 않는 이상 키보드 사용자는 어디에 초점이 갔는지 알 수 없다. 따라서 다음과 같이 의미 없는 빈 링크는 제거해야 한다. 독립적 이미지 링크이미지를 독립적 링크로 제공하는 경우 링크 텍스트는 이미지의 대체 텍스트이기 때문에 이미지의 alt가 잘못 제공되었거나 빈 값으로 제공된 경우 오류라고 할 수 있다. 따라서 다음와 같..