반응형 Spec UP - Frontend/부스트코스_UI 개발83 웹 접근성_스크린리더 스크린 리더 다음과 같이 기기에 따라 제공되는 스크린리더가 다르며, 스크린리더마다 읽어주는 방식에 차이가 있습니다. 윈도우 (설치형) 센스리더 베이직 6.5 NVDA Version 2018.4 MAC (시스템 제공) VoiceOver Android (시스템 제공) Talkback Voice Assistant iOS (시스템 제공) VoiceOver 2020. 4. 8. 웹 접근성_웹 애플리케이션 접근성 준수 / 웹 접근성 진단 도구 웹 애플리케이션 접근성 준수 콘텐츠에 포함된 웹 애플리케이션은 접근성이 있어야 합니다. 웹 애플리케이션이란 웹 콘텐츠에 포함되어 특정한 기능을 수행하도록 구성된 소프트웨어의 일종으로, 리치 인터넷 애플리케이션(RIA : Rich Internet Application)이라고도 합니다. 따라서 웹 애플리케이션에 대한 접근성 프로그래밍 인터페이스 사용을 지원한다거나 대체 수단을 제공하거나 보조 기술을 지원해야 합니다. 예를 들어, 접근성이 어려운 플래시의 경우 HTML 버전을 선택할 수 있는 대체 수단이나 대체 텍스트를 제공해야 합니다. 웹 접근성 진단 도구 Colour Contrast Analyser (CCA) 전경 색과 배경색의 명도 대비를 체크해주는 프로그램 현재까지 최신 버전 2.5.0 명도 대비는 최.. 2020. 4. 8. 웹 접근성_마크업 오류 방지 마크업 언어의 요소는 열고 닫음, 중첩 관계 및 속성 선언에 오류가 없어야 합니다. 오류가 없도록 마크업 문서를 구성하면 웹 브라우저나 보조 기술이 작동을 멈추지 않고 콘텐츠를 명확히 전달할 수 있으며, 콘텐츠의 일부 기능이 누락되는 것을 방지할 수 있습니다. 요소의 열고 닫음 요소의 열고 닫음이 일치해야합니다. 요소의 중첩 시작요소와 끝나는 요소의 나열 순서가 포함 관계에서 어긋나지 않아야합니다. ex. -> 마크업 오류 중복된 속성 사용 하나의 요소 안에서 속성을 중복하여 선언하지 않아야합니다. ex. id 속성 값 중복 하나의 마크업 문서 안에 같은 id 값을 중복으로 선언하면 오류입니다. 2020. 4. 8. 웹 접근성_오류 정정 입력 서식 작성 시, 사용자의 실수로 오류가 발생할 경우 이를 정정할 수 있는 방법을 제공해야 합니다. 입력 오류 시 입력 내용이 모두 사라지는 경우 입력 서식 작성 시 오류가 발생하여 입력 내용이 모두 사라지는 경우 오류이며, 작성된 내용이 삭제되지 않고 오류가 있는 부분만 수정할 수 있도록 제공해야 합니다. 오류 내용 제공 오류가 발생하는 경우 사용자에게 오류가 발생한 원인을 알려 주어야 합니다. 오류 발생 시점으로 초점 이동 오류가 발생한 입력 서식으로 초점이 이동해야 합니다 2020. 4. 1. 웹 접근성_레이블 제공 사용자 입력에는 이와 대응하는 레이블을 제공해야 합니다. 레이블이란 모든 사용자 입력의 용도 또는 역할에 대한 설명을 말합니다. 옷에도 라벨이 있듯이 입력 서식에도 라벨, 즉, 레이블을 제공해야 합니다. 레이블이 시각적으로 노출되어 있는 경우 청각으로 웹을 인식하는 사용자는 입력 서식에 초점이 갔을 때 스크린리더가 "편집창"이라고만 읽어줍니다. 아이디 입력창도 "편집창", 비밀번호 입력 창도 "편집창"이라고 읽어주기 때문에 무엇을 입력해야 하는지 알 수 없습니다. 따라서 이에 대한 설명을 제공해야 합니다. 1) 레이블과 입력 서식이 1:1 매칭인 경우 : 레이블을 제공하고 label for 값과 input의 id 값을 동일하게 제공 2) 레이블과 선택 서식이 1:1 매칭인 경우 3) 레이블과 라디오 버튼.. 2020. 4. 1. 웹 접근성_표의 구성 데이터 표 비장애인들은 표를 보면 인식할 수 있지만 볼 수 없는 사용자들은 내용을 들으면서 인식합니다. 스크린리더가 마크업에 따라 표를 읽어주기 때문에 데이터를 표로 구성할 경우 표의 내용, 구조 등을 이해할 수 있게 제목 셀과 데이터 셀이 구분되도록 구성해야 합니다. 표의 구성 제목 셀과 내용 셀 구분 제목과 요약 정보 제공 제목 셀은 th로 내용 셀은 td로 마크업하면 됩니다. 또한 제목 셀이 가로, 세로로 있는 경우 scope로 행 제목인지 열 제목인지 구분 가능하도록 제공해야 합니다. XHTML, HTML4 caption으로 제목을 제공, table의 summary 속성으로 요약 정보를 제공 HTML5 HTML5부터는 summary 속성이 없어졌으므로 caption에 제목과 요약 정보를 모두 제공.. 2020. 4. 1. 웹 접근성_콘텐츠의 선형 구조 콘텐츠는 논리적인 순서로 제공해야 합니다. 즉, 웹 페이지를 구성하는 모든 콘텐츠는 사용자가 그 내용을 이해할 수 있도록 선형 구조로 작성되어야 합니다. 탭 제목-내용 콘텐츠 탭 메뉴가 나열되어 있고 탭에 대한 내용이 있는 경우 시각적으로는 클릭하면 해당 내용이 보이기 때문에 쉽게 인식할 수 있습니다. 스크린리더 사용자는 메뉴와 내용을 따로 마크업하는 경우 메뉴를 다 읽어주고 나서야 내용을 읽어주기 때문에 어떤 메뉴에 대한 내용인지 인식할 수 없습니다. 따라서 메뉴 내용 메뉴 내용 순으로 마크업하거나 메뉴끼리 내용끼리 마크업하되 내용에 해당 메뉴 제목을 제공해 주어야 합니다. 1) 탭 1제목 > 탭 1내용 > 탭 2제목 > 탭 2내용 2) 해당 탭 콘텐츠에 제목 제공 제목-내용-더 보기 콘텐츠 제목, 내.. 2020. 4. 1. 웹 접근성_사용자 요구에 따른 실행 사용자가 의도하지 않은 기능(새 창, 초점에 의한 맥락 변화 등)은 실행되지 않아야 합니다. 즉, 사용자가 원하지 않았는데, 의도하지 않았는데 새 창이 뜬다거나, 페이지가 새로 고침 된다거나 하는 등의 기능이 실행되지 않아야 합니다. 페이지 진입 시 뜨는 새 창(팝업) 사용자가 예측할 수 없는 상황에서 페이지 진입 시 새 창이 열리는 경우 오류이므로 새 창을 제공하지 않아야 합니다. 화면을 가리는 레이어 팝업 요즘에는 새 창 팝업이 많이 없어지고 레이어 팝업으로 변경이 되고 있는데요, 화면을 가리는 레이어 팝업을 제공한 경우도 오류입니다. 이를 준수하기 위해서는 반복 영역 건너뛰기보다 먼저 팝업을 제어할 수 있도록 구현하거나 화면을 가리지 않고 가장 상단에 레이어 팝업을 제공해야 합니다. 사전에 인식할 .. 2020. 4. 1. 웹 접근성_기본 언어 표시 기본 언어 표시 기본 언어 표시는 HTML 태그에 lang 속성을 사용하여 "ISO639-1"에서 지정한 두 글자로 된 언어 코드로 제공해주시면 됩니다. 한국어는 언어 코드가 "ko"이므로 한국어 페이지는 기본 언어를 한국어로, 영어 페이지는 기본 언어를 영어로 설정해주시면 됩니다. 기본 언어 설정을 해둔 상태에서 중간에 다른 언어가 존재한다면 해당 영역에만 lang 속성으로 적절한 언어를 제공해주시면 됩니다. 문서 타입별 기본 언어 표시 HTML 4.01/HTML5 표준 ex : XHTML 1.0 표준 ex : XHTML 1.1 표준 ex : 2020. 4. 1. 웹 접근성_적절한 링크 텍스트 링크 텍스트는 용도나 목적을 이해할 수 있도록 제공해야 합니다. 링크의 용도나 목적지를 링크 텍스트만으로 또는 주변의 맥락으로부터 충분히 이해할 수 있도록 링크 텍스트를 제공해야 한다는 것입니다. 빈 링크 링크 텍스트를 제공하지 않아 이렇게 빈 링크가 존재하는 경우 스크린리더 사용자는 무슨 링크인지 알 수 없으며 링크가 크기를 갖지 않는 이상 키보드 사용자는 어디에 초점이 갔는지 알 수 없습니다. 따라서 의미 없는 빈 링크는 제거해야 합니다. 독립적 이미지 링크 이미지를 독립적 링크로 제공하는 경우 링크 텍스트는 이미지의 대체 텍스트이기 때문에 이미지의 alt가 잘못 제공되었거나 빈 값으로 제공된 경우 오류입니다. 따라서 적절한 링크 텍스트를 제공해야 합니다. 독립적 배경 이미지 링크 링크에 의미 있는 .. 2020. 4. 1. 이전 1 2 3 4 ··· 9 다음 반응형
