본문 바로가기
반응형

분류 전체보기256

웹 접근성_표의 구성 데이터 표 비장애인들은 표를 보면 인식할 수 있지만 볼 수 없는 사용자들은 내용을 들으면서 인식합니다. 스크린리더가 마크업에 따라 표를 읽어주기 때문에 데이터를 표로 구성할 경우 표의 내용, 구조 등을 이해할 수 있게 제목 셀과 데이터 셀이 구분되도록 구성해야 합니다. 표의 구성 제목 셀과 내용 셀 구분 제목과 요약 정보 제공 제목 셀은 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.
웹 접근성_제목 제공 페이지, 프레임, 콘텐츠 블록에는 적절한 제목을 제공해야 합니다. 페이지 제목 제공 웹 페이지의 제목은 유일하고 서로 다르게 제공해야 합니다. 그렇게 제공하면 여러 페이지가 열려 있는 경우 비장애인들도 제목만 보고 구분하여 빨리 선택할 수 있습니다. 스크린리더 사용자도 제목이 전부 똑같이 제공되어 있거나 내용과 다르게 제공되어 있으면 인식하기 힘들기 때문에 페이지 제목을 적절하게 제공해야 합니다. 페이지 제목은 해당 내용을 이해할 수 있도록 제일 하위분류로 적절하게 제공해야 합니다. 뉴스 상세 페이지 제목도 마찬가지로 해당 뉴스에 대한 타이틀을 제목으로 제공해야 하며 게시판의 경우에도 글 읽기, 글 보기, 목록 등 각각의 게시판 용도에 맞게 페이지 제목을 제공해야 합니다. 각 페이지의 핵심 내용을 제목으.. 2020. 4. 1.
웹 접근성_반복 영역 건너뛰기 웹 페이지에 공통적으로 들어있는 부분을 반복 영역이라고 하는데요, 스크린리더 사용자는 페이지가 로드 되거나 갱신될 때마다 반복 영역을 다시 듣게 됩니다. 키보드 사용자도 탭을 여러 번 반복해서 접근해야 하는 불편을 방지하기 위해 반복되는 영역을 건너뛸 수 있는 기능을 제공해야 합니다. 반복 영역 건너뛰기 제공 방법 마크업상 최 상단에 위치 건너뛰기 링크가 페이지 내에 존재 키보드 접근 시 화면에 노출 "하단 메뉴로 바로 가기"와 같은 위치 정보 제공은 부적절 정리하자면 반복 영역 건너뛰기는 마크업상 최 상단에 위치해야 하고 건너뛰기 링크가 페이지 내에 존재해야 합니다. 즉, 본문 바로 가기를 선택하면 이 content를 id로 가진 영역이 페이지 내에 있어야 한다는 것입니다. 키보드 접근이 가능하고 접근.. 2020. 4. 1.
웹 접근성_깜빡임과 번쩍임 사용 제한 1997년에 일본에서 포켓몬스터 전뇌 전사 폴리곤 편이 방영되었을 때 이 영상으로 인해 750명 정도의 어린아이들이 구토, 어지럼증 증세를 호소하였으며, 심한 경우에는 경련을 일으키거나, 의식 상실, 호흡 장애 등을 겪었습니다. 원인은 밝은 빛의 화면 점멸이 연속적으로 나오는 장면을 보고 일어난 '광과민성 발작'으로 밝혀졌습니다. 광과민성 발작이란 오랜 시간 불규칙적으로 깜빡거리는 광과에 자극받아 생기는 간질 발작입니다. 이런 이유 때문에 게임이나 애니메이션에서는 시작 전에 방을 밝게 하고 일정거리 이상 떨어져서 즐기라는 문구가 생겨나기도 했습니다. 해결 방안 번쩍이는 콘텐츠가 차지하는 면적의 합이 화면 전체 면적의 10% 미만 시간을 3초 미만으로 제한 사전에 경고하고 중단 가능한 수단을 제공 깜빡거리.. 2020. 4. 1.
웹 접근성_정지기능 제공 자동으로 변경되는 콘텐츠는 움직임을 제어할 수 있어야 합니다. 웹 콘텐츠는 스크롤 및 자동 갱신되는 콘텐츠를 장애인 사용자가 이용할 수 있도록 일시 정지할 수 있는 수단을 제공해야 합니다. 자동 변경 슬라이드 이전, 다음, 정지 기능을 제공해야 하며 정지 버튼이 없더라도 마우스 오버 시와 키보드 접근 시에 정지되도록 구현하면 정지 기능을 제공한 것으로 인정됩니다. 자동 변경 콘텐츠 실시간 검색어처럼 자동 변경되는 콘텐츠에 이전, 다음, 정지 기능이 제공되지는 않더라도 마우스 오버 시와 키보드 접근 시 모든 콘텐츠가 보이고 탐색 가능하면 준수입니다. 비장애인들도 이전 콘텐츠를 보고 싶었는데 넘어가 버린 경우 이를 제어할 수 없으면 해당 콘텐츠가 나올 때까지 기다려야 하므로 이전, 다음, 정지 기능을 제공하.. 2020. 4. 1.
웹 접근성_응답시간조절 시간제한이 있더라도 온라인 경매, 실시간 게임 등과 같이 반응 시간의 조절이 원천적으로 허용되지 않는 경우에는 이 검사 항목이 적용되지 않습니다. 다만, 이 경우에도 사용자에게 시간제한이 있다는 것을 미리 알려주고, 종료되었을 경우에도 알려주어야 합니다. 세션 시간이 20시간 이상인 콘텐츠는 예외로 간주합니다. 시간 연장이 불가능한 콘텐츠 충분한 시간 제공 종료 안내 조절 수단 제공 웹 콘텐츠 제작 시 시간제한이 있는 콘텐츠는 가급적 포함하지 않는 것이 바람직하며, 보안 등의 사유로 시간제한이 반드시 필요할 경우에는 이를 회피할 수 있는 수단을 제공해야 합니다. 특히 은행 사이트에서 보안을 위해 로그인 시간에 제한이 있는 경우를 많이 볼 수 있는데요, 아무런 공지 없이 자동으로 로그아웃 되는 경우도 오류.. 2020. 4. 1.
반응형

티스토리툴바