본문 바로가기
반응형

분류 전체보기256

웹 접근성_조작 가능 컨트롤 대각선 길이 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.
웹 접근성_텍스트 콘텐츠의 명도 대비 페이지 글씨가 작아도 알아보기 힘들지만 명도 대비가 낮은 경우 역시 가독성이 떨어져 내용을 인식하기 어렵습니다. 노안, 저시력, 색약, 색맹 등의 사용자들도 불편함이 없도록 콘텐츠를 제공해야 하며, 비장애인들도 명도 대비가 높다면 콘텐츠를 더 잘 인식할 수 있습니다. 텍스트 명도 대비 페이지에 존재하는 모든 텍스트에 대해 명도 대비를 준수해야 하는 것은 물론이고, 텍스트가 이미지로 된 경우에도 명도 대비를 준수해야 합니다. 텍스트와 배경색 간의 명도 대비는 4.5:1 이상이 되도록 구현해야 합니다. 의미 있는 이미지 명도 대비 텍스트뿐만 아니라 의미 있는 이미지의 경우에도 이미지를 인식할 수 있도록 명도 대비를 준수해야 합니다. 확대 가능한 브라우저에서 명도 대비 명도 대비가 4.5:1 이상 이어야 한다.. 2020. 3. 31.
웹 접근성_명확한 지시사항 제공 지시 사항은 모양, 크기 위치, 방향, 색, 소리 등에 관계없이 인식될 수 있어야 합니다. 지시 사항을 특정한 단일 감각에만 의존하는 방법으로 제공해서는 안 된다는 것입니다. 즉, 여러 가지 다른 감각을 통해서도 지시 사항을 인식하는 데 문제가 없도록 콘텐츠를 제공해야 합니다. 명확한 지시 사항 제공에 대한 사례들을 살펴보도록 하겠습니다. 모양으로만 정보 제공 회원가입 시 필수 입력 항목들 앞에 별표 문자 모양으로만 정보를 제공하고 있는 경우 오류 사례입니다. 따로 "*표시는 필수 입력 사항입니다."라는 설명을 제공하거나, '*'가 이미지인 경우 대체 텍스트를 "필수"나 "필수 입력사항"이라고 제공하거나, '*'영역에 "필수"라는 정보를 숨김 텍스트로 제공하면 됩니다. 위치나 방향으로만 정보 제공 왼쪽의.. 2020. 3. 31.
웹 접근성_색에 무관한 콘텐츠 인식 콘텐츠는 색에 관계없이 인식될 수 있어야 합니다. 즉, 색을 구분하지 못하더라도 콘텐츠를 인식하는데 문제가 없어야 한다는 말입니다. 색에 무관한 콘텐츠에 대한 사례들을 살펴보도록 하겠습니다. EX:) 색으로만 구분한 사례 차트 슬라이드 버튼 선택 여부 페이지내이션 탭 버튼 선택 여부 색으로만 구분한 경우 색을 구분하기 힘든 사용자는 인식하기 어렵기 때문에 패턴, 굵기, 모양, 테두리 등의 다양한 방법으로 구분하는 것이 좋습니다. 2020. 3. 31.
웹 접근성_자막 제공 멀티미디어 콘텐츠에는 이에 대한 대체 수단을 제공해야 합니다. 대체 수단으로는 자막, 대본, 수화 등이 있으며 이 중 하나를 제공하면 됩니다. 멀티미디어 대체 수단 제공 예를 들어 동영상을 볼 때 청각적으로 내용을 인식할 수 없는 사용자는 동영상에서 나오는 음성을 들을 수 없습니다. 따라서 시각적으로도 인식할 수 있도록 멀티미디어 콘텐츠에 포함된 음성 및 대사와 동등하게 대체 수단을 제공해야 합니다. 대체 수단은 자막, 대본, 원고, 수화 중 하나로 제공해주시면 됩니다. 사용자가 업로드하는 멀티미디어 제3자가 영상을 업로드하는 경우 사용자가 대체 콘텐츠를 제공할 수 있도록 툴을 제공해야 합니다. 음성이 나오지 않는 영상 멀티미디어 콘텐츠가 음성 정보 없이 텍스트만 제공되는 경우는 시각적으로만 인식이 가능.. 2020. 3. 31.
웹 접근성_적절한 대체 텍스트 제공(alt) 적절한 대체 텍스트 제공 : 텍스트 아닌 콘텐츠는 그 의미나 용도를 인식할 수 있도록 대체 텍스트를 제공하여야 한다. alt로 대체 텍스트 제공 텍스트가 있는 이미지를 이미지 요소로 마크업할 때 대체 텍스트는 이미지 요소의 alternative속성인 'alt'에 적용해주시면 됩니다. ex: 비장애인들은 이미지를 보면 시각적으로 내용 인식이 가능하지만 시각적으로 인식이 불가능한 사용자들은 청각적으로 내용을 인식할 수 있도록 보는 것과 듣는 것이 동등하게 대체 텍스트를 제공해야 합니다. 스크린 리더로 들으면 alt 값을 읽어줍니다. img 요소뿐만 아니라 추가적으로 input type이 image이거나 button인 경우, 또는 이미지맵의 area에도 대체 텍스트가 존재한다면 alt로 제공해 주시면 됩니다... 2020. 3. 31.
반응형

티스토리툴바