본문 바로가기
반응형

Spec UP - Frontend/부스트코스_UI 개발83

웹 접근성_제목 제공 페이지, 프레임, 콘텐츠 블록에는 적절한 제목을 제공해야 합니다. 페이지 제목 제공 웹 페이지의 제목은 유일하고 서로 다르게 제공해야 합니다. 그렇게 제공하면 여러 페이지가 열려 있는 경우 비장애인들도 제목만 보고 구분하여 빨리 선택할 수 있습니다. 스크린리더 사용자도 제목이 전부 똑같이 제공되어 있거나 내용과 다르게 제공되어 있으면 인식하기 힘들기 때문에 페이지 제목을 적절하게 제공해야 합니다. 페이지 제목은 해당 내용을 이해할 수 있도록 제일 하위분류로 적절하게 제공해야 합니다. 뉴스 상세 페이지 제목도 마찬가지로 해당 뉴스에 대한 타이틀을 제목으로 제공해야 하며 게시판의 경우에도 글 읽기, 글 보기, 목록 등 각각의 게시판 용도에 맞게 페이지 제목을 제공해야 합니다. 각 페이지의 핵심 내용을 제목으.. 2020. 4. 1.
웹 접근성_반복 영역 건너뛰기 웹 페이지에 공통적으로 들어있는 부분을 반복 영역이라고 하는데요, 스크린리더 사용자는 페이지가 로드 되거나 갱신될 때마다 반복 영역을 다시 듣게 됩니다. 키보드 사용자도 탭을 여러 번 반복해서 접근해야 하는 불편을 방지하기 위해 반복되는 영역을 건너뛸 수 있는 기능을 제공해야 합니다. 반복 영역 건너뛰기 제공 방법 마크업상 최 상단에 위치 건너뛰기 링크가 페이지 내에 존재 키보드 접근 시 화면에 노출 "하단 메뉴로 바로 가기"와 같은 위치 정보 제공은 부적절 정리하자면 반복 영역 건너뛰기는 마크업상 최 상단에 위치해야 하고 건너뛰기 링크가 페이지 내에 존재해야 합니다. 즉, 본문 바로 가기를 선택하면 이 content를 id로 가진 영역이 페이지 내에 있어야 한다는 것입니다. 키보드 접근이 가능하고 접근.. 2020. 4. 1.
웹 접근성_깜빡임과 번쩍임 사용 제한 1997년에 일본에서 포켓몬스터 전뇌 전사 폴리곤 편이 방영되었을 때 이 영상으로 인해 750명 정도의 어린아이들이 구토, 어지럼증 증세를 호소하였으며, 심한 경우에는 경련을 일으키거나, 의식 상실, 호흡 장애 등을 겪었습니다. 원인은 밝은 빛의 화면 점멸이 연속적으로 나오는 장면을 보고 일어난 '광과민성 발작'으로 밝혀졌습니다. 광과민성 발작이란 오랜 시간 불규칙적으로 깜빡거리는 광과에 자극받아 생기는 간질 발작입니다. 이런 이유 때문에 게임이나 애니메이션에서는 시작 전에 방을 밝게 하고 일정거리 이상 떨어져서 즐기라는 문구가 생겨나기도 했습니다. 해결 방안 번쩍이는 콘텐츠가 차지하는 면적의 합이 화면 전체 면적의 10% 미만 시간을 3초 미만으로 제한 사전에 경고하고 중단 가능한 수단을 제공 깜빡거리.. 2020. 4. 1.
웹 접근성_정지기능 제공 자동으로 변경되는 콘텐츠는 움직임을 제어할 수 있어야 합니다. 웹 콘텐츠는 스크롤 및 자동 갱신되는 콘텐츠를 장애인 사용자가 이용할 수 있도록 일시 정지할 수 있는 수단을 제공해야 합니다. 자동 변경 슬라이드 이전, 다음, 정지 기능을 제공해야 하며 정지 버튼이 없더라도 마우스 오버 시와 키보드 접근 시에 정지되도록 구현하면 정지 기능을 제공한 것으로 인정됩니다. 자동 변경 콘텐츠 실시간 검색어처럼 자동 변경되는 콘텐츠에 이전, 다음, 정지 기능이 제공되지는 않더라도 마우스 오버 시와 키보드 접근 시 모든 콘텐츠가 보이고 탐색 가능하면 준수입니다. 비장애인들도 이전 콘텐츠를 보고 싶었는데 넘어가 버린 경우 이를 제어할 수 없으면 해당 콘텐츠가 나올 때까지 기다려야 하므로 이전, 다음, 정지 기능을 제공하.. 2020. 4. 1.
웹 접근성_응답시간조절 시간제한이 있더라도 온라인 경매, 실시간 게임 등과 같이 반응 시간의 조절이 원천적으로 허용되지 않는 경우에는 이 검사 항목이 적용되지 않습니다. 다만, 이 경우에도 사용자에게 시간제한이 있다는 것을 미리 알려주고, 종료되었을 경우에도 알려주어야 합니다. 세션 시간이 20시간 이상인 콘텐츠는 예외로 간주합니다. 시간 연장이 불가능한 콘텐츠 충분한 시간 제공 종료 안내 조절 수단 제공 웹 콘텐츠 제작 시 시간제한이 있는 콘텐츠는 가급적 포함하지 않는 것이 바람직하며, 보안 등의 사유로 시간제한이 반드시 필요할 경우에는 이를 회피할 수 있는 수단을 제공해야 합니다. 특히 은행 사이트에서 보안을 위해 로그인 시간에 제한이 있는 경우를 많이 볼 수 있는데요, 아무런 공지 없이 자동으로 로그아웃 되는 경우도 오류.. 2020. 4. 1.
웹 접근성_조작 가능 컨트롤 대각선 길이 6mm 이상 컨트롤이 너무 작아서 클릭하기 불편하셨던 적 없으신가요? 비장애인들도 컨트롤이 작으면 조작이 힘든데요, 정교한 마우스 조작을 할 수 없는 분들은 더 힘듭니다. 따라서 웹에서 컨트롤의 대각선 길이는 6mm 이상으로 구현되어야 합니다. 컨트롤 테두리 안쪽으로 1픽셀 이상의 여백 컨트롤이 연달아 있을 때 1픽셀 이상의 여백이 있지 않으면 컨트롤 구분도 힘들고 잘못 선택할 확률도 높습니다. 따라서 컨트롤은 테두리 안쪽으로 1픽셀 이상의 여백을 두어야 합니다. 2020. 4. 1.
웹 접근성_초점 이동 키보드에 의한 초점은 논리적으로 이동해야 하며, 시각적으로 구별할 수 있어야 합니다. 논리적 초점 이동 초점은 일반적으로 좌에서 우, 상에서 하로 이동할 것이라고 예측합니다. 스크린리더 사용자와 키보드 사용자 모두 초점이 논리적으로 이동해야 웹 페이지를 탐색하는데 어려움이 없기 때문입니다. 따라서 초점 이동은 논리적 구조로 마크업하여 사용자가 예측하는 이동 순서와 일치해야 합니다. 예를 들어, 초점 이동이 1)아이디 입력, 2)비밀번호 입력, 3)로그인 버튼, 4)아이디 저장 순서이면 로그인 버튼을 먼저 클릭하기 때문에 아이디 저장을 못할 가능성이 있습니다. 따라서 1)아이디, 2)비밀번호 입력 후 3)아이디 저장에 먼저 초점이 이동했다가 4)로그인 버튼으로 논리적으로 초점이 이동해야 합니다. tabin.. 2020. 3. 31.
웹 접근성_키보드 사용 보장 비장애인들은 마우스를 사용하여 쉽게 웹 페이지를 탐색하지만 마우스를 사용하지 못하는 키보드 사용자는 키보드로 웹 페이지를 탐색합니다. 따라서 웹 페이지에서 제공하는 모든 기능을 키보드만으로도 사용할 수 있도록 제공해야 합니다. 키보드 사용 보장에 대한 사례들을 살펴보도록 하겠습니다. 사례에 따른 해결 방안 마우스 오버 시 드롭 다운 메뉴가 노출 - 키보드 접근 시에도 드롭 다운 메뉴가 노출되고 메뉴에 접근 가능하도록 구현 자동 롤링 콘텐츠에 마우스 오버 시 전체 콘텐츠가 노출 - 키보드 접근 시에도 전체 콘텐츠가 노출되도록 구현 특정 버튼에 마우스 오버 시 레이어 노출 - 키보드 접근 시에도 레이어가 노출되도록 구현 이미지 또는 초점을 받을 수 없는 요소에 마우스 이벤트 적용 - 마우스로 조작 가능한 컨.. 2020. 3. 31.
웹 접근성_콘텐츠 간의 구분 웹 페이지에는 다양한 콘텐츠들이 존재하는데요, 이런 콘텐츠를 통해 정보를 인식할 때 이웃한 콘텐츠는 구별될 수 있어야 합니다. 즉, 웹 페이지를 구성하는 모든 이웃한 콘텐츠는 시각적으로 구분되도록 제공해야 합니다. 이웃한 콘텐츠 구분 방법 테두리 이용하여 구분 콘텐츠 사이에 시각적인 구분선을 삽입하여 구분 서로 다른 무늬를 이용하여 구분 콘텐츠 배경색 간의 명도대비(채도)를 달리하여 구분 줄 간격 및 글자 간격을 조절하여 구분 기타 콘텐츠를 시각적으로 구분할 수 있는 방법을 통해 구분 2020. 3. 31.
웹 접근성_자동 재생 금지 웹 페이지에서는 소리가 자동으로 재생되지 않아야 합니다. 여기서 소리는 동영상, 오디오, 음성, 배경 음악 등 콘텐츠가 제공하는 모든 소리를 말합니다. 이런 소리가 자동 재생됨으로 인해 스크린리더 사용자가 콘텐츠를 인식하고 사용하는데 방해받지 않아야 합니다. 페이지 진입 시 자동 재생되는 3초 이상의 배경음 콘텐츠(동영상 포함) 아무것도 모르는 상태로 페이지 진입 시 자동으로 음악이 나오거나 동영상이 재생되는 경우 스크린리더 음성과 겹치게 되면서 페이지의 내용을 인식하기 어렵습니다. 따라서 콘텐츠에 포함된 멀티미디어 파일은 정지 상태로 제공되어야 하고 사용자가 요구할 경우에만 재생 가능하도록 제공해야 합니다. 불가피하게 제공할 경우 해결 방안 3초 내에 정지 ESC 키 선택 시 정지 소스 상 가장 먼저 .. 2020. 3. 31.
반응형

티스토리툴바